Beispiel für die Verwendung der JavaScript-Bereichskette (Scope Chain): Analyse

In diesem Artikel wird die Verwendung der JavaScript-Bereichskette (Scope Chain) anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe schon lange von der Scope-Kette von js gehört und mehrere einführende Blogbeiträge gelesen, aber mein Verständnis war immer unklar. Kürzlich habe ich das Buch „Understanding Javascript“ sorgfältig gelesen und hatte das Gefühl, dass es sehr tiefgreifend geschrieben ist. Im Abschnitt „Raum und Zeit des Codes“ gibt es einen Abschnitt, der die Bereichskette mit nur wenigen Worten einführt, was mich zurücklässt endloser Nachgeschmack (eigentlich verstehe ich es immer noch. Mehrdeutig^_^). Ordnen Sie nun Ihre Lesenotizen, greifen Sie auf Online-Ressourcen zurück und schreiben Sie sie auf.

1. Beginnen wir mit einer einfachen Frage

Welche Ergebnisse werden angezeigt, wenn der folgende js-Code auf der Seite ausgeführt wird:

var arg = 1;
function fucTest(arg) {
  alert(arg);
  var arg = 2;
  //alert(arg);
}
fucTest(10);

Nach dem Login kopieren

Was ist Ihre Antwort? Das ist richtig, 10 erscheint. Meines Wissens nach hat die funTest-Funktion einen formalen Parameter arg, die funTest-Funktion übergibt den tatsächlichen Parameter 10 und die Alert-Methode gibt einfach 10 aus, was peinlich ist.
Okay, hier kommt wieder die Frage:

var arg = 1;
function funcTest() {
  alert(arg);
  var arg = 2;
}
arg = 10;
funcTest();

Nach dem Login kopieren

Was ist die Antwort? Wenn ich es vor 5 Jahren wäre, würde ich definitiv nicht weiter darüber nachdenken, es wären immer noch 10! Warum sollten Sie über eine so einfache Frage nachdenken? Nach meinem Verständnis ist die funTest-Funktion eine parameterlose Funktion. Die externe (globale) Variable arg wird über die Alert-Methode aufgerufen. Vor der Ausführung der Funktion wird arg der Wert 10 zugewiesen herausgesprungen ist, wird der arg-Wert auf 2 geändert, sodass der Popup-Wert 10 ist.

Ist es wirklich 10? Ja oder nein?

Testergebnis: „undefiniert“ erscheint, Wasserfallschweiß.

2. Verstehen Sie die Bereichskette, beginnend mit dem JavaScript-Betriebsmechanismus

1. Die laufende Sequenz von js

Wenn ein Dokumentfluss mehrere Skriptcodesegmente enthält (durch Skript-Tags getrennter JS-Code oder eingeführte JS-Dateien), lautet ihre Reihenfolge:

Schritt 1. Lesen Sie das erste Codesegment (die js-Ausführungs-Engine führt das Programm nicht Zeile für Zeile aus, sondern analysiert und führt es Stück für Stück aus)
Schritt 2. Führen Sie eine Syntaxanalyse durch. Wenn Fehler vorliegen, wird ein Syntaxfehler gemeldet (z. B. nicht übereinstimmende Klammern usw.) und mit Schritt 5 fortfahren
Schritt 3. Führen Sie eine „Vorabanalyse“ der Variablen- und Funktionsdefinitionen von var durch (es werden niemals Fehler gemeldet, da nur korrekte Deklarationen analysiert werden)
Schritt 4. Führen Sie das Codesegment aus und melden Sie einen Fehler, wenn ein Fehler vorliegt (z. B. wenn die Variable undefiniert ist)
Schritt 5. Wenn ein weiteres Codesegment vorhanden ist, lesen Sie das nächste Codesegment und wiederholen Sie Schritt 2
Schritt 6. Ende

Die obige Analyse ist klar genug. Die roten Schriftarten in den Schritten 2, 3 und 4 können für uns Anfänger ein blinder Fleck sein, insbesondere das „Vorparsen“ in Schritt 3. Wenn Sie nicht wissen, was Pre -Parsing ist, ich fühle mich immer unwohl. Auch der vierte Schritt „Fehler melden, wenn ein Fehler vorliegt“ kommt häufig vor. Zum Beispiel:

function funcTest() {
  alert(arg);
  var arg = 2;
}
funcTest();

Nach dem Login kopieren

上面这段代码执行时，弹出“undefined”，也就是说arg没有定义，js的变量不是不用定义也可以吗？

2、语法分析和“预解析”

（1）、从解释型语言的编译过程说起

众所周知，javascript是解释型语言，它不同于c#和java等编译型语言。对于传统编译型语言来说，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成；但对于解释型语言来说，通过词法分析和语法分析得到语法树后，就可以开始解释执行了。

a、词法分析

简单地说，词法分析是将字符流(char stream)转换为记号流(token stream)。
但是这个转换过程并不是可以用一句话就可以概括的那么简单，我们可以试着用伪代码理解一段简单的程序：

代码var result=x-y;的转换大致可以表示如下：

NAME "result"
EQUALS
NAME "x"
MINUS
NAME "y"
SEMICOLON

b、语法分析

简单地说，语法分析就是为了构造合法的语法分析树，而语法分析树可以直观地表示出推导的过程。

那么什么是语法分析树？简单地说，就是程序推导过程的描述。但是到底什么是语法树，请参考专业文章，本篇略过。

c、其他

通过语法分析，构造出语法分析树后，接下来还可能需要进一步的语义检查。对于传统强类型语言来说，语义检查的主要部分是类型检查，比如函数的实参和形参类型是否匹配等等。
结论：通过上面的分析可以看出，对于javascript引擎来说，肯定有词法分析和语法分析，之后可能还有语义检查、代码优化等步骤，等这些编译步骤完成之后（任何语言都有编译过程，只是解释型语言没有编译成二进制代码），才会开始执行代码。

（2）、执行过程

a、javascript的作用域机制

通过编译，javascript代码已经翻译成了语法树，然后会立刻按照语法树执行。

进一步的执行过程，需要理解javascript的作用域机制：词法作用域（lexcical scope）。通俗地讲，就是javascript变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，编译器通过静态分析就能确定，因此词法作用域也叫做静态作用域（static scope）。但需要注意，with和eval的语义无法仅通过静态技术实现，所以只能说javascript的作用域机制非常接近词法作用域（lexical scope）.

javascript引擎在执行每个函数实例时，都会创建一个执行环境（execution context）。执行环境中包含一个调用对象（call object）, 调用对象是一个scriptObject结构（scriptObject是与函数相关的一套静态系统，与函数实例的生命周期保持一致），用来保存内部变量表varDecls、内嵌函数表funDecls、父级引用列表upvalue等语法分析结构（注意varDecls和funDecls等信息是在语法分析阶段就已经得到，并保存在语法树中。函数实例执行时，会将这些信息从语法树复制到scriptObject上）。

b、javascript作用域机制的实现方法

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

现在回过头来分析第二个问题：

var arg = 1;
function funcTest() {
  alert(arg);
  var arg = 2;
}
arg = 10;
funcTest();

Nach dem Login kopieren

在执行funcTest函数时，也即进入了funcTest对应的作用域，js引擎在执行时，当遇到对变量名或者函数名的使用时，会首先在当前作用域（也即funcTest对应的作用域）查找变量或者函数（显然，arg变量在funcTest对应的作用域里被定义为var arg=2 所以alert方法的参数采用的是当前作用域的arg，但是因为arg被定义在alert方法后，所以arg变量默认值为undefined）。当然，如果没有找到就到上层作用域查找，依此类推（作用域范围可以持续到javascript运行环境的根：window对象）。

最后，让你看的更清楚，上面的代码其实可以等价于：

var arg = 1;
function funcTest() {
  var arg; //默认值undefined
  alert(arg);
  arg = 2;
}
arg = 10;
funcTest();

Nach dem Login kopieren

c, Schließung

Wenn eine Funktionsinstanz ausgeführt wird, wird ein Abschluss erstellt oder mit ihr verknüpft. (Über Schließungen habe ich vor, eine weitere Studiennotiz zu schreiben)

scriptObject wird verwendet, um funktionsbezogene Variablentabellen statisch zu speichern, und Schließungen speichern diese Variablentabellen und ihre laufenden Werte während der Ausführung dynamisch

Der Lebenszyklus eines Abschlusses kann länger sein als der einer Funktionsinstanz. Die Funktionsinstanz wird automatisch zerstört, nachdem die aktive Referenz leer ist

Der Abschluss wird von der JavaScript-Engine recycelt, nachdem die Datenreferenz leer ist (in einigen Fällen wird er nicht automatisch recycelt, was zu einem Speicherverlust führt).

ps: Dieser Abschnitt über „Ausführungsprozess“ ist etwas schwierig auszusprechen. Es gibt viele Substantive, aber lassen Sie sich von ihnen nicht einschüchtern Kette und Verschluss können viele Phänomene in JavaScript leicht lösen.

3. Fazit

Vergleichen Sie die Analyse des zweiten Absatzes mit dem Urteil des Autors im ersten Absatz (Glauben Sie auch, dass die vorherige Analyse und die Schlussfolgerungen des Autors naiv sind (auch wenn die Ergebnisse manchmal richtig sind!) ?! Es ist nicht oberflächlich, ^_^), Sie werden feststellen, dass es in JavaScript so viele „Geheimnisse“ gibt, aber es ist nicht einfach, es wirklich zu verstehen und zu meistern? Lasst es uns zuerst „verstehen“ und dann darüber reden.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.