Javascript «this» overridden event listener

Question

Я, вероятно, что-то не так, но я нашел какое-то интересное поведение при попытке применить некоторое объектно-ориентированное программирование к Javascript. Рассмотрим следующий

function Bug(element) { 
    this.focusedCell = null; 
    element.addEventListener('click', this.onClick, true); 
}; 

Bug.prototype.onClick = function(event){ 
    console.log("this is: "); 
    console.log(this); 
}; 

Когда я вызываю метод из консоли, я вижу правильный экземпляр «это», но когда я нажимаю на элемент в документе я вижу элемент документа вместо экземпляра. Поэтому ... скорее всего, это не очень хорошая идея использовать прослушиватели событий с помощью методов экземпляра, по крайней мере, так, как я это делаю.

Так что вопрос:

• Можно ли иметь слушателя событий, как это, что вызывает метод экземпляра объектов JavaScript, сохраняя при этом экземпляр в вызове?

• Есть ли лучший образец для этого?

Редактировать: Я не пробовал это ни в чем, кроме Chrome. Но я бы предположил, что поведение такое же.

Answer 1

Там это лучший образец, и не требует больших изменений. Сначала я покажу код.

function Bug(element) { 
    this.focusedCell = null; 
    // --------------------------------v----pass the object, not a function 
    element.addEventListener('click', this, true); 
}; 

// Implement the `EventListener` interface 
Bug.prototype.handleEvent = function(event) { 
    if (event.type === "click") 
     this.onClick(event); 
} 

Bug.prototype.onClick = function(event) { 
    console.log(JSON.stringify(this));   // '{"focusedCell":null}' 
    console.log(event.currentTarget.nodeName); // "DIV" 
}; 

Добавляя метод handleEvent, мы делаем Bug реализовать интерфейс EventListener. Это позволяет нам передать новый объект Bug в качестве второго аргумента в addEventListener() вместо функции.

Теперь, когда "click" событие произойдет, метод .handleEvent() будет вызван, и значение this в этом методе будет Bug объект, который был связан.

---

Поскольку this является ссылка на экземпляр Bug, он, очевидно, не будет ссылка на элемент больше. Но это необязательно, поскольку элемент доступен через event.currentTarget.

Конечно, вы можете добавить элемент непосредственно к своему объекту в конструкторе, если хотите.

DEMO:http://jsfiddle.net/CnZTa/

---

Answer 2

Это нормальное поведение в JavaScript. Вы можете сохранить ваши ожидается this, передав функцию на слушателя:

function Bug(element) { 
    var self = this; // Store a reference to this 
    this.focusedCell = null; 
    element.addEventListener('click', function() { 
     // in here this refers to element 
     self.onClick(event); 
    }, true); 
}; 

Bug.prototype.onClick = function(event){ 
    console.log("this is: "); 
    console.log(this); // In here this refers the an instance of Bug. 
}; 

Answer 3

Вы можете использовать Function.prototype.bind для создания слушателя, связанного с каким-либо это значение, которое вы хотите:

function Bug(element) { 
    this.focusedCell = null; 
    element.addEventListener('click', this.onClick.bind(this), true); 
}; 

пожилых (не ES5) браузеров потребуется полиполк, такой как номер от MDN.