Detaillierte Einführung in die Verwendung dieses Objekts in js

In diesem Artikel wird hauptsächlich die detaillierte Analyse der Verwendung dieses Objekts in js vorgestellt. Freunde, die es benötigen, können es lernen und teilen.

Dieses Objekt ist basierend auf der Ausführungsumgebung der Funktion gebunden, wenn die Funktion ausgeführt wird.

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 Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

Das obige Beispiel ist sehr einfach, Funktion A wird in der globalen Umgebung ausgeführt, das heißt, das globale Objekt wird von Window aufgerufen die Funktion. Zu diesem Zeitpunkt zeigt dies auf das Fenster

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

Hier geben wir das Beispiel. Die Beispiele sind relativ einfach und leicht zu verstehen:

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

Dieses Beispiel unterscheidet sich vom vorherigen Wir werden cFun zugewiesen 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 „this“ (beachten Sie, dass hier normalerweise zwei Wörter vorhanden sind). in der Prüfung geprüft werden)

Anrufen und bewerben sind Klischees, aber ich gebe Ihnen eine kurze Einführung für den Fall, dass neue Studenten sie vielleicht noch nicht kennengelernt haben (eigentlich nur, um die Wortzahl auszugleichen). call als Beispiel, die Syntax lautet wie folgt

fun.call(thisArg, arg1, arg2, ...)

So verwenden Sie diese Methode Schauen 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: specifisch an Objekt o1 ruft die Methode eines anderen Objekts o2 auf. Zu diesem Zeitpunkt zeigt dieses Objekt auf o1

Okay, warum haben wir dann vorher normalerweise gesagt? Denn thisArg kann hier als null und undefiniert angegeben werden. Bitte sehen Sie:

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

Dies zeigt zu diesem Zeitpunkt auf das globale Objektfenster

Pfeilfunktion

Die Pfeilfunktion in es6 wird auch 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 die Hauptursache dieser 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 im vorherigen Beispiel 2, schreiben Sie einfach die gewöhnliche Funktion in eine Pfeilfunktion um, 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 wird g's getThis genauso geschrieben wie im vorherigen Beispiel 3. Da die Funktion befindet sich in der globalen Umgebung. Dies zeigt also zu diesem Zeitpunkt auf Window. h's getThis verwendet die Pfeilfunktion, sodass this auf den äußeren Codeblock zeigt. Daher zeigt this zu diesem Zeitpunkt auf h.

Zusammenfassung

Im Allgemeinen zeigt dieses Objekt auf das Objekt der aufrufenden Funktion. Wenn die Funktion in der globalen Umgebung ausgeführt wird, zeigt dieses Objekt auf das Fenster

In den Aufruf- und Anwendungsfunktionen zeigt dies auf das angegebene Objekt. Wenn das angegebene Paar undefiniert oder null ist, zeigt dieses Objekt auf Window

In der Pfeilfunktion entspricht dieses Objekt Dies

des äußeren Codeblocks und dann endet es jedes Mal gleich. Wenn es Fehler im Inhalt gibt, weisen Sie bitte darauf hin. Wenn es für Sie hilfreich ist, liken Sie es bitte und speichern Sie es Ihnen für die Unterstützung von Script House.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie express+multer die Bild-Upload-Funktion implementiert

So implementieren Sie Tabellenüberschriften und die Fixierung der ersten Spalte in Vue

So verwenden Sie die Bildanmerkungskomponente in jquery.picsign

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung dieses Objekts in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!