jQuery/javascript 事件 - 原型事件处理程序答案

【问题标题】：jQuery/javascript events - prototype event handlerjQuery/javascript 事件 - 原型事件处理程序
【发布时间】：2010-06-10 21:12:59
【问题描述】：

以下代码无法正常工作：

function MyObject(input) {
   input.change(this._foo);
   this.X = undefined;
}

MyObject.prototype._foo = function() {
   alert("This code is never called");
   // but if it did
   this.X = true;
}

var test_input = $("input#xyz"); // a random, existing input

var m = MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // undefined

我希望 _foo() 会被调用（如果发生这种情况，_foo() 中的 this 变量将是 MyObject 的实例化。

有谁知道为什么这不起作用，以及将对象传递给事件处理程序的任何替代模式吗？

感谢您的阅读。

布赖恩

【问题讨论】：

jQuery 中有现有的附加事件（bind()、live()）和触发事件（trigger()）的方法。我不确定你在这里得到什么。另外，在我看来，如果你想要调用一个对象方法，你需要像this._foo() 而不是this._foo 那样调用它，否则你正在做分配。不过，我完全有可能误解了你。
How to access the correct `this` / context inside a callback? 的可能重复项
谢谢伯吉。引用的问题是在此问题关闭三年后提出的，那么重复实际上不会朝另一个方向发展吗？三年后提出的问题将这个问题标记为“已回答”是不正确的，并且似乎具有误导性。这个问题不会和这个问题重复吗？

标签： javascript jquery prototype object closures

【解决方案1】：

正如 Kenny 指出的那样，您缺少 new。您还需要确保_foo 中的this 指的是MyObject 实例
一种方法：-

function MyObject( input ) {
    var _this = this;
    input.change( function() {
       // explicitly set the `this` in _foo to `_this`
        _this._foo.call( _this );
    });
   this.X = undefined;
}

MyObject.prototype._foo = function( event ) {
   alert("This is called");
   // and 'this', being 'm', has X set to true
   this.X = true;
   // the textbox must be accessed by 'event.target' not 'this' if you need it
}

var test_input = jQuery("input#xyz"); // a random, existing input

var m = new MyObject(test_input); // attach handler (or try to)

test_input.change(); // trigger event

alert(m.X); // true

附言您不能通过忽略 new 运算符来避免使用它！ :)

【讨论】：

【解决方案2】：

要在 Javascript 中创建对象，请使用 new。

var m = new MyObject(test_input); // attach handler (or try to)

【讨论】：

我一直在努力避免 new，正如 Douglas Crockford 所建议的那样，但你至少指出了代码的这一错误是正确的。 :)
@Brian：不使用new，this 内部MyObject 指向window，而不是MyObject 的“实例”。我将“实例”放在引号中，因为不想使用new，你永远不会创建任何东西的实例。

【解决方案3】：

这个问题现在有点老了，但还有另一种解决方案。您的问题正如 meouw 所提到的，您错过了“新”，事件处理程序中的“this”引用将始终是触发事件的元素，而不是处理事件的对象。

由于您使用的是 JQuery，因此有一种简单的方法可以让它按照您想要的方式运行。使用JQuery.proxy method 设置事件处理程序的上下文以将您的对象用作“this”。在您的示例中，您只需更改行

input.change(this._foo);

到

input.change(jQuery.proxy( this, "_foo" ));

如果您再次遇到 JQuery 的这个问题，请尝试一下。

【讨论】：