Как я могу получить доступ к `this` в обработчике событий?

Question

У меня есть класс, который создает элемент DOM и должен захватывать все события щелчка.

Упрощенный код:

function myClass()
{
  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", this.handleClick);
}
myClass.prototype.handleClick = function(evt)
{
  alert("Clicked!");
  // How to modify `this` object?
}

Теперь я хочу изменить некоторые атрибуты и переменные myClassэкземпляр в handleClick().Но this относится, конечно, к объекту canvas.

Вопрос: Как получить доступ к this объекта в обработчике событий?

Answer 1

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

На шаге 1 у меня есть ваш пример, показывающий, как this является элементом, по которому щелкнули: http://jsfiddle.net/JAAulde/GJXpQ/

На шаге 2 у меня есть пример, который сохраняет ссылку на ваш экземпляр в вашем конструкторе, затем устанавливает анонимную функцию в качестве обработчика щелчков и вызывает ваш метод щелчков из сохраненной ссылки. http://jsfiddle.net/JAAulde/GJXpQ/1/ Это заставляет this в вашем обработчике кликов быть вашим экземпляром и будет работать для вас, если вам не нужен доступ к элементу, по которому щелкнули.

На шаге 3 я сохранил ту же ссылку и использовал анонимную функцию, но внутри этой функции я выбираю аргументы, которые входят в анонную функцию при нажатии, я добавляю ссылку на экземпляр к этим аргументам и вызываю обработчик щелчка в области действия элемента, по которому щелкнули, и передать новый набор аргументов. http://jsfiddle.net/JAAulde/GJXpQ/2/ Используя эту методологию, внутри обработчика щелчка я могу получить доступ к нажатому элементу через this, а экземпляр myClass - через instance.

Надеюсь, это поможет. Это может быть довольно запутанным, поэтому задавайте вопросы, если это необходимо.

Answer 2

Вы можете сделать это так:

function myClass() {
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
      // use self here
  });
}

Поскольку слушатель на самом деле является замыканием, он поддерживает ссылку на переменную self, которая является объектом, который вы наблюдаете. Фактически this, как вы поняли, ссылается на элемент canvas.

Еще один способ, который работал бы и разделял методы:

function myClass(){
  var self = this;

  this.domElement = document.createElement("canvas");
  this.domElement.addEventListener("click", function(evt){
    myClass.prototype.call(self, evt);
  });
}
myClass.prototype.handleClick = function(evt){
  alert("Clicked!");
  // How to modify `this` object?
}

Теперь этот использует Function.call и присваивает то, на что this ссылается.

Answer 3

Вы можете использовать .bind, который «замораживает» значение this с предустановленным: http://jsfiddle.net/TKAHg/.

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

Хотя .bind недоступно в старых браузерах, MDC имеет шайбу для него .

// bind 'this' value inside handleClick when clicked
this.domElement.addEventListener("click", this.handleClick.bind(this));