addEventListener i zakres tego

Question

Mam obiekt flash innej firmy, który mogę manipulować za pośrednictwem udostępnionego przez niego interfejsu JavaScript javascript. Próbuję wysłuchać wydarzenia na tym obiekcie, a następnie ogniskuję obiekt wewnątrz obiektu, aby jeszcze bardziej spopularyzować to wydarzenie. Zdarza się, że używam EXT Js, ale nie sądzę, że jest to ważne.

Przykładowy kod

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

Moim problemem jest to, że „to” wewnątrz funkcji anonimowej odnosi się do obiektu, który opalane zdarzenie zamiast mojego obiektu, który chcę ognia zdarzenie dalej.

Jest to kolejny problem z zakresu. Z góry dziękuję za pomoc.

Answer 1

Jest to typowe podejście do tego problemu: -

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

Answer 2

A co z tworzeniem zmiennej zewnętrznej przed odniesieniem do "tego" obiektu. Na przykład:

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

Answer 3

Podczas gdy inne odpowiedzi osiągnąć to, co potrzebne, one nie działają w najbardziej efektywny sposób (Scalable) , ponieważ nie oddzielają ostatecznie obiektu widoku (this.chart) od logiki tego widoku (fireEvent()). W aplikacjach MVC te "decyzje" dotyczące widoku znajdują się w kontrolerze . Kontroler "steruje" widokami i powinien zawierać wszystkie interfejsy API, do których może uzyskać dostęp widok.

W twoim przykładzie, this jest kontrolerem i to dobrze (to znaczy, że dodajesz swoich słuchaczy we właściwym miejscu). Wszystko, co naprawdę trzeba zrobić, to wiążą obsługi do zakresu rzeczy, które należy zrobić z „obsługa” - w przypadku: this:

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

Jakie inne odpowiedzi na tej stronie zrobili jest to więc widok staje się jego własnym kontrolerem, ale tylko podczas obsługi zdarzeń "tworzenia" poprzez przypisanie tymczasowego odwołania do "kontrolera" przy użyciu var self = this. Znowu działa to dobrze, ale nie działa dobrze na dużą skalę w aplikacjach sterowanych zdarzeniami i nie ma większego sensu, jeśli masz do czynienia z wieloma zdarzeniami.

.bind() jest implementacją ECMAScript 5. Jeśli jest to potrzebne do pracy w jeszcze starszych przeglądarkach, dobrze jest to opisać tutaj (używając functions i): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind