JQuery在原型中覆盖了这个关键字

Question

当添加为事件处理程序时，JQuery似乎会覆盖我的实例方法的this关键字。为什么会这样？代码如下：

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

var foo = new Foo();

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

点击输出： <button id="b" type="button">

但是JQuery似乎没有覆盖下面代码中的this关键字：

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

点击输出：

`Foo { bark=function()}`

Answer 1

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

您可以通过使用匿名包装函数来解决此问题：处理程序如下：

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

Answer 2

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

执行此操作时：

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

您将无法使用this引用bark()中的点击元素

Answer 3

From the docs:

  

handler参数采用回调函数...在处理程序中，关键字this引用处理程序绑定的DOM元素。

Answer 4

您的问题的解决方案是$.proxy()。您可以阅读更多相关信息here

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

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