javascript events - tipos - Ayuda, "esto" me confunde en JavaScript.

try catch javascript ejemplo

Question

Trabajar con JavaScript, una de las cosas confusas es cuando se usa este

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

Sin embargo, cuando se trata de objetos múltiples y, especialmente, de eventos, el contexto cambia y se vuelve confuso para realizar un seguimiento / comprensión.

Entonces, si alguien tiene mejores entradas / directrices / 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

Es muy confuso. Depende de cómo se llame la función. Doug Crockford hizo una buena reseña en su libro Javascript, las partes buenas . La esencia de esto está en esta excelente respuesta a una pregunta formulada de otro modo mal formulada.

Y no, no se trata de rendimiento.

Answer 2

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

x.init()

No mostraría ''prueba'' si no hubiera usado this en la función.

Efectivamente la línea anterior es la misma que:

x.init.call(x);

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

Ahora considere: -

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

Ahora no consigues nada en la alerta. Esto porque lo anterior es efectivamente: -

fn.call(window);

En el navegador Javascript alojado, el objeto de window es sinónimo del objeto global. Cuando una función se llama "en bruto", entonces this 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 el buscador llama a la función asociada al evento onclick utilizando un código como:

onclick.call(theDOMElement)

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

Mi solución habitual a esta situación es:

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

Tenga en cuenta que elem = null es una solución alternativa de pérdida de memoria de IE.

Answer 3

Para mí, me ayudó mucho la siguiente pauta: cada vez que vea a this owner piense. El objeto que posee el nombre de variable al que se asigna la función se convertirá en this . Si no puede tener sentido para quien lo posee, entonces this será una ventana.

Answer 4

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

La regla esencial es que this palabra clave dentro de una función siempre se refiere al propietario de la función, y la clave para comprender las consecuencias es comprender cuándo se hace referencia a las funciones y cuándo se copian . Vea el artículo anterior para ejemplos.

Answer 5

utilizar

var me = this;

fuera de la

function(){

entonces me puedes referir dentro de la función ()