Valore di "this" in Javascript

Question

Qualcuno potrebbe spiegare perché "questo" nei seguenti punti all'oggetto DOM e non a Window?

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

Questo produce a:

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

Si consideri il seguente, che dovrebbe essere lo stesso scenario:

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

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

Quello che siamo arrivati ​​qui è l'oggetto window (quello che avevo previsto).

Answer 1

Spetta al contesto in cui viene eseguita la funzione. jQuery modifica esplicitamente il contesto della funzione di callback, mentre la funzione esegue la funzione nel contesto globale.

per cambiare il contesto:

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

o

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

Per ulteriori approfondimenti:

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

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

Answer 2

this sarà deciso dal contesto.

Se si modifica il codice in basso, quindi this punterà a some_other_object.

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

Answer 3

In Javascript, OOP è diverso da ciò a cui sei abituato in linguaggi come Java.

Fondamentalmente, è più facile pensare che non ci sia OOP e che this sia solo un "argomento nascosto" di funzioni.

Ad esempio, quando si vede

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

pensano che in linguaggi orientati agli oggetti comuni (come Java) che sarebbe

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

Quando vedi var a = b.f(x, y, z);, pensare var a = f(b, x, y, z).

Quando vedi var a = f(x, y, z); pensa var a = f(undefined, x, y, z); (In ambiente del browser, quando strict mode non è attivato, è f(window, x, y, z);)

Ora dovrebbe essere più facile capire perché this nel tuo esempio significa cose diverse in ambiti annidati.

Answer 4

jQuery utilizza la funzione javascript apply quando si chiama gestore di eventi. Dalla documentazione di mdn:

Chiama una funzione con un dato valore e argomenti forniti come matrice.