Как предотвратить «это» от отскока обработчиками событий

Question

У меня есть объект JS, и одна из его прототипов - это обработчик событий для щелчка. Когда эта функция вызывается, объекту this присваивается элемент, к которому привязан клик. Я бы хотел, чтобы this был экземпляром объекта, к которому принадлежит функция. Возможно ли это, и если да, то как мне это сделать? Решения с или без jQuery приемлемы для меня, хотя я уверен, что остальная часть SO оценит чистое решение JS.

Я пробовал binding the function to this, и он привязан к окну, а не к экземпляру объекта.

Пример того, что я хочу: В this demo (код дублируется ниже), я хочу, предупреждение, которое говорит «Барк», когда кнопка нажата.

var Dog = function() { 
    this.sound = "Bark"; 
} 

Dog.prototype = { 
    sayHello: function (e) { 
     if (typeof this.sound == "undefined") { 
      alert("I don't know what sound I should make!\n" + this); 
     } else { 
      alert(this.sound); 
     } 
    } 
} 

var d = new Dog(); 
var elem = document.getElementById("click"); 
elem.addEventListener("click", d.sayHello); 

Answer 1

Если вы всегда намерены для функции, которая будет вызываться с собственным контекстом, выполняйте привязку, когда вместо этого выполняется конструктор:

var Dog = function() { 
    this.sound = "Bark"; 
    this.sayHello = this.sayHello.bind(this); 
} 

http://jsfiddle.net/04ykpsx1/1/

Нечто подобное _.bindAll может уменьшить шаблонное для вас.

Это лучший подход, чем заставить ваших абонентов всегда вызывать функцию с помощью .bind, потому что им не нужно так глубоко понимать ваш класс.

Answer 2

Вы можете использовать .bind() так:

elem.addEventListener("click", d.sayHello.bind(d)); 

Ручной способ сделать это с вашей собственной функции:

elem.addEventListener("click", function(e) { 
    return d.sayHello(); 
});