Question

我正在尝试在Javascript中使用原型继承。我的代码下面的问题是，当单击按钮并调用MyNamespace.MyObj.myEventHandler时，this的值不是MyNamespace.MyObj的实例，而是单击的按钮。

我构建错误的东西（有更好的方法）吗？我可以以某种方式确保this是对象的实例而不是调用者按钮吗？

var MyNamespace.MyObj = function(myform) {
  this.myform = myform;
  jQuery('.mybutton', this.myform).click(this.myEventHandler);
};

MyNamespace.MyObj.prototype = {
  myEventHandler: function() {
    this.myform.get(0).submit();
  }
};

jQuery(document).ready(function() {
  new MyNamespace.MyObj(jQuery('#myform'));
});

这只是我用来学习原型继承的一个非常愚蠢的例子。我意识到上面代码的实际功能可以简单地在jQuery中完成，或者我可以使用对象文字或模块模式 - 但我真的只是对学习原型继承而不是在此时实现特定函数感兴趣

Answer 1

有多种方法可以保留this值，最简单的IMO是：

var MyNamespace.MyObj = function(myform) {
  var instance = this; // store `this`
  this.myform = myform;
  jQuery('.mybutton', this.myform).click(function () {
    instance.myEventHandler(); // use the stored value
  });
};

Answer 2

如果您有权访问es5 Function.prototype.bind，则可以执行以下操作：

jQuery('.mybutton', this.myform).click(this.myEventHandler.bind(this));

jQuery提供jQuery.proxy，它做同样的事情，但语法不同：

jQuery('.mybutton', this.myform).click(jQuery.proxy(this.myEventHandler, this));

这两个都使用方法和对象，并返回一个将在该对象上调用该方法的函数。

当你在javascript中传递（或赋值）一个方法时，它会被原始对象切掉。这只是你必须知道的事情之一。（实际上，这与继承工作是一样的。方法从父进程中切除，并在子进程的上下文中调用。）

*说，通过es5 shim。

用作事件处理程序的Javascript原型函数中'this'的值

2 个答案: