Une brève analyse de la chaîne de portée JavaScript, du contexte d'exécution et des compétences de Closure_Javascript

Les fermetures et les chaînes de portée sont des concepts relativement importants en JavaScript. J'ai lu quelques informations au cours des deux derniers jours et j'ai résumé les points de connaissances pertinents ci-dessous.

JavaScript utilise la portée lexicale. La portée des variables dont dépend l'exécution de la fonction est déterminée lorsque la fonction est définie, et non lorsque la fonction est exécutée. Prenons le fragment de code suivant comme exemple. De manière générale (implémentation basée sur la pile, comme le langage C), après l'appel de foo, la portée de la variable locale dans la fonction sera publiée, mais d'un point de vue lexical, la portée dans la fonction anonyme intégrée de foo doit faire référence à la portée de la variable locale de foo, et en fait, le résultat de l'exécution du code est cohérent avec l'expression lexicale. Après l'appel de f, il renvoie la portée locale. Une fois l'appel de sa fonction principale foo terminé, l'objet fonction f conserve toujours la référence à la variable scope du corps de la fonction foo. C'est ce qu'on appelle la fermeture.

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

Alors, comment fonctionnent les fermetures ? Pour comprendre les fermetures, vous devez d'abord comprendre la portée des variables et la chaîne de portée. Un autre concept important est le contexte d'exécution.

Portée variable

Les variables globales en JavaScript ont une portée globale. La portée des variables déclarées dans le corps d'une fonction est l'ensemble du corps de la fonction, qui est bien sûr également local. La priorité des variables locales dans le corps de la fonction est supérieure à celle des variables globales. Si la variable locale et la variable globale ont le même nom, la variable globale sera couverte par la variable locale de la même manière, la priorité des variables locales définie dans. la fonction imbriquée est supérieure à celle de la variable locale dans la fonction où se trouve la variable de fonction imbriquée. C’est tellement évident que presque tout le monde le comprend.
Parlons ensuite de quelque chose qui n’est peut-être pas familier à tout le monde.

Promotion de la déclaration de fonction

Utilisez une phrase pour expliquer la promotion de la déclaration de fonction, ce qui signifie que les variables déclarées dans le corps de la fonction sont valides dans l'ensemble de la fonction. En d’autres termes, même les variables déclarées en bas du corps de la fonction seront promues en haut. Par exemple :

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

Le premier console.log(scope) affichera une portée non définie au lieu de la portée globale, car la déclaration de la variable locale a été promue, mais n'a pas encore reçu de valeur.

Variables comme attributs

En JavaScript, il existe trois façons de définir des variables globales, telles que globalVal1, globalVal2 et globalValue3 dans l'exemple de code suivant. Un phénomène intéressant est qu'en fait les variables globales ne sont que des propriétés de l'objet global window/global (window dans les navigateurs, global dans node.js). Afin d'être plus cohérent avec la définition des variables au sens habituel, JavaScript conçoit les variables globales définies avec var dans des propriétés d'objet globales qui ne peuvent pas être supprimées. Il peut être obtenu via Object.getOwnPropertyDescriptor(this, 'globalVal1'), et sa propriété configurable est false.

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作用域链、执行上下文与闭包的相关知识，希望对大家有所帮助。