Beispielcode-Analyse für den JavaScript-Ausführungsmechanismus

Analyse des Beispielcodes für den JavaScript-Laufmechanismus

Beginnen wir mit einer einfachen Frage:

<script type="text/javascript">     
alert(i);   
var i = 1;     
</script>

Die Das Ausgabeergebnis ist undefiniert. Dieses Phänomen wird als „Voranalyse“ bezeichnet: Die JavaScript-Engine analysiert zuerst Variablenvariablen und Funktionsdefinitionen. Der Code wird erst ausgeführt, wenn die Voranalyse abgeschlossen ist. Wenn ein Dokumentstrom mehrere Skriptcodesegmente enthält (durch Skript-Tags getrennter JS-Code oder importierte JS-Dateien), lautet die Reihenfolge:

Lesen Sie den ersten Codeabschnitt

Schritt2 . Wenn ein Fehler auftritt, wird ein Syntaxfehler gemeldet (z. B. nicht übereinstimmende Klammern usw.) und mit Schritt 5 fortfahren. Führen Sie eine „Vorabanalyse“ der Variablen- und Funktionsdefinitionen durch (Nr Fehler werden jemals gemeldet.) Ja, da nur korrekte Deklarationen analysiert werden Ist ein weiteres Codesegment, lesen Sie das nächste Codesegment und wiederholen Sie Schritt 2

Schritt 6

Die obige Analyse kann bereits viele Probleme erklären, aber ich habe immer das Gefühl, dass etwas fehlt. Was genau ist beispielsweise in Schritt 3 „Vorparsen“? Schauen Sie sich in Schritt 4 das folgende Beispiel an:


Warum verursacht der erste Satz einen Fehler? Müssen Variablen in JavaScript nicht undefiniert sein?

Zusammenstellungsprozess

<script type="text/javascript">     
alert(i); // error: i is not defined.     
i = 1;     
</script>

Die Zeit vergeht wie im Flug. Neben dem Bücherregal öffne ich „Grundsätze der Zusammenstellung“, als wäre es eine Welt entfernt noch ungewohntes Leerzeichen:

Bei traditionell kompilierten Sprachen sind die Kompilierungsschritte unterteilt in: lexikalische Analyse, Syntaxanalyse, semantische Prüfung, Codeoptimierung und Bytegenerierung.

Aber bei interpretierten Sprachen kann die Interpretation und Ausführung beginnen, nachdem der Syntaxbaum durch lexikalische Analyse und Syntaxanalyse erhalten wurde.

Einfach ausgedrückt besteht die lexikalische Analyse darin, einen Zeichenstrom (Char-Strom) in einen Token-Strom (Token-Strom) umzuwandeln, z. B. die Umwandlung von c = a – b in:

Oben Dies ist nur ein Beispiel. Weitere Informationen finden Sie unter Lexikalische Analyse.

Kapitel 2 von „The Definitive Guide to JavaScript“ befasst sich mit der lexikalischen Struktur, die auch in ECMA-262 beschrieben wird. Die lexikalische Struktur ist die Grundlage einer Sprache und leicht zu beherrschen. Die Umsetzung der lexikalischen Analyse ist ein weiteres Forschungsgebiet und wird hier nicht untersucht.

NAME "c" 
EQUALS  
NAME "a" 
MINUS  
NAME "b" 
SEMICOLON

Sie können die Analogie der natürlichen Sprache verwenden, bei der es sich um eine Eins-zu-eins-Übersetzung aus dem Englischen handelt, die Wort für Wort ins Chinesische übersetzt wird Token-Streams, was schwer zu verstehen ist. Eine weitere Übersetzung erfordert eine grammatikalische Analyse. Die folgende Abbildung ist ein Syntaxbaum einer bedingten Anweisung:

Wenn beim Erstellen des Syntaxbaums festgestellt wird, dass er nicht erstellt werden kann, z. B. if(a { i = 2; } wird ein Syntaxfehler gemeldet und die Analyse des gesamten Codeblocks beendet.

Nach dem Erstellen eines Syntaxbaums durch Syntaxanalyse sind die übersetzten Sätze möglicherweise noch vorhanden Als nächstes ist eine weitere semantische Prüfung erforderlich. Bei herkömmlichen, stark typisierten Sprachen besteht der Hauptteil der semantischen Prüfung darin, ob die tatsächlichen Parameter und die formalen Parametertypen der Funktion übereinstimmen verfügbar sein (Ich habe nur begrenzte Energie und keine Zeit, mir die Implementierung der JS-Engine anzusehen. Ich bin nicht sicher, ob es einen semantischen Prüfschritt in der JS-Engine gibt.

Dies ist aus dem ersichtlich Die obige Analyse zeigt, dass für die JavaScript-Engine eine lexikalische Analyse und eine Syntaxanalyse erforderlich sind, gefolgt von Schritten wie semantischer Überprüfung und Codeoptimierung (jede Sprache verfügt über einen Kompilierungsprozess, interpretierte Sprachen jedoch nicht). in Binärcode kompiliert), beginnt die Codeausführung

. Der obige Kompilierungsprozess kann das „Vorparsen“ am Anfang des Artikels noch nicht genauer erklären Der JavaScript-Code

Ausführungsprozess

Wochen hat Aimin im zweiten Teil von „The Essence of JavaScript Language and Programming Practice“ eine sehr sorgfältige Analyse durchgeführt.

Durch die Kompilierung wurde der JavaScript-Code in einen Syntaxbaum übersetzt und wird dann sofort gemäß dem Syntaxbaum ausgeführt.

Für die weitere Ausführung müssen Sie den Umfangsmechanismus verstehen von JavaScript. Laienhaft ausgedrückt wird der Umfang von JavaScript-Variablen zum Zeitpunkt der Ausführung und nicht zum Zeitpunkt der Ausführung bestimmt, was bedeutet, dass der lexikalische Umfang vom Quellcode abhängt Der Compiler wird daher auch als statischer Bereich (statischer Bereich) bezeichnet. Dies kann jedoch nicht nur durch statische Technologie erreicht werden Es sei nur gesagt, dass der Umfangsmechanismus von JS dem lexikalischen Umfang sehr nahe kommt.

Die JS-Engine erstellt einen Ausführungskontext, wenn sie jede Funktionsinstanz ausführt. Der Kontext enthält ein Aufrufobjekt. Dies wird zum Speichern der internen Variablentabelle varDecls, der eingebetteten Funktionstabelle funDecls, der übergeordneten Referenzliste upvalue und anderer Syntaxanalysestrukturen verwendet (Hinweis: varDecls und funDecls sowie andere Informationen werden während der Syntaxanalysephase abgerufen und in gespeichert Syntaxbaum. Wenn die Funktionsinstanz ausgeführt wird, werden diese Informationen vom Syntaxbaum in das scriptObject kopiert. scriptObject ist eine Reihe statischer Systeme, die sich auf Funktionen beziehen und mit dem Lebenszyklus von Funktionsinstanzen konsistent sind.

lexical scope是JS的作用域机制，还需要理解它的实现方法，这就是作用域链（scope chain）。scope chain是一个name lookup机制，首先在当前执行环境的scriptObject中寻找，没找到，则顺着upvalue到父级scriptObject中寻找，一直 lookup到全局调用对象（global object）。

当一个函数实例执行时，会创建或关联到一个闭包（closure）。 scriptObject用来静态保存与函数相关的变量表，closure则在执行期动态保存这些变量表及其运行值。closure的生命周期有可能比函数实例长。函数实例在活动引用为空后会自动销毁，closure则要等要数据引用为空后，由JS引擎回收（有些情况下不会自动回收，就导致了内存泄漏）。

别被上面的一堆名词吓住，一旦理解了执行环境、调用对象、闭包、词法作用域、作用域链这些概念，JS语言的很多现象都能迎刃而解。

小结

至此，对于文章开头部分的疑问，可以解释得很清楚了：

step3中所谓的“预解析”，其实是在step2的语法分析阶段完成，并存储在语法树中。当执行到函数实例时，会将varDelcs和funcDecls从语法树中复制到执行环境的scriptObject上。

step4中，未定义变量意味着在scriptObject的变量表中找不到，JS引擎会沿着scriptObject的upvalue往上寻找，如果都没找到，对于写操作i = 1; 最后就会等价为 window.i = 1; 给window对象新增了一个属性。对于读操作，如果一直追溯到全局执行环境的scriptObject上都找不到，就会产生运行期错误。

理解后，雾散花开，天空一片晴朗。

最后，留个问题给大家：

<script type="text/javascript">     
var arg = 1;     
function foo(arg) {     
alert(arg);     
var arg = 2;     
}     
foo(3);     
</script>

请问alert的输出是什么？

Das obige ist der detaillierte Inhalt vonBeispielcode-Analyse für den JavaScript-Ausführungsmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!