So funktioniert JavaScript

Dieser Artikel bietet Ihnen eine detaillierte theoretische Analyse der Funktionsprinzipien von JavaScript und den Austausch von Wissenspunkten. Wenn Sie daran interessiert sind, lesen Sie ihn bitte.

JavaScript ist eine objektbasierte dynamische, schwach typisierte Skriptsprache (im Folgenden als JS bezeichnet). Sie ist eine interpretierte Sprache und unterscheidet sich von anderen Programmiersprachen wie Java/C++ und anderen kompilierten Sprachen Sprachen Bevor der Code ausgeführt wird, wird der gesamte Code kompiliert und zunächst in Bytecode (Maschinencode) kompiliert. Dann ausführen. JS muss nicht in Zwischencode kompiliert werden, sondern kann direkt im Browser ausgeführt werden. Der JS-Ausführungsprozess kann in zwei Phasen unterteilt werden: Kompilierung und Ausführung. (Siehe das Buch JS You Don’t Know). Wenn der JS-Controller zu einem Stück ausführbarem Code wechselt (dieser ausführbare Code wird während der Kompilierungsphase generiert), wird der entsprechende Ausführungskontext (EC für kurz). Der Ausführungskontext kann als Ausführungsumgebung verstanden werden (der Ausführungskontext kann nur vom JS-Interpreter erstellt und nur vom JS-Interpreter verwendet werden. Benutzer können das „Objekt“ nicht bedienen).

Die Ausführungsumgebung in JS ist in drei Kategorien unterteilt:

• Globale Umgebung: Wenn die JS-Engine einen Codeblock betritt, falls er darauf stößt Das Tag < ;script>xxx2cacc6d41bbb37262a98f745aa00fbf0 dient zum Aufrufen einer globalen Ausführungsumgebung

• Funktionsumgebung: Wenn eine Funktion aufgerufen wird, wird innerhalb der Funktion eine Funktionsausführungsumgebung gebildet

• eval(): Führen Sie die Zeichenfolge allein als JS-Code aus. Die Verwendung wird nicht empfohlen.

In einem JS-Teil können mehrere Ausführungskontexte generiert werden Code: In JS wird eine Datenstruktur wie ein Stapel verwendet, um den Ausführungskontext zu verwalten. Die Eigenschaften des Stapels sind „First In, Last Out, Last In, First Out“. Diese Art von Stapel wird als Funktionsaufrufstapel bezeichnet .

Eigenschaften des Ausführungskontexts

• Das untere Ende des Stapels ist immer der globale Ausführungskontext, und es gibt nur einen

• globaler Ausführungskontext Der Stapel wird nur angezeigt, wenn der Browser geschlossen ist

• Es gibt keine Begrenzung für die Anzahl anderer Ausführungskontexte

• Die Spitze des Stapels ist immer der aktuell aktive Ausführungskontext, der Rest befindet sich in einem Wartezustand. Sobald die Ausführung abgeschlossen ist, wird der Stapel sofort gelöscht und die Kontrolle wird dann an den nächsten Ausführungskontext zurückgegeben

• Die Funktion wird nur jedes Mal aufgerufen, wenn Sie einen Ausführungskontext dafür erstellen, der bei der Deklaration der Funktion nicht verfügbar war.

Ausführungskontext kann anschaulich als gewöhnliches JS-Objekt verstanden werden. Der Lebenszyklus eines Ausführungskontexts umfasst grob zwei Phasen:

Erstellungsphase

Diese Phase schließt hauptsächlich drei Ereignisse ab: 1. Variablenobjekt erstellen 2. Bereichskette einrichten 3. Bestimmen Sie diesen Punkt

Ausführungsphase

Diese Phase schließt hauptsächlich die Variablenzuweisung, den Funktionsaufruf und andere Operationen ab

Erstellungsprozess des Variablenobjekts (VO)

• 1 Erstellen und initialisieren Sie das Argumentobjekt gemäß den Funktionsparametern und fügen Sie die Attribute „0“ und „1“ hinzu arguments object“, „2“, „3“ und andere Attribute, ihr Anfangswert ist undefiniert und der Wert arguments.length wird auf die tatsächliche Anzahl der übergebenen Parameter gesetzt.

• 2. Suchen Sie die Funktionsdeklaration und fügen Sie Attribute zum Variablenobjekt hinzu. Der Attributname ist der Referenzwert der Funktion eine mit demselben Namen, überschreiben Sie sie direkt

• 3. Suchen Sie nach einer Variablendeklaration (bei der Suche nach einer Variablen entsprechen die Parameter der Funktion der Variablendeklaration, also Das gleiche Attribut wie der Parametername wird ebenfalls zum VO hinzugefügt, und der Anfangswert wird ebenfalls undefiniert hinzugefügt. Fügen Sie dem Variablenobjekt ein Attribut hinzu. Der Attributname ist der Variablenname und der Attributwert ist undefiniert bereits ein Bezeichner mit demselben Namen vorhanden ist, wird dieser nicht verarbeitet.

Wenn ein Bezeichner (Funktion, Variable) mit demselben Namen vorhanden ist, kann die Funktion die Variable überschreiben und die Funktion hat eine höhere Priorität als die Variable

Variablenobjekt (OV) und Aktivierungsobjekt (AO) sind dasselbe, zwei Namen zu unterschiedlichen Zeiten. Es wird während des Erstellungszeitraums als Variablenobjekt und während des Ausführungszeitraums als Aktivierungsobjekt bezeichnet.

Nehmen Sie den folgenden Code als Beispiel

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + '===' + l_name + '===' + num);
 }
}
g_fn(10);

Kompilierungsphase

Wenn der JS-Controller wechselt zu diesem Codeteil. Die Struktur des G_EC

-Ausführungskontexts ist ungefähr wie folgt:

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

Sobald der Ausführungskontext erstellt ist, wird er sofort gepusht Zu diesem Zeitpunkt wird der Interpreter stillschweigend ein internes Attribut [[scope]] zur Funktion in der aktuellen VO hinzufügen, das auf die obige Bereichskette verweist.

g_fn.scope = [ global_EC.VO ] // 该scope属性只能被JS解释器所使用，用户无法使用

Ausführungsphase

Führen Sie den Code Zeile für Zeile aus. Wenn ein Ausdruck gefunden wird, wird nach dem VO-Objekt in der aktuellen Bereichskette gesucht. Wenn es gefunden wird, wird es zurückgegeben Wenn es nicht gefunden wird, wird es zurückgegeben. Anschließend wird weiter nach dem nächsten VO-Objekt gesucht, bis das globale VO-Objekt beendet wird.

Diese Phase kann Variablenzuweisungen, Funktionsaufrufe und andere Operationen enthalten. Wenn der Interpreter auf g_fn() trifft, weiß er, dass es sich um einen Funktionsaufruf handelt, und erstellt dann sofort einen Funktionsausführungskontext dafür, fn_EC, der context fn_EC hat auch zwei Phasen

, nämlich die Erstellungsphase und die Ausführungsphase.

In der Erstellungsphase wird für den Funktionsausführungskontext beim Erstellen des Variablenobjekts ein zusätzliches Argumentobjekt erstellt und dann werden dem Argumentobjekt Attribute hinzugefügt: „0“, „1“, „2“, dessen Anfangswert undefiniert ist,

• Funktionsdeklaration suchen

• Var-Variablendeklaration finden

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

Verwandte Artikel:

Verwendung von Native in React zur Implementierung von Bildanzeigekomponenten

Verwendung von vue-cli kombiniert mit Element-ui im ​​Cropper . Basierend auf js ist vue gekapselt, um die Bildzuschneidekomponentenfunktion zu implementieren

Eine Reihe von Funktionen wie lokale Vorschau, Zuschneiden, Komprimieren und Hochladen von Bildern sind in vue.js implementiert

Das obige ist der detaillierte Inhalt vonSo funktioniert JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!