JQuery, перезаписывающее это ключевое слово в прототипе

Question

JQuery, похоже, перезаписывает ключевое слово моего метода экземпляра при добавлении в качестве обработчика события. Почему это происходит? Код ниже:

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

From the docs:

Параметр обработчика принимает функцию обратного вызова ... В обработчика, ключевое слово this относится к элементу DOM, к которому обработчик связан.

Answer 2

Это ожидаемое поведение iour. Все функции, назначенные в качестве прослушивателя событий, будут иметь значение this, указывающее на экземпляр элемента, на котором было запущено событие.

Вы можете преодолеть это, используя анонимную функцию обертку, как вы обработчику как:

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

Answer 3

Это происходит потому, что click передает ссылку на элемент, чтобы это обработчик (который кора в вашем случае)

Когда вы сделаете это:

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

вы не сможете использовать this ссылаться щелкнул элемент в bark()

Answer 4

Решение проблемы: $.proxy(). Вы можете прочитать больше об этом here

Попробуйте $('#b').on('click', $.proxy(foo.bark, this))

Edit: на самом деле правильный вызов функции прокси-сервера является $.proxy(foo.bark, foo);