addEventListener e lo scopo di questo

Question

Ho un oggetto flash di terze parti che posso manipolare tramite un'API javascript fornita. Sto provando ad ascoltare un evento su questo oggetto e poi a lanciare un evento all'interno del mio oggetto per far scoppiare l'evento. Mi è capitato di usare EXT Js ma non penso sia importante qui.

codice di esempio

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

mio problema è che 'questo' all'interno della funzione anonima si riferisce all'oggetto che ha generato l'evento piuttosto che il mio oggetto che voglio generare un evento on.

L'ennesimo problema di ambito. Grazie in anticipo per qualsiasi aiuto.

Answer 1

Questo è l'approccio tipico a questo problema: -

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

Answer 2

Che dire creare una variabile esterna prima di fare riferimento a "questo" oggetto. Per esempio:

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

Answer 3

Mentre le altre risposte realizzare quello che avevi bisogno, che non funzionano nel modo più efficiente (scalabile) , perché in definitiva non disaccoppiano l'oggetto vista (this.chart) dalla logica di quella vista (fireEvent()). Nelle applicazioni MVC, queste "decisioni" vengono visualizzate in un controller . Il controller "controlla" le viste e dovrebbe contenere tutte le API a cui la vista può accedere.

Nel tuo esempio, this è il controller, e va bene (vuol dire che stai aggiungendo gli ascoltatori nel posto giusto). Tutto ciò che dovete fare è associare il gestore per la portata della cosa che dovrebbe fare il "trattamento" - nel vostro caso: this:

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

Quali le risposte su questa pagina hanno fatto è reso quindi la visualizzazione diventa il proprio controller, ma solo durante la gestione degli eventi di 'creazione', assegnando un riferimento temporaneo al "controller" utilizzando var self = this. Di nuovo, questo funziona bene, ma non funziona bene su larga scala in applicazioni event-driven, e non ha senso se si hanno molti eventi da gestire.

.bind() è un'implementazione di ECMAScript 5. Se è necessario lavorare anche con i browser più vecchi, qui viene descritto un buon metodo (utilizzando functions e .call()): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind