Come posso mantenere il contesto di 'questo' in jQuery

Question

ho qualcosa di simile a questo:

var Something = function(){ 
    this.render = function(){}; 
    $(window).resize(function(){ 
    this.render(); 
    }); 
} 

Il guaio è che all'interno della funzione anonima 'questo' fa riferimento all'oggetto finestra. So che potrei fare qualcosa di simile:

var Something = function(){ 
    this.render = function(){}; 
    var tempThis = this; 
    $(window).resize(function(){ 
    tempThis.render(); 
    }); 
} 

ma c'è un modo migliore? Questo non sembra molto elegante.

Answer 1

La soluzione che avete trovato è la la più persone usano. La convenzione comune è chiamare la tua tempThis variabile "that".

var Something = function(){ 
    this.render = function(){}; 
    var that = this; 
    $(window).resize(function(){ 
    that.render(); 
    }); 
}; 

Answer 2

Sembra la tua migliore opzione, non penso che ci sia un modo migliore. (qualcuno corregge il mio se sbaglio).

Answer 3

Ho fatto in questo modo in molte situazioni strette. Non sembra elegante, ma non fallisce mai. In realtà, le chiusure javascript in azione.

JRH

Answer 4

FYI la capacità di controllare questo è in arrivo nel next version of JQuery

Answer 5

Questo è esattamente quello che faccio. Non è specifico nemmeno per jQuery.

var Construct = function() { 
    var self = this; //preserve scope 

    this.materials = 2000; 

    this.build = function(){ 
     self.materials -= 100; 
    }; 
}; 

Ricordarsi di utilizzare la parola chiave var davanti alla nuova variabile scope. Altrimenti, stai creando una nuova variabile globale. Come variabile locale, sarà comunque accessibile all'interno della funzione interna tramite una chiusura.

Answer 6

La soluzione migliore, per mantenere le variabili al minimo sarebbe utilizzare il metodo Function.prototype.bind().

var Something = function(){ 
    this.render = function(){}; 
    $(window).resize(this.render.bind(this)); 
} 

Il problema con questo metodo che può causare complicazioni future, il che significa che si dovrebbe scegliere di utilizzare con parsimonia, è quando si ha bisogno di invocare $(this) per afferrare l'elemento. Quindi, potrei suggerire che varrebbe la pena utilizzare Function.prototype.bind() nel metodo di ridimensionamento, ma non sarebbe una buona soluzione utilizzarlo in una funzione di clic che potrebbe aver bisogno di indirizzare direttamente l'elemento cliccato.

Vedere questo JSFiddle per un esempio funzionante.

Vedere la Mozilla Documentation on Function.prototype.bind() per ulteriori informazioni

Gli altri metodi sono utilizzabili, ma la creazione di una variabile per mantenere il contesto di questo è l'effetto indesiderato in base alla tua domanda.