Aiuto, "questo" è confondermi in JavaScript

Question

Lavorare con il JavaScript una delle cose confusione è quando si utilizza questo

var x = { 
    ele : 'test', 
    init : function(){ 
    alert(this.ele); 
    } 
} 

Tuttavia quando si tratta di oggetti multipla e in particolare nell'ambito di eventi di this cambiamenti e diventa confondere per tenere traccia/capire.

Quindi, se qualcuno ha migliori input/linee guida/pensieri/pratiche migliori, si prega di condividere. Inoltre vorrei sapere se l'utilizzo di this offre vantaggi (prestazioni) o cosa?

Answer 1

Non si tratta di prestazioni, si tratta di accesso a una proprietà di una specifica istanza di un oggetto: -

x.init() 

non visualizzerebbe 'test' se non aveste utilizzare this nella funzione.

efficacemente la riga precedente è la stessa: -

x.init.call(x); 

primo paramater nell'uso di call è assegnato a this quando viene eseguita la funzione.

Ora considerare: -

var fn = x.init; //Note no() so the function itself is assigned to the variable fn 
fn(); 

ora si ottiene nulla in allerta. Questo perché quanto sopra è efficace: -

fn.call(window); 

nel browser ospitato Javascript l'oggetto window è sinonimo di oggetto globale. Quando una funzione è chiamata "nel raw", il valore this viene impostato automaticamente sull'oggetto globale.

L'errore classico sta facendo qualcosa di simile: -

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     elem.onclick = function() { alert(this.ele); } 
    } 
} 
x.init(document.getElementById('myButton')); 

Tuttavia questo non funziona perché la funzione collegata al l'evento onclick viene chiamato dal browser utilizzando il codice come: -

onclick.call(theDOMElement) 

Quindi quando la funzione è in esecuzione this non è quello che pensi che sia.

mia solita soluzione a questa situazione è: -

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     var self = this; 
     elem.onclick = function() { alert(self.ele); } 
     elem = null; 
    } 
} 
x.init(document.getElementById('myButton')); 

Annotare il elem = null è IE perdita di memoria work-around.

Answer 2

È molto confuso. Dipende da come chiami la funzione. Doug Crockford ha scritto bene nel suo libro Javascript, the Good Parts. L'essenza di esso è in this excellent answer a una domanda altrimenti mal formulata.

E no, non si tratta di prestazioni.

Answer 3

Un buon e illuminante articolo sulla parola chiave this è this (non è previsto il gioco di parole). L'articolo potrebbe chiarire le cose per te, lo so che ha fatto per me.

La regola fondamentale è che la parola this all'interno di una funzione si riferisce sempre al proprietario funzione e la chiave per comprendere le conseguenze è capire quando le funzioni sono cui e quando sono copiati. Vedere l'articolo di cui sopra per gli esempi.

Answer 4

uso

var me = this; 

al di fuori del

function(){ 

allora si può fare riferimento a me all'interno della funzione()

Answer 5

Per me, ha aiutato molto le seguenti linee guida: ogni volta vedi this pensa a owner. L'oggetto proprietario del nome della variabile a cui è assegnata la funzione diventerà this. Se non riesci a dare un senso a chi lo possiede, allora this sarà finestra.