Ausführliche Einführung in JavaScript: Was genau bedeutet das? (Bilder und Text)

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, doch wenn Sie es intensiver nutzen, werden Sie feststellen, dass JavaScript tatsächlich sehr schwer zu beherrschen ist und einige grundlegende Konzepte verwirrend sind. Das Schlüsselwort this in JavaScript ist ein relativ verwirrendes Konzept. In verschiedenen Szenarien wird dies in unterschiedliche 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 , alles hängt 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? Das Folgende ist ein Bild zur Erklärung:

Ich nenne das obige Bild „JavaScript diesen Entscheidungsbaum“ (im nicht strengen Modus). Das Folgende ist ein Beispiel, um zu veranschaulichen, wie dieses Diagramm uns bei der Beurteilung hilft:

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对象

point.moveTo()-Funktion bestimmt den Prozess in „JavaScript dieser Entscheidungsbaum“ So:

1) Verwendet der Funktionsaufruf point.moveTo new? 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 tritt in den „Ja“-Zweig ein, das heißt, dieser zeigt hier auf den vorherigen Objektpunkt in point.moveTo;

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

Sehen Sie sich als weiteres Beispiel den folgenden Code an:

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

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

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

2) Die Funktion func(5) wird nicht mit Punkt(.) aufgerufen, das heißt, sie tritt in den „Nein“-Zweig ein, das heißt, dies zeigt hier auf das globale Variablenfenster und dann auf dieses. x ist eigentlich window.x ;

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

Für die Methode der Direkten Beim Aufruf als Funktion schauen wir uns ein kompliziertes Beispiel an: Die Funktion

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

point.moveTo(1,1) ruft tatsächlich intern die Funktionen moveX() und moveY() auf. Funktion ist in „JavaScript dieser Entscheidungsbaum. Der Beurteilungsprozess in “ ist wie folgt:

1) Verwendet der Funktionsaufruf moveX(1) new? 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, this hier zeigt auf das globale Variablenfenster, dann this. x ist eigentlich window.x ;

Das Folgende ist ein Beispiel für den Aufruf eines Konstruktors:

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

Point(1,1)-Funktion in var np=new Point(1,1) Dies in „JavaScript dieser Entscheidungsbaum “ Der Prozess der Entscheidungsfindung 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,2)-Funktion Der Prozess zur Bestimmung dieser in var p= Point(2,2) in „

JavaScript dieser Entscheidungsbaum

“ ist wie folgt:

1) var p= Point (2, 2) Wird der Anruf mit new getätigt? 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? Das Urteil ist nein, das heißt, wenn Sie den Zweig „Nein“ eingeben, zeigt dies 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 ein Beispiel für eine Funktion an, die mit call und apply aufgerufen wird:

p1.moveTo.apply(p2,[10, 10]) Die Funktion befindet sich in „

JavaScript Der Entscheidungsprozess in diesem Entscheidungsbaum „

“ ist wie folgt:

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    } 
 } 

var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
p2.x//10

Wir wissen, dass die beiden Methoden „Apply“ und „Call“ äußerst leistungsfähig sind. Sie Ermöglichen Sie das Umschalten des Kontexts der Funktionsausführung, dh dieses durch Bindung bestimmten 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 gelangt in den „Ja“-Zweig, das heißt, dies zeigt hier auf p2.moveTo(10 ,10). Das vorherige Objekt p2, also p2.x=10;

In der IBM Developerworks-Dokumentenbibliothek gibt es eine Beschreibung, die sich sehr gut anfühlt folgt:

„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, erfolgt eine Ausführung.“ Umgebung (ExecutionContext) wird erstellt. Alle Aktionen der Funktion werden in dieser Ausführungsumgebung erstellt. Beim Erstellen dieser Ausführungsumgebung erstellt JavaScript zunächst die Variable arguments, die beim Aufruf der Funktion übergeben wird und initialisiert die Funktion zuerst mit dem entsprechenden Wert in der Variablen arguments. Wenn die Funktion interne Funktionen enthält, wird der formale Parameter initialisiert Wenn nicht, fahren Sie mit der Initialisierung der in der Funktion definierten lokalen Variablen fort. Beachten Sie, dass diese Variablen zu diesem Zeitpunkt auf arguments initialisiert werden und ihre Zuweisungsvorgänge erst ausgeführt werden, wenn die Funktion ausgeführt wird Wird ausgeführt, nachdem die Ausführungsumgebung (ExecutionContext) erfolgreich erstellt wurde. Für uns ist es sehr wichtig, den Variablenbereich zu verstehen. Aus Platzgründen werden wir dieses Thema hier nicht diskutieren Die undefined-Variable wird, abhängig von der Funktionsaufrufmethode, dem aktuellen Objekt usw., wie oben erwähnt, zugewiesen. Zu diesem Zeitpunkt ist die Ausführungsumgebung (ExecutionContext) der Funktion erfolgreich erstellt , und die Funktion beginnt Zeile für Zeile auszuführen, und die erforderlichen Variablen werden aus der zuvor erstellten Ausführungsumgebung (ExecutionContext) gelesen. Das Verständnis dieses Absatzes wird für das Verständnis von Javascript-Funktionen von großem Nutzen sein. undefinedthisthis

Das obige ist der detaillierte Inhalt vonAusführliche Einführung in JavaScript: Was genau bedeutet das? (Bilder und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!