A brief analysis of JavaScript scope chain, execution context and closure_javascript skills

Closures and scope chains are relatively important concepts in JavaScript. I have read some information in the past two days and summarized the relevant knowledge points below.

JavaScript uses lexical scoping. The scope of variables that function execution depends on is determined when the function is defined, not when the function is executed. Take the following code fragment as an example. Generally speaking (stack-based implementation, such as C language) after foo is called, the local variable scope within the function will be released, but lexically speaking, the scope in the embedded anonymous function of foo should refer to is the local variable scope of foo, and in fact the running result of the code is consistent with the lexical expression. After f is called, the local scope is returned. After the call of its main function foo ends, the function object f still maintains a reference to the scope variable of the foo function body. This is the so-called closure.

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

So how do closures work? To understand closures, you first need to understand variable scope and scope chain. Another important concept is execution context.

Variable scope

Global variables in JavaScript have global scope. The scope of variables declared within a function body is the entire function body, which is local. Of course, it also includes nested functions defined within the function body. The priority of local variables in the function body is higher than that of global variables. If the local variable and the global variable have the same name, the global variable will be covered by the local variable; similarly, the priority of local variables defined in the nested function is higher than that of the local variable in the function where the nested function is located. variable. This is so obvious that almost everyone understands it.
Next, let’s talk about something that may be unfamiliar to everyone.

Function declaration promotion

Use one sentence to explain function declaration promotion, which means that the variables declared within the function body are valid within the entire function. In other words, even variables declared at the bottom of the function body will be promoted to the top. For example:

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

The first console.log(scope) will print out undefined instead of global scope, because the declaration of the local variable has been promoted, but has not yet been assigned a value.

Variables as attributes

In JavaScript, there are three ways to define global variables, such as globalVal1, globalVal2 and globalValue3 in the following example code. An interesting phenomenon is that in fact global variables are just properties of the global object window/global (window in browsers, global in node.js). In order to be more consistent with the definition of variables in the usual sense, JavaScript designs global variables defined with var into global object properties that cannot be deleted. It can be obtained through Object.getOwnPropertyDescriptor(this, 'globalVal1'), and its configurable property is 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作用域链、执行上下文与闭包的相关知识，希望对大家有所帮助。