Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendungsbeispiele dieses Objekts in js
Dieses Objekt ist basierend auf der Ausführungsumgebung der Funktion gebunden, wenn die Funktion ausgeführt wird. Dieser Artikel stellt hauptsächlich eine detaillierte Analyse der Verwendung dieses Objekts in js vor. Freunde, die es brauchen, können es lernen und teilen.
Tatsächlich besteht die Essenz dieses Satzes darin, dass wer auch immer die Funktion aufruft, dies auf wen zeigt
Im Einzelnen gibt es normalerweise die folgenden Situationen:
Global Funktion
In der globalen Umgebung zeigt dies auf Fenster
//例子1 function A() { console.log(this) } A();//Window
Das obige Beispiel ist sehr einfach, Funktion A ist in der globalen Umgebung Wird in der Umgebung ausgeführt, dh das globale Objekt Window ruft die Funktion auf. Zu diesem Zeitpunkt zeigt dies auf Window
Objektmethode
Beim Aufruf als Objektmethode zeigt dies auf das Objekt, das die Methode aufgerufen hat
//例子2 var b = { getThis:function(){ console.log(this) } } b.getThis()//b
Die Beispiele, die wir bisher gegeben haben, sind relativ einfach und leicht zu verstehen. Als nächstes kommt ein interessantes:
//例子3 var c = { getFunc:function(){ return function(){ console.log(this) } } } var cFun = c.getFunc() cFun()//Window
Dieses Beispiel ähnelt dem vorherigen: Beim Ausführen von c.getFunc() wird zunächst eine anonyme Funktion zurückgegeben und dann cFun() in der globalen Umgebung aufgerufen , sodass dies zu diesem Zeitpunkt immer noch auf Window verweist.
Was ist, wenn wir hier ein C-Objekt zurückgeben müssen? Wir sagten zu Beginn, dass dieses Objekt bestimmt wird, wenn die Funktion ausgeführt wird. Wenn c.getFunc() ausgeführt wird, zeigt dieses Objekt immer noch auf c, sodass wir dieses nur für das oben Gesagte beibehalten müssen Der Code wurde leicht geändert:
//例子4 var c = { getFunc:function(){ var that = this //在这里保留住this return function(){ console.log(that) } } } var cFun = c.getFunc() cFun()//c
Aus diesem Grund können wir in einigen Codes oft var self = this oder var that = this sehen.
Aufrufen und anwenden
Zu diesem Zeitpunkt zeigt das Objekt „this“ normalerweise auf den in der Funktion angegebenen Wert (beachten Sie, dass es hier normalerweise zwei Wörter gibt). , was in der Prüfung geprüft wird)
Anrufen und bewerben sind Klischees, aber ich werde ihnen eine kurze Einführung geben, für den Fall, dass neue Studenten sie vielleicht noch nicht kennengelernt haben (eigentlich nur, um ein paar Wörter zu erfinden) . Nehmen Sie als Beispiel den Aufruf: Die Syntax lautet wie folgt:
fun.call(thisArg, arg1, arg2, ...)
Wie Sie diese Methode verwenden, sehen Sie sich das folgende Beispiel an:
//例子5 var d = { getThis:function(){ console.log(this) } } var e = { name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~) } d.getThis.call(e)//e
Hier können wir die Bedeutung der Aufruffunktion sehen. Geben Sie nun ein Objekt o1 an, um die Methode eines anderen Objekts o2 aufzurufen. Zu diesem Zeitpunkt zeigt dieses Objekt auf o1
Okay, warum haben wir dann vorher „normal“ gesagt? Denn thisArg kann hier als null und undefiniert angegeben werden. Bitte beachten Sie:
//例子6 var d = { getThis:function(){ console.log(this) } } d.getThis.call(null)//Window d.getThis.call(undefined)//Window
Zu diesem Zeitpunkt zeigt dies auf das globale Objektfenster
Pfeilfunktion
es6 Die Pfeilfunktion in wird jetzt häufiger verwendet, aber eines ist zu beachten:
Das Objekt „this“ im Funktionskörper ist das Objekt, in dem es definiert ist, nicht das Objekt, in dem es verwendet wird.
Tatsächlich ist der grundlegende Grund für diese Situation: Die Pfeilfunktion hat dieses Objekt nicht, daher ist das Dies der Pfeilfunktion das Dies des äußeren Codes
//例子7 var f = { getThis:()=>{ console.log(this) } } f.getThis()//Window
Dieses Beispiel ist im Grunde dasselbe wie das vorherige Beispiel 2, außer dass die gewöhnliche Funktion in eine Pfeilfunktion umgeschrieben wird, aber zu diesem Zeitpunkt zeigt dieses Objekt bereits auf das äußere Fenster.
Da dies möglicherweise nicht leicht zu verstehen ist, schauen wir uns noch ein paar Beispiele an:
//例子8 var g = { getThis:function(){ return function(){console.log(this)} } } var h = { getThis:function(){ return ()=> console.log(this) } } g.getThis()()//Window h.getThis()()//h
In diesem Beispiel steht g's getThis Genau wie im vorherigen Beispiel 3, da die Funktion zu diesem Zeitpunkt in der globalen Umgebung ausgeführt wird, verwendet getThis die Pfeilfunktion, sodass this auf den äußeren Codeblock zeigt zu diesem Zeitpunkt.
Zusammenfassung
Im Allgemeinen zeigt dieses Objekt auf das Objekt, das die Funktion aufruft, und in der globalen Umgebung, wenn die Funktion ausgeführt wird, zeigt dieses Objekt auf Fenster
In Aufruf- und Anwendungsfunktionen zeigt dies auf das angegebene Objekt. Wenn das angegebene Paar undefiniert oder null ist, zeigt dieses Objekt auf Fenster
In Pfeilfunktionen , dieses Objekt entspricht dem äußeren Codeblock this
Verwandte Empfehlungen:
Detaillierte Beispiele für den Unterschied zwischen this und event in js
Analyse der dadurch verursachten Fehler in JS
Umfassende Analyse davon in JavaScript
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendungsbeispiele dieses Objekts in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!