de ayuda "este" se me confunde en JavaScript

Question

Trabajar con el JavaScript uno de lo confuso es cuando se usa este

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

Sin embargo cuando se trata de objeto múltiple y especialmente eventos contexto de this cambios y se vuelve confuso para seguir/entender.

Entonces, si alguien tiene mejores entradas/pautas/pensamientos/mejores prácticas, por favor comparta. También me gustaría saber si el uso de this da alguna ventaja (rendimiento) o qué?

Answer 1

No se trata de rendimiento, se trata de acceder a una propiedad de una instancia específica de un objeto: -

x.init() 

, no se mostrará 'prueba' si no hubiera this utilizar en la función.

eficazmente la línea de arriba es la misma que: -

x.init.call(x); 

la primera parámetro de en el uso de call se asigna a this cuando se ejecuta la función.

Ahora tener en cuenta: -

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

Ahora usted no consigue nada en la alerta. Esto debido a que el anterior es efectiva: -

fn.call(window); 

En navegador Javascript acogió el objeto window es sinónimo con el objeto global. Cuando una función se denomina "en bruto", el this se establece de forma predeterminada en el objeto global.

El error clásico es hacer algo como esto: -

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

Sin embargo, esto no funciona porque la función de adjunto al evento onclick es llamado por el navegador usando un código como: -

onclick.call(theDOMElement) 

Por lo tanto, cuando la función se está ejecutando this no es lo que cree que es.

Mi solución habitual a esta situación es la siguiente: -

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

Nota del elem = null es pérdida de memoria IE solución temporal.

Answer 2

Es muy confuso. Depende de cómo llame a la función. Doug Crockford hizo una buena reseña en su libro Javascript, the Good Parts. La esencia de esto está en this excellent answer a una pregunta mal formulada.

Y no, no se trata de rendimiento.

Answer 3

Un artículo bueno y esclarecedor sobre la palabra clave this es this (sin juego de palabras). El artículo puede aclarar las cosas para ti, sé que lo hizo por mí.

La regla esencial es que el this palabra clave dentro de una función siempre se refiere al propietario función, y la clave para la comprensión de las consecuencias es la comprensión cuando las funciones son referidos y cuando son copiados . Vea el artículo antes mencionado para ejemplos.

Answer 4

uso

var me = this; 

fuera del

function(){ 

entonces usted puede referirse a mí dentro de la función()

Answer 5

Para mí, ayudó mucho el principio siguiente: cada vez ves this piensa owner. El objeto que posee el nombre de la variable a la que se asigna la función se convertirá en el this. Si no puede tener sentido quién lo posee, entonces this será una ventana.