jQuery/JavaScript "dieses" Zeiger Verwirrung

Question

Das Verhalten von "dies", wenn Funktion bar heißt, ist verwirrend mich. Siehe den folgenden Code. Gibt es eine Möglichkeit zu arrangieren, dass "dies" eine einfache alte js-Objektinstanz ist, wenn der Balken von einem Klick-Handler aufgerufen wird, anstatt das html-Element zu sein?

// a class with a method 

function foo() { 

    this.bar(); // when called here, "this" is the foo instance 

    var barf = this.bar; 
    barf(); // when called here, "this" is the global object 

    // when called from a click, "this" is the html element 
    $("#thing").after($("<div>click me</div>").click(barf)); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 1

Willkommen in der Welt von Javascript! : D

Sie sind in den Bereich von Javascript Scope und Schließung gewandert.

Für die kurze Antwort:

this.bar() 

unter den Anwendungsbereich von foo, ausgeführt (als diese-foo bezieht sich)

var barf = this.bar; 
barf(); 

unter der ausgeführt globaler Geltungsbereich.

this.bar im Grunde bedeutet:

die Funktion durch this.bar, die in den Anwendungsbereich dieser (foo) spitz ausgeführt werden. Wenn Sie this.bar in barf kopieren und barf ausführen. Javascript verstanden als, führen Sie die Funktion von Barf, und da es keine dieser, läuft es nur im globalen Bereich.

Um dies zu korrigieren, Sie

barf(); 

zu so etwas wie dies ändern:

barf.apply(this); 

Dies teilt Javascript es vor der Ausführung des Umfangs von diese barf zu binden.

Für jquery-Ereignisse müssen Sie eine anonyme Funktion verwenden oder die Bind-Funktion im Prototyp erweitern, um das Scoping zu unterstützen.

Für weitere Informationen:

• Good explanation on scoping
• Extending jQuery bind to supportscoping

Answer 2

Dies liegt daran, diese ist immer der Fall, dass die Funktion gebunden ist. Im Fall eines EventHandlers hat die Klasse das Ereignis ausgelöst.

Sie können Sie sich selbst mit einer anonymen Funktion wie diese helfen:

function foo() { 
    var obj = this; 
    $("#thing").after($("<div>click me</div>").click(function(){obj.bar();})); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 3

Sie Function.apply auf die Funktion verwenden können, um festzulegen, was this beziehen soll:

$("#thing").after($("<div>click me</div>").click(function() { 
    barf.apply(document); // now this refers to the document 
}); 

Answer 4

Es gibt eine gute Erklärung auf this Schlüsselwort in JavaScript in QuirksMode verfügbar.

Answer 5

Sie könnten diese finden:

Controlling the value of 'this' in a jQuery event

oder dies:

http://www.learningjquery.com/2007/08/what-is-this

Nützliche.

Answer 6

Holen Sie sich das Buch: JavaScript: die guten Teile.

Lesen Sie auch so viel wie möglich von Douglas Crockford http://www.crockford.com/javascript/

Answer 7

this.bar(); // when called here, "this" is the foo instance 

dieser Kommentar ist falsch, wenn foo als eine normale Funktion verwendet wird, nicht als Konstrukteur. hier:

foo();//this stands for window