addEventListener и область действия этого

Question

У меня есть сторонний Flash-объект, который я могу манипулировать с помощью предоставленного им javascript-интерфейса. Я пытаюсь прослушать событие на этом объекте, а затем запустить событие внутри моего объекта, чтобы еще больше разжечь событие. Я, случается, использую EXT Js, но я не думаю, что это важно здесь.

Пример кода

this.chart.addEventListener('create', function() { 
    this.fireEvent('created'); 
}, false) 

Моя проблема заключается в том, что «это» внутри анонимной функции относится к объекту, который уволил событие, а не мой объект, который я хочу стрелять событие на.

Его еще одна проблема с объемом. Заранее благодарю за любую помощь.

Answer 1

Это типичный подход к этой проблеме: -

(function(self) { 
    self.chart.addEventListener('create', function() {self.fireEvent('created');}, false); 
})(this); 

Answer 2

Как создать внешнюю переменную перед ссылкой на этот объект. Например:

var _this = this; 
this.chart.addEventListener('create', function() { _this.fireEvent('created'); }, false) 

Answer 3

В то время как другие ответы выполнить то, что вам нужно, они не работают наиболее эффективно (масштабируемый) способ , потому что они не в конечном итоге отделяют объект вида (this.chart) от логики этого представления (fireEvent()). В приложениях MVC эти представления «решения» находятся в контроллере . Контроллер «управляет» просмотрами и должен содержать все API, к которым может обратиться представление.

В вашем примере this является контроллером, и все в порядке (это означает, что вы добавляете слушателей в нужное место). Все, что вам действительно нужно сделать, это связать обработчик рамки вещи, которые должны делать «обработки» - в вашем случае: this:

// `this` is the controller of `chart` 
this.chart.addEventListener('create', function() { 
    this.fireEvent('created'); 
}.bind(this)); 

Что другие ответы на этой странице, сделали это сделали его поэтому ваше представление становится его собственным контроллером, но только при обработке событий «создавать», назначая временную ссылку на «контроллер», используя var self = this. Опять же, это работает отлично, но это не очень хорошо работает в масштабах приложений, управляемых событиями, и это не имеет никакого смысла, если у вас есть много событий для обработки.

.bind() - это реализация ECMAScript 5. Если это необходимо для работы в более старых браузерах, здесь описывается хороший способ его использования (с использованием functions и .call()): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind