addEventListener y el alcance de este

Question

Tengo un objeto flash de terceros que puedo manipular a través de una API de JavaScript que proporcionan. Estoy tryind para escuchar un evento en este objeto y luego disparar evento dentro de mi objeto para impulsar aún más el evento. Resulta que estoy usando EXT Js, pero no creo que sea importante aquí.

Código de ejemplo

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

Mi problema es que 'esto' dentro de la función anónima se refiere al objeto que generó el evento en lugar de mi objeto que quiero para disparar un evento sobre.

Su otro problema de alcance. Gracias de antemano por cualquier ayuda.

Answer 1

Este es el típico enfoque a este problema: -

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

Answer 2

¿Qué hay de la creación de una variable externa antes de hacer referencia a 'este' objeto. Por ejemplo:

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

Answer 3

Mientras que las otras respuestas lograr lo que necesitaba, que no funcionan de la manera más eficiente (escalable) , porque finalmente no desacoplan el objeto de vista (this.chart) de la lógica de esa vista (fireEvent()). En las aplicaciones MVC, estas "decisiones" de vista residen en un controlador . El controlador "controla" vistas y debe contener todas las API a las que puede acceder la vista.

En su ejemplo, this es el controlador, y eso está bien (significa que está agregando sus oyentes en el lugar correcto). Todo lo que necesita hacer es obligar a la manejador al ámbito de lo que debe hacer el "manejo" - en su caso: this:

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

Lo que las otras respuestas en esta página han hecho que se hace para que su vista se convierta en su propio controlador, pero solo mientras maneja eventos 'crear', asignando una referencia temporal al "controlador" usando var self = this. Nuevamente, esto funciona bien, pero no funciona bien a escala en aplicaciones basadas en eventos, y realmente no tiene sentido si tiene que manejar muchos eventos.

.bind() es una implementación de ECMAScript 5. Si es necesario trabajar en navegadores aún más antiguos, aquí se describe un buen método para hacerlo (usando functions y .call()): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind