【js作用域链】

作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。
因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。
注意：作用域嵌套，不是嵌套作用域
也就是变量的访问机制。

---

自由变量

在某个作用域中使用，但不是在该作用域中声明的变量就是自由变量。

<script>
	var a = 1;
	function f1(){
    	console.log(a); // 1
	}
	f1();
</script>

上面的代码中，a 变量就是一个自由变量。
也可以这样理解：凡是跨了自己的作用域的变量都叫自由变量。

---

词法作用域（lexical environment）

词法作用域：是指在作用域只和源代码有关，也就是说，在代码编写完毕后，变量的作用域已经确定。
因此也叫做静态作用域。

动态作用域：动态作用域是在运行时根据程序的流程信息来动态确定的，而不是在写代码时进行静态确定的。
动态作用域并不关心函数和作用域是如何声明以及在何处声明的，只关心它们在何处调用。

<script>
	var value = 1;
	
	function foo() {
		console.log(value);
	};
	
	function bar() {
		var value = 2;
		// 调用foo函数
 		foo();
	}
	
	bar();  // 结果是 ???
</script>

针对上面的代码，我们可以这样分析：
假设JavaScript采用静态作用域，那么执行过程：

执行 foo 函数，先从 foo 函数局部作用域中查找是否有变量 value，
如果没有，就沿着作用域链向上从全局作用域中查找变量value的值，所以结果会打印 1。

假设JavaScript采用动态作用域，让我们分析下执行过程：

执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。
如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。

从执行结果我们可以看出，JavaScript使用的是静态作用域，也就是说，代码写完，代码中的各个变量的作用域已经定了。

---

作用域链

作用域链其实是一个包含指针的列表，每个指针分别指向一个变量对象，但物理上并不会包含相应的对象。
只对函数有效。
对于一个函数而言，它可以在全局中定义着，也可以定义到另一个函数内部。

<script>
	// 定义在全局中的函数
	function aaa () {
		
		// 定义在一个函数内部的函数
		function bbb() {}
	}
</script>

我们前面知道，
只要 JS 代码运行，就会创建一个 全局执行上下文。
如果一个函数被调用，则会为该函数创建一个 函数执行上下文。
还知道，
JS 使用的是词法作用域(静态作用域)，对于一个函数来说，只要创建函数，那么它的变量查找规则就已经定了。

那么，这个查找规则底层是怎么运行的呢？
其实呢，JS 中的每一个函数都有一个内部私有属性 [[scope]]，它是一个指针列表，
每个指针分别指向一个变量对象，这个属性的值记录的就是作用域链。

当函数创建的时候，[[scope]] 中就记录着它所在的执行环境中的作用域链。
（注意：确定作用域链的时候，和该函数定义的位置有关，和调用的位置无关。）

当函数被执行的时候，自己的执行上下文和变量对象也会被创建，此时它会将自己的变量对象的引用置于作用域链的最顶端。

比如，我在全局作用域下编写如下代码。

<script>
	var G1 = '全局变量';
	function F1 () {};
</script>

这段代码执行的时候，会创建一个全局执行上下文，
为了保存该执行上下文的变量和函数声明，也会创建一个变量对象window，
我们可以看到，在这个变量对象中，创建了函数 F1，
此时 F1 的 [[scope]] 属性值列表中，就放着对 window 对象的引用。

画图便于抽象的理解，它的 [[scope]] 属性，大致是这样的。
F1.[[scope]] = [ window ]

我们继续看代码：

<script>
	var G1 = '全局变量';
	function F1 () {
		var  A1 = 'F1函数的变量';

		function F2 () {
			var A2 = 'F2函数的变量'
		}
	};
	F1();
</script>

上面的代码，在调用 F1 函数的时候，会创建一个 F1 的执行上下文，其中会保存它的变量对象，
在这个变量对象中，记录着 A1 变量 和 F2 函数。
同时它会将自己的变量对象的引用放入到作用域链列表中最顶端。
此时它的作用域链大致是这样的。
F1.[[scope]] = [ F1.VO, window ]

当然了，执行 F1 函数的时候，其实其内部也创建了变量 A1 和 函数 F2，
对于 F2 来说，没调用的的时候，它的 [[scope]] 中会复制其所在的执行环境的作用域链。
也就是说，此时 F2 函数的作用域链是这样的：
F2.[[scope]] = [ F1.VO, window ]

继续看代码：

<script>
	var G1 = '全局变量';
	function F1 () {
		var  A1 = 'F1函数的变量';

		function F2 () {
			var A2 = 'F2函数的变量'
		};
		F2();
	};
	F1();
</script>

当 F2 函数执行的时候，会将自己执行上下文的变量对象置于作用域链的顶端。
此时 F2 函数的作用域链是这样的：
F2.[[scope]] = [ F2.VO, F1.VO, window ]

注： [[scope]] 是函数对象的私有属性，只有浏览器的 JS 引擎才可以访问，我们无法访问的。