理解Javascript的_this,不同类型的函数调用以及如何在函数内调用函数？

Question

我正在学习如何对现有的javascript代码进行逆向工程,我遇到了一些问题,这是因为我对核心javascript的工作原理缺乏了解.下面的代码以及我所拥有的评论的屏幕截图.

代码从声明var warper开始.

• 然后warper变量等于函数内的函数？为什么它不是函数Warper()的通常调用,而是它内部的另一个函数？
• 我注意到了_this的使用.这与通常使用的常规有什么不同？
• #btn-submit id设置为在单击时激活.我可以看到它调用了click_submit函数,但为什么它是Warper.prototype.click_submit而不仅仅是click_submit()？
• 我最后的问题是,我真正想做的是通过js调用click_submit函数,而不必单击#btn-submit按钮.

问题:如何使用js调用warper.click_submit函数而无需单击按钮？我正在尝试将其集成到我的另一段代码中.

我试过warper.prototype.click_submit,它没有做任何事情.我假设它是因为它在函数内部的函数？

(function() {
  var Warper;

  Warper = (function() {
    function Warper() {
      this.check_compatibility();
      this.attach_ux();
      if (window.SALT_DEFAULT != null) {
        $('#salt').val(window.SALT_DEFAULT);
        $('#salt').attr('disabled', true);
        $('.salt-label').text('Prefilled salt');
      }
    }

    Warper.prototype.check_compatibility = function() {
      if (typeof Int32Array === "undefined" || Int32Array === null) {
        return $('.form-container').html('<p>\n  Sorry, but your browser is too old to run WarpWallet, which requires Int32Array support.\n</p>');
      }
    };

    Warper.prototype.attach_ux = function() {
      $('#btn-submit').on('click', (function(_this) {
        return function() {
          return _this.click_submit();
        };
      })(this));
      $('#btn-reset').on('click', (function(_this) {
        return function() {
          return _this.click_reset();
        };
      })(this));
      return $('.what-salt').on('click', (function(_this) {
        return function() {
          return $('.salt-explanation').toggle();
        };
      })(this));
    };


    Warper.prototype.click_submit = function() {
      $('#btn-submit').attr('disabled', true).html('Running...');
      $('#btn-reset').attr('disabled', true).html('Running...');
      $('#passphrase, #salt, checkbox-salt-confirm').attr('disabled', true);
      $('.progress-pbkdf2, .progress-scrypt').html('');
      $('.progress-form').show();
      return warpwallet.run({
        passphrase: $('#passphrase').val(),
        salt: $('#salt').val(),
        progress_hook: (function(_this) {
          return function(o) {
            return _this.progress_hook(o);
          };
        })(this),
        params: window.params
      }, (function(_this) {
        return function(res) {
          $('#passphrase, #checkbox-salt-confirm').attr('disabled', false);
          if (window.SALT_DEFAULT == null) {
            $('#salt').attr('disabled', false);
          }
          $('#private-key').val(res["private"]);
          _this.write_qrs(res["public"], res["private"]);
          return console.log;
        };
      })(this));
    }; //click_submit

    return Warper;

  })(); // Warper End

  $(function() {
    return new Warper();
  });

}).call(this); // End Function

Answer 1

代码从声明var warper开始.

• 然后warper变量等于函数内的函数？为什么它不是函数Warper()的通常调用,而是它内部的另一个函数？

它是另一个创建自己范围的函数.这种做法主要用于分离非相关代码并防止全局变量.

• 我注意到了_this的使用.这与通常使用的常规有什么不同？

_this只是一个设置为指向外部的变量this.每当你调用一个它拥有的函数时this(取决于你如何调用函数).因此,如果在另一个函数中定义回调,并且您需要引用this该外部("另一个")函数,则可以将其临时保存到变量中.这个临时变量通常被称为_this,that或self.

• #btn-submit id设置为在单击时激活.我可以看到它调用了click_submit函数,但为什么它是Warper.prototype.click_submit而不仅仅是click_submit()？

如果在原型上定义函数,则每个实例都将使用相同的函数.如果你要定义它,this.clik_submit = function(){...}那么每个实例都必须拥有它自己的那个函数副本.最后一个选项是仅定义function click_submit(){...}内部范围,但是然后无法从范围外部访问该函数.

• 我的最后一个问题,我真正想做的是通过js调用click_submit函数,而不必点击

  btn-submit按钮.

您需要访问warper实例才能调用该click_submit函数.没有它(并且无法更新代码),就无法调用它.但是你可以考虑自己在按钮上创建点击事件,这将触发该功能.使用jquery就像这样简单$("#btn-submit").click();