Illustration dieses Schlüsselworts in JavaScript_Javascript-Tipps-js-Tutorial-php.cn

JavaScript ist eine Skriptsprache, die erweiterte Funktionen wie funktionale Programmierung, Abschlüsse und prototypbasierte Vererbung unterstützt. Der Einstieg in JavaScript scheint auf den ersten Blick einfach zu sein, aber wenn Sie es intensiver nutzen, werden Sie feststellen, dass JavaScript tatsächlich sehr schwer zu beherrschen ist und einige grundlegende Konzepte verwirrend sind. Unter ihnen ist das Schlüsselwort this in JavaScript ein relativ verwirrendes Konzept. In verschiedenen Szenarien wird dies in verschiedene Objekte umgewandelt. Es gibt die Ansicht, dass Sie nur durch die korrekte Beherrschung des Schlüsselworts this in JavaScript den Schwellenwert der JavaScript-Sprache erreichen können. In gängigen objektorientierten Sprachen (wie Java, C# usw.) ist die Bedeutung klar und spezifisch, dh sie zeigt auf das aktuelle Objekt. Normalerweise zur Kompilierungszeit gebunden. In JavaScript wird dies zur Laufzeit gebunden. Dies ist der wesentliche Grund, warum das Schlüsselwort this in JavaScript mehrere Bedeutungen hat.

Aufgrund der Art der JavaScript-Bindung zur Laufzeit kann dies in JavaScript das globale Objekt, das aktuelle Objekt oder ein beliebiges Objekt sein. Es hängt alles davon ab, wie die Funktion aufgerufen wird. Es gibt mehrere Möglichkeiten, Funktionen in JavaScript aufzurufen: als Objektmethode, als Funktion, als Konstruktor und mit apply oder call. Wie das Sprichwort sagt: Worte sind nicht so gut wie Worte und Ausdrücke sind nicht so gut wie Bilder. Um besser zu verstehen, auf welches JavaScript dies verweist? Lassen Sie uns ein Bild zur Erklärung verwenden:

Ich nenne das obige Bild „JavaScript diesen Entscheidungsbaum“ (im nicht strengen Modus). Wie dieses Bild uns dabei helfen kann, dies zu beurteilen, soll im Folgenden anhand eines Beispiels verdeutlicht werden:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 this.x = this.x + x; 
 this.y = this.y + y; 
  } 
 };
 //决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
 //是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
 point.moveTo(1,1); //this 绑定到当前对象,即point对象

Nach dem Login kopieren

Der Entscheidungsprozess der Funktion point.moveTo() in „JavaScript dieser Entscheidungsbaum“ ist wie folgt:

1) Wird die point.moveTo-Funktion mit new aufgerufen? Dies ist offensichtlich nicht der Fall. Gehen Sie zum Zweig „Nein“, d. h. wird die Funktion mit Punkt (.) aufgerufen? ;

2) Die point.moveTo-Funktion wird mit dot(.) aufgerufen, das heißt, sie gelangt in den „Ja“-Zweig, das heißt, dies zeigt hier auf den vorherigen Objektpunkt in point.moveTo;

Das analytische Diagramm, das veranschaulicht, worauf dies in der Funktion point.moveTo hinweist, sieht wie folgt aus:

Ein weiteres Beispiel finden Sie im folgenden Code:

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
 //决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
 x;//x => 5

Nach dem Login kopieren

　Der Prozess, bei dem die Funktion func() Entscheidungen in „

JavaScript diesen Entscheidungsbaum“ trifft, ist wie folgt:

1) Wird die Funktion func(5) mit new aufgerufen? Dies ist offensichtlich nicht der Fall. Gehen Sie zum Zweig „Nein“, d. h. wird die Funktion mit Punkt (.) aufgerufen? ;

2) Die Funktion func(5) wird nicht mit Punkt(.) aufgerufen, das heißt, sie geht in den „Nein“-Zweig, das heißt, dies zeigt hier auf das globale Variablenfenster, dann ist this.x tatsächlich Fenster .x;

Das analytische Diagramm, das veranschaulicht, worauf dies in der Funktion func hinweist, ist wie folgt:

Für den direkten Aufruf als Funktion schauen wir uns ein komplexes Beispiel an:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 // 内部函数
 var moveX = function(x) { 
 this.x = x;//this 指向什么？window
 }; 
 // 内部函数
 var moveY = function(y) { 
 this.y = y;//this 指向什么？window
 }; 
  moveX(x); 
  moveY(y); 
 } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

Nach dem Login kopieren

Die Funktion point.moveTo(1,1) ruft tatsächlich die Funktionen moveX() und moveY() intern auf. Das wird innerhalb der Funktion moveX() im „

JavaScript dieser Entscheidungsbaum“ bestimmt. Der Vorgang ist wie folgt:

1) Wird die Funktion moveX(1) mit new aufgerufen? Dies ist offensichtlich nicht der Fall. Gehen Sie zum Zweig „Nein“, d. h. wird die Funktion mit Punkt (.) aufgerufen? ;

2) Die Funktion moveX(1) wird nicht mit dot(.) aufgerufen, das heißt, sie geht in den „Nein“-Zweig, das heißt, dies zeigt hier auf die globale Variable window, dann ist this.x tatsächlich window .x;

Schauen wir uns ein Beispiel für den Aufruf eines Konstruktors an:

 function Point(x,y){ 
  this.x = x; // this &#63;
  this.y = y; // this &#63;
 }
 var np=new Point(1,1);
 np.x;//1
 var p=Point(2,2);
 p.x;//error, p是一个空对象undefined
 window.x;//2

Nach dem Login kopieren

Der Prozess der Punkt(1,1)-Funktion, der dies in var np=new Point(1,1) im „

JavaScript dieser Entscheidungsbaum“ beurteilt, ist wie folgt:

1) Verwendet der Aufruf von var np=new Point(1,1) new? Dies ist offensichtlich der Eintritt in den „Ja“-Zweig, das heißt, dies zeigt auf np;

2) Dann ist this.x=1, also np.x=1;

Der Prozess der Point(2,2)-Funktion, der dies in var p= Point(2,2) im „

JavaScript dieser Entscheidungsbaum

“ bestimmt, ist wie folgt:

1) Verwendet der Aufruf von var p= Point(2,2) new? Dies ist offensichtlich nicht der Fall. Gehen Sie zum Zweig „Nein“, d. h. wird die Funktion mit Punkt (.) aufgerufen? ;

2) Die Point(2,2)-Funktion wird nicht mit dot(.) aufgerufen? Wenn das Urteil „Nein“ ist, wird in den Zweig „Nein“ eingetreten, das heißt, dies zeigt hier auf das globale Variablenfenster, dann ist this.x tatsächlich window.x;

3) this.x=2 bedeutet window.x=2.

Schauen wir uns abschließend noch ein Beispiel für den Aufruf einer Funktion mit „call“ und „apply“ an:

Der Prozess der Funktion p1.moveTo.apply(p2,[10,10]) in „JavaScript diesen Entscheidungsbaum“ ist wie folgt:

Wir wissen, dass die beiden Methoden apply und call äußerst leistungsfähig sind. Sie ermöglichen das Wechseln des Kontexts der Funktionsausführung, also des daran gebundenen Objekts. p1.moveTo.apply(p2,[10,10]) ist eigentlich p2.moveTo(10,10). Dann kann p2.moveTo(10,10) wie folgt interpretiert werden:

1) Wird die Funktion p2.moveTo(10,10) mit new aufgerufen? Dies ist offensichtlich nicht der Fall. Gehen Sie zum Zweig „Nein“, d. h. wird die Funktion mit Punkt (.) aufgerufen? ;

2) Die Funktion p2.moveTo(10,10) wird mit Punkt(.) aufgerufen, das heißt, sie tritt in den „Ja“-Zweig ein, das heißt, dies zeigt hier auf das vorherige Objekt p2 in p2.moveTo( 10,10), also p2.x=10;

Bezüglich des Prozesses der JavaScript-Funktionsausführungsumgebung gibt es eine sehr gute Beschreibung in der IBM Developerworks-Dokumentenbibliothek. Der Auszug lautet wie folgt:

　„Eine Funktion in JavaScript kann als gewöhnliche Funktion oder als Methode eines Objekts ausgeführt werden. Dies ist der Hauptgrund, warum dies eine so reiche Bedeutung hat. Wenn eine Funktion ausgeführt wird, wird eine Ausführungsumgebung (ExecutionContext) erstellt. Das gesamte Verhalten der Funktion erfolgt in dieser Ausführungsumgebung. Beim Erstellen der Ausführungsumgebung erstellt JavaScript zunächst die Argumentvariable, die beim Aufruf der Funktion übergeben wird Formale Parameterliste der Funktion, der Wert ist der entsprechende Wert in der Argumentvariable, wenn es keinen entsprechenden Wert in der Argumentvariable gibt, wird der Formalparameter auf undefiniert initialisiert. Wenn die Funktion interne Funktionen enthält, werden diese internen Funktionen initialisiert. Wenn nicht, fahren Sie mit der Initialisierung der in dieser Funktion definierten lokalen Variablen fort. Beachten Sie, dass diese Variablen zu diesem Zeitpunkt auf undefiniert initialisiert sind und ihre Zuweisungsvorgänge erst ausgeführt werden, wenn die Funktion nach der Ausführungsumgebung (ExecutionContext) ausgeführt wird ) ist für uns sehr wichtig, um die Rolle von Variablen in JavaScript zu verstehen. Aus Platzgründen werden wir dieser Variablen schließlich keinen Wert zuweisen Wie oben erwähnt, wird es diesem globalen Objekt, dem aktuellen Objekt usw. zugewiesen. Entsprechend der Funktion, die die Methode aufruft (bis zu diesem Punkt), wird ExecutionContext erfolgreich erstellt, die Funktion beginnt zeilenweise auszuführen und die erforderlichen Variablen sind vorhanden aus der zuvor erstellten Ausführungsumgebung (ExecutionContext) lesen ”

Das Verständnis dieses Absatzes wird für das Verständnis der Javascript-Funktionen von großem Nutzen sein.

Das Obige ist eine detaillierte Einführung in das Schlüsselwort „this“ in JavaScript. Im Allgemeinen sind Bilder für jeden leichter zu verstehen als Text. Ich hoffe, dass dieser Artikel für das Lernen aller hilfreich ist.