Valor de 'esto' en Javascript

Question

¿Podría alguien explicar por qué 'esto' en los siguientes puntos al objeto DOM y no a la ventana?

$("a").click(function() { 
    console.log(this); 
}); 

Esto produce a:

<a id="first" href="http://jquery.com"> 

considere lo siguiente que debe ser el mismo escenario:

function Foo() { 
    this.click = function(f) { 
     f(); 
    } 
} 

var obj = new Foo(); 
obj.click(function() { 
    console.log(this); 
}); 

Lo que tenemos aquí es el objeto de la ventana (lo que había esperado).

Answer 1

Depende del contexto en el que se ejecuta la función. jQuery cambia explícitamente el contexto de la función de devolución de llamada, mientras que su función ejecuta la función en el contexto global.

para cambiar el contexto:

function Foo() { 
    this.click = function(f) { 
     f.apply(this); 
    } 
} 

o

function Foo() { 
    this.click = function(f) { 
     this.f = f 
     this.f(); 
    } 
} 

Para la lectura adicional:

http://dailyjs.com/2012/06/18/js101-this/

http://dailyjs.com/2012/06/25/this-binding/

Answer 2

this se decidirá por el contexto.

Si cambia su código a continuación, this apuntará a some_other_object.

function Foo() { 
    this.click = function(f) { 
     f.call(some_other_object); 
    } 
} 

Answer 3

En Javascript, OOP es diferente de lo que está acostumbrado en idiomas como Java.

Básicamente, es más fácil pensar que no hay ningún OOP y que this es solo un "argumento oculto" de funciones.

Por ejemplo, cuando se ve

function f(x, y, z) { 
    console.log(this, x, y, z); 
} 

piensan que en los lenguajes de POO comunes (como Java) que sería

function f(this, x, y, z) { 
    console.log(this, x, y, z); 
} 

Cuando vea var a = b.f(x, y, z);, piensan var a = f(b, x, y, z).

Cuando vea var a = f(x, y, z); piensan var a = f(undefined, x, y, z); (En el entorno del navegador, cuando strict mode no se activa, es f(window, x, y, z);)

Ahora debería ser más fácil de entender por qué this en su ejemplo significa cosas diferentes en los ámbitos anidados.

Answer 4

jQuery utiliza la función javascript apply al llamar a controladores de eventos. De la documentación de mdn:

Llama a una función con un valor dado dado y argumentos proporcionados como una matriz.