¿Cómo puedo mantener el contexto de 'esto' en jQuery

Question

tengo algo como esto:

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

El problema es que dentro de la función anónima se refiere esto al objeto de ventana. Sé que podría hacer algo como:

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

pero ¿hay una manera mejor? Esto no se ve muy elegante.

Answer 1

La solución que has encontrado es el de los término más utilizado. La convención común es llamar a su variable temporal "eso".

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

Answer 2

Parece la mejor opción, no creo que haya una mejor manera. (Alguien me corrige si estoy equivocado).

Answer 3

Lo he estado haciendo de esta manera en muchas situaciones difíciles. No se ve elegante, pero nunca falla. En realidad, eso es javascript closed en acción.

JRH

Answer 4

FYI la capacidad de controlar esto viene en el next version of JQuery

Answer 5

eso es exactamente lo que hago. No es específico de jQuery, tampoco.

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

    this.materials = 2000; 

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

Recuerde utilizar la palabra clave var delante de su nueva variable de ámbito. De lo contrario, estás creando una nueva variable global. Como variable local, seguirá siendo accesible dentro de la función interna a través de un cierre.

Answer 6

La mejor solución, para mantener las variables al mínimo, sería utilizar el método Function.prototype.bind().

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

El problema con este método que puede causar complicaciones futuras, lo que significa que debe elegir para utilizarlo con moderación, es cuando es necesario invocar $(this) para agarrar el elemento. Por lo tanto, podría sugerir que valdría la pena usar Function.prototype.bind() en su método de cambio de tamaño, pero no sería una buena solución usarlo en una función de clic que podría necesitar para dirigir el elemento cliqueado directamente.

Vea esto JSFiddle para un ejemplo de trabajo.

Véase el Mozilla Documentation on Function.prototype.bind() para más información

Los otros métodos se pueden utilizar, pero la creación de una variable para mantener el contexto de esto es el efecto no deseado de acuerdo a su pregunta.