Verwendung davon in Javascript

Im täglichen Studium stoßen wir häufig auf die Verwendung dieses Begriffs.

Möglicherweise sind Sie auf diese JS-Interviewfrage gestoßen:

var obj = {  foo: function(){    console.log(this)
  }
}var bar = obj.foo
obj.foo() // 打印出的 this 是 objbar() // 打印出的 this 是 window

Bitte erklären Sie, warum die Werte der Funktionen in den letzten beiden Zeilen unterschiedlich sind.

——-

Das Verständnis für Anfänger war schon immer vage. Der heutige Artikel wird alles ein für alle Mal erklären.

Und Sie können diese Erklärung nirgendwo anders sehen. Verstehen Sie diesen Artikel, alle Interviewfragen dazu sind nur Beilagen.

Funktionsaufruf

Zuerst müssen wir mit dem Funktionsaufruf beginnen.

Es gibt drei Funktionsaufrufformen in JS (ES5):

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

Im Allgemeinen kennen Anfänger die ersten beiden Formen und denken, dass die ersten beiden Formen „besser“ sind als die dritte Form.

Sobald Sie diesen Artikel lesen, müssen Sie sich daran erinnern, dass die dritte Aufrufform die normale Aufrufform ist:

func.call(context, p1, p2)

Die anderen beiden sind Syntaxzucker und können äquivalent in Aufrufform geändert werden:

func(p1, p2) ist äquivalent zu func.call(undefiniert, p1, p2)obj .child.method(p1 , p2) entspricht obj.child.method.call(obj.child, p1, p2)

Bitte notieren Sie es. (Wir nennen diesen Code unten „Konvertierungscode“, um ihn leichter nachschlagen zu können)

Bisher hat unser Funktionsaufruf nur eine Form:

func.call(context, p1, p2)

Auf diese Weise kann dies erklärt werden

Dies ist der Kontext im obigen Code. So einfach ist das.

Dies ist der Kontext, der übergeben wird, wenn Sie eine Funktion aufrufen. Da Sie nie die Aufrufform „Funktionsaufruf“ verwenden, wissen Sie es nie.

Schauen Sie sich zunächst an, wie Sie dies in func(p1, p2) ermitteln können:

Wenn Sie den folgenden Code schreiben

function func(){ console.log(this)}func()
等价于
function func(){ console.log(this)}func.call(undefined) // 可以简写为 func.call()

Logischerweise sollte das gedruckte this undefiniert sein, richtig? , aber es gibt eine Regel im Browser:

Wenn der von Ihnen übergebene Kontext null oder undefiniert ist, dann ist das Fensterobjekt der Standardkontext (der Standardkontext im strikten Modus ist undefiniert)
Also Das obige Druckergebnis ist Fenster.

Wenn Sie hoffen, dass dies hier kein Fenster ist, ist es ganz einfach:

func.call(obj) // Dann ist dies darin das obj-Objekt

Schauen Sie sich an obj noch einmal. So ermitteln Sie dies von child.method(p1, p2)

var obj = { foo: function(){   console.log(this)
 }
}
obj.foo()

Laut „Konvertierungscode“ konvertieren wir obj.foo() in

obj.foo.call( obj)

Okay, das ist obj. Erledigt.

Zurück zum Thema:

var obj = { foo: function(){   console.log(this)
 }
}var bar = obj.foo

obj.foo() // Konvertieren in obj.foo.call(obj), das ist objbar()// Konvertieren in bar.call() // Da kein Kontext übergeben wird// dies also undefiniert ist// Schließlich gibt Ihnen der Browser ein Standardfensterobjekt

[ ] Syntax

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr0 // 这里面的 this 又是什么呢？

Wir können uns vorstellen, dass arr0 ist arr.0(). Obwohl die Syntax des letzteren falsch ist, entspricht die Form obj.child.method(p1, p2) im Konvertierungscode, sodass Sie problemlos konvertieren können:

arr0
wird als arr.0()
angenommen und dann in arr.0.call(arr)
konvertiert, dann ist das darin arr :)

Zusammenfassung

das ist das Kontext, der beim Aufruf einer Funktion übergeben wird.
Wenn Ihr Funktionsaufrufformular kein Aufrufformular ist, befolgen Sie bitte den „Konvertierungscode“, um es in ein Aufrufformular zu konvertieren.

Zukünftig werden Sie bei allen diesbezüglichen schriftlichen Prüfungsfragen keine Zweifel mehr haben.

Dieser Artikel enthält eine entsprechende Erklärung dazu. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über Mathematik, Arrays, Dat

HTML5/CSS3-bezogene Wissenserklärunge

Zusammenfassung gängiger APIs, die von Javascript zum Betrieb von DOM verwendet werden

Das obige ist der detaillierte Inhalt vonVerwendung davon in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!