jQuery / JavaScript „this“ Zeiger Verwirrung

StackOverflow https://stackoverflow.com/questions/710542

  •  22-08-2019
  •  | 
  •  

Frage

Das Verhalten von „this“, wenn die Funktion bar genannt wird mir rätselhaft. Siehe unten stehenden Code. Gibt es eine Möglichkeit für „diese“, um eine einfache alte js Objektinstanz zu arrangieren, wenn bar von einem Click-Handler aufgerufen wird, anstatt dass das HTML-Element? 

// 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);
}
War es hilfreich?

Lösung

Willkommen in der Welt von Javascript! : D

Sie haben in den Bereich der Javascript Umfang und Schließung gewandert.

Für die kurze Antwort: 

this.bar()

ist unter den Anwendungsbereich von ausgeführt foo (wie das bezieht sich auf foo ) 

var barf = this.bar;
barf();

wird unter dem globalen Bereich ausgeführt wird.

this.bar im Grunde bedeutet:

führen Sie die Funktion von this.bar hingewiesen, die in den Anwendungsbereich von diese (foo). Wenn Sie this.bar kopiert barf und BARF laufen. Javascript verstanden als von BARF die Funktion darauf laufen, und da es keine das , es läuft gerade in globalen Bereich.

Um dies zu korrigieren, können Sie ändern 

barf();

, um so etwas wie folgt aus: 

barf.apply(this);

Das sagt Javascript den Umfang zu binden das barf, bevor es ausgeführt wird.

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

Für weitere Informationen:

Andere Tipps

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

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/

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

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

Dies liegt daran, das ist immer der Fall, dass die Funktion angebracht ist. Im Fall eines Eventhandler ist es die Klasse, die das Ereignis ausgelöst hat.

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);
}

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
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top