javascript - JQuery overwriting this keyword in prototype

Question

JQuery seems to overwrite the this keyword of my instance method, when added as an event handler. Why does this happen? Code below:

function Foo() {};
Foo.prototype.bark = function() {
    console.log(this);
};

var foo = new Foo();

$("#b").click(foo.bark);

Output on click: <button id="b" type="button">

However JQuery does not seem to override the this keyword in the code below:

$("#b").click(function() { foo.bark(); });

Output on click:

`Foo { bark=function()}`

score 5 · Accepted Answer

这是预期的行为。分配为事件侦听器的所有函数都将 this指向触发事件的元素实例。

您可以通过在处理程序时使用匿名包装函数来克服这个问题，例如：

$("#b").click(function() {foo.bark() });

score 2 · Accepted Answer

那是因为click将对元素的引用传递给它的处理程序（在您的情况下是树皮）

当你这样做时：

$("#b").click(function(){
  foo.bark();
});

您将无法使用this在bark()

score 1 · Accepted Answer

handler 参数接受一个回调函数... 在 handler 中，关键字this指的是 handler 绑定到的 DOM 元素。

score -1 · Accepted Answer

您的问题的解决方案是$.proxy(). 你可以在这里阅读更多关于它的信息

尝试$('#b').on('click', $.proxy( foo.bark, this ) )

编辑：实际上代理函数的正确调用是$.proxy( foo.bark, foo );

4 回答 4