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!