Come posso mantenere il contesto di "questo" in jquery

Question

Ho qualcosa del genere:

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

Il problema è che all'interno della funzione anonima 'this' si riferisce all'oggetto window. So che potrei fare qualcosa del tipo:

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

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

Answer 1

La soluzione che hai trovato è quella utilizzata dalla maggior parte delle persone. La convenzione comune è chiamare la tua temp. Questa variabile "quella."

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 corregga il mio se sbaglio).

Answer 3

Cordiali saluti la capacità di controllare questo sta arrivando nella prossima versione di JQuery

Answer 4

L'ho fatto in questo modo in molte situazioni difficili. Non sembra elegante, ma non manca mai. In realtà sono le chiusure javascript in azione.

JRH

Answer 5

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

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

    this.materials = 2000;

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

Ricorda di usare la parola chiave var davanti alla tua 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 quella di utilizzare il metodo Function.prototype.bind ().

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

Il problema con questo metodo che potrebbe causare complicazioni future, il che significa che dovresti scegliere di usarlo con parsimonia, è quando devi invocare $ (this) per afferrare l'elemento. Quindi, potrei suggerire che varrebbe la pena usare Function.prototype.bind () nel tuo metodo di ridimensionamento, ma non sarebbe una buona soluzione usarlo in una funzione click di cui potresti aver bisogno per indirizzare direttamente l'elemento cliccato.

Vedi questo JSFiddle per un esempio funzionante.

Consulta la Documentazione di Mozilla su 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.