Eine kurze Analyse der JavaScript-Bereichskette, des Ausführungskontexts und der Fähigkeiten von close_javascript

Abschlüsse und Bereichsketten sind relativ wichtige Konzepte in JavaScript. Ich habe in den letzten zwei Tagen einige Informationen gelesen und die relevanten Wissenspunkte unten zusammengefasst.

JavaScript verwendet lexikalisches Scoping. Der Umfang der Variablen, von denen die Funktionsausführung abhängt, wird bestimmt, wenn die Funktion definiert wird, nicht, wenn die Funktion ausgeführt wird. Nehmen Sie das folgende Codefragment als Beispiel: Nach dem Aufruf von foo wird der lokale Variablenbereich innerhalb der Funktion freigegeben, lexikalisch gesehen jedoch der Bereich in der eingebetteten anonymen Funktion foo sollte auf den lokalen Variablenbereich von foo verweisen, und tatsächlich stimmt das laufende Ergebnis des Codes mit dem lexikalischen Ausdruck überein. Nach dem Aufruf von f wird der lokale Gültigkeitsbereich zurückgegeben. Nachdem der Aufruf seiner Hauptfunktion foo beendet ist, behält das Funktionsobjekt f weiterhin den Verweis auf die Bereichsvariable des foo-Funktionskörpers bei. Dies ist der sogenannte Abschluss.

var scope = 'global scope';
function foo() {
var scope = 'local scope';
return function () {
return scope;
}
}
var f = foo();
f(); // 返回 "local scope"

Wie funktionieren Schließungen? Um Abschlüsse zu verstehen, müssen Sie zunächst den Variablenbereich und die Bereichskette verstehen. Ein weiteres wichtiges Konzept ist der Ausführungskontext.

Variabler Umfang

Globale Variablen in JavaScript haben einen globalen Gültigkeitsbereich. Der Gültigkeitsbereich der innerhalb eines Funktionskörpers deklarierten Variablen ist der gesamte Funktionskörper, der natürlich auch innerhalb des Funktionskörpers definierte verschachtelte Funktionen umfasst. Die Priorität lokaler Variablen im Funktionskörper ist höher als die der globalen Variablen. Wenn die lokale Variable und die globale Variable denselben Namen haben, wird die globale Variable in ähnlicher Weise von der lokalen Variablen abgedeckt Die verschachtelte Funktion ist höher als die lokale Variable in der Funktion, in der sich die verschachtelte Funktion befindet. Das ist so offensichtlich, dass es fast jeder versteht.
Lassen Sie uns als Nächstes über etwas sprechen, das vielleicht jedem unbekannt ist.

Funktionsdeklarationsförderung

Verwenden Sie einen Satz, um die Funktionsdeklarationsförderung zu erklären. Dies bedeutet, dass die im Funktionskörper deklarierten Variablen innerhalb der gesamten Funktion gültig sind. Mit anderen Worten: Auch Variablen, die am unteren Ende des Funktionskörpers deklariert sind, werden nach oben befördert. Zum Beispiel:

var scope = 'global scope';
function foo() {
console.log(scope); // 这里不会打印出 "global scope"，而是 "undefined"
var scope = 'local scope'; 
console.log(scope); // 很显然，打印出 "local scope"
}
foo();

Das erste console.log(scope) gibt undefiniert anstelle des globalen Bereichs aus, da die Deklaration der lokalen Variablen heraufgestuft, aber noch kein Wert zugewiesen wurde.

Variablen als Attribute

In JavaScript gibt es drei Möglichkeiten, globale Variablen zu definieren, z. B. globalVal1, globalVal2 und globalValue3 im folgenden Beispielcode. Ein interessantes Phänomen ist, dass globale Variablen tatsächlich nur Eigenschaften des globalen Objekts window/global (window in Browsern, global in node.js) sind. Um mit der Definition von Variablen im üblichen Sinne konsistenter zu sein, entwirft JavaScript mit var definierte globale Variablen in globale Objekteigenschaften, die nicht gelöscht werden können. Es kann über Object.getOwnPropertyDescriptor(this, 'globalVal1') abgerufen werden und seine konfigurierbare Eigenschaft ist falsch.

var globalVal1 = 1; // 不可删除的全局变量
globalVal2 = 2; // 可删除的全局变量
this.globalValue3 = 3; // 同 globalValue2
delete globalVal1; // => false 变量没有被删除
delete globalVal2; // => true 变量被删除
delete this.globalValue3; //=> true 变量被删除

那么问题来了，函数体内定义的局部变量是不是也作为某个对象的属性呢？答案是肯定的。这个对象是跟函数调用相关的，在 ECMAScript 3中称为“call object”、ECMAScript 5中称为“declaravite environment record”的对象。这个特殊的对象对我们来说是一种不可见的内部实现。

作用域链

从上一节我们知道，函数局部变量可与看做是某个不可见的对象的属性。那么 JavaScript 的词法作用域的实现可以这样描述：每一段 JavaScript 代码（全局或函数）都有一个跟它关联的作用域链，它可以是数组或链表结构；作用域链中的每一个元素定义了一组作用域内的变量；当我们要查找变量 x 的值，那么从作用域链的第一个元素中找这个变量，如果没有找到者找链表中的下一个元素中查找，直到找到或抵达链尾。了解作用域链的概念对理解闭包至关重要。

执行上下文

每段 JavaScript 代码的执行都与执行上下文绑定，运行的代码通过执行上下文获可用的变量、函数、数据等信息。全局的执行上下文是唯一的，与全局代码绑定，每执行一个函数都会创建一个执行上下文与其绑定。JavaScript 通过栈的数据结构维护执行上下文，全局执行上下文位于栈底，当执行一个函数的时候，新创建的函数执行上下文将会压入栈中，执行上下文指针指向栈顶，运行的代码即可获得当前执行的函数绑定的执行上下文。如果函数体执行嵌套的函数，也会创建执行上下文并压入栈，指针指向栈顶，当嵌套函数运行结束后，与它绑定的执行上下文被推出栈，指针重新指向函数绑定的执行上下文。同样，函数执行结束，指针会指向全局执行上下文。

执行上下文可以描述成式一个包含变量对象（对应全局）/活动对象（对应函数）、作用域链和 this 的数据结构。当一个函数执行时，活动对象被创建并绑定到执行上下文。活动对象包括函数体内申明的变量、函数、arguments 等。作用域链在上一节以及提到，是按词法作用域构建的。需要注意的是 this 不属于活动对象，在函数执行的那一刻就以及确定。
执行上下文的创建是有特定的次序和阶段的，不同阶段有不同的状态，具体的细节可以看一下参考资料，在结尾部分会列出。

闭包

了解了作用域链和执行上下文，回过头看篇首的那段代码，基本上就可以解释闭包式如何工作了。函数调用的时候创建的执行上下文以及词法作用域链保持函数调用所需要的信息， f 函数调用之后才可以返回local scope。

需要注意的是，函数内定义的多个函数使用的是同一个作用域链，在使用 for 循环赋值匿名函数对象的场景比较容易引起错误，举例如下：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: function() {
return i;
}
};
}
arr[0].func(); // 返回 10，而不是 0

arr[0].func()返回的是 10 而不是 0，跟感官上的语义有偏差。在 ECMAScript 6 引入 let 之前， 变量作用域范围是在整个函数体内而不是在代码区块之内，所以上面的例子中所有定义的 func 函数引用了同一个作用域链在 for 循环之后， i 的值已经变为 10 。

正确的做法是这样：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: getFunc(i)
};
}
function getFunc(i) {
return function() {
return i;
}
}
arr[0].func(); // 返回 0

以上内容给大家介绍了JavaScript作用域链、执行上下文与闭包的相关知识，希望对大家有所帮助。