Wert von 'this' in Javascript

Question

Könnte jemand bitte erklären, warum 'this' in den folgenden Punkten auf das DOM-Objekt und nicht auf Window?

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

Daraus ergibt sich zu:

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

Folgendes berücksichtigen, die das gleiche Szenario sein sollte:

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

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

Was wir bekommen ist hier das Window-Objekt (was ich erwartet hatte).

Answer 1

Es hängt vom Kontext ab, in dem die Funktion ausgeführt wird. jQuery ändert explizit den Kontext der Callback-Funktion, während Ihre Funktion die Funktion im globalen Kontext ausführt.

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

Weiterführende Literatur

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

oder

:

, um den Kontext zu ändern

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

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

Answer 2

this wird durch den Kontext entschieden werden.

Wenn Sie Ihren Code wie folgt ändern, wird this auf some_other_object zeigen.

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

Answer 3

In Javascript unterscheidet sich OOP von dem, was Sie in Sprachen wie Java gewohnt sind.

Grundsätzlich ist es einfacher zu denken, dass es keine OOP gibt und dass this nur ein "verstecktes Argument" von Funktionen ist.

Zum Beispiel, wenn Sie sehen,

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

denken, dass gemeinsam OOP-Sprachen (wie Java), die

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

sein würde, wenn Sie var a = b.f(x, y, z); sehen, denken var a = f(b, x, y, z).

Wenn Sie sehen, var a = f(x, y, z); denken var a = f(undefined, x, y, z); (In-Browser-Umgebung, wenn strict mode nicht aktiviert ist, es f(window, x, y, z); ist)

Nun sollte es einfacher sein, zu verstehen, warum this in Ihrem Beispiel verschiedene Dinge in den verschachtelten Bereichen bedeutet.

Answer 4

jQuery verwendet die JavaScript-Funktion apply beim Aufrufen von Ereignishandlern. Aus der mdn-Dokumentation:

Ruft eine Funktion mit einem gegebenen diesen Wert und Argumente als Array zur Verfügung gestellt.