第一部分总结-深入JS系列 · 前端小册

[TOC] >大佬的 github：[https://github.com/mqyqingfeng/Blog](https://github.com/mqyqingfeng/Blog) # 词法作用域（静态作用域）和动态作用域 JavaScript 采用的是词法作用域，函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。 ~~~ var value = 1; function foo() { console.log(value); } function bar() { var value = 2; foo(); } bar(); // 结果是 ??? ~~~ 假设JavaScript采用静态作用域，让我们分析下执行过程：执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。假设JavaScript采用动态作用域，让我们分析下执行过程：执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。前面我们已经说了，JavaScript采用的是静态作用域，所以这个例子的结果是 1。再看一个例子：下面两段代码的执行结果？ ~~~js var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope(); ~~~ ~~~js var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } checkscope()(); ~~~ 两段代码都会打印：`local scope`。原因也很简单，因为JavaScript采用的是词法作用域，函数的作用域基于函数创建的位置。引用《JavaScript权威指南》的回答就是： JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。 # 执行上下文与执行上下文栈 ~~~ var foo = function () { console.log('foo1'); } foo(); // foo1 var foo = function () { console.log('foo2'); } foo(); // foo2 ~~~ ~~~ function foo() { console.log('foo1'); } foo(); // foo2 function foo() { console.log('foo2'); } foo(); // foo2 ~~~ 为什么打印的结果会是两个`foo2`？这是因为 JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当**执行一段代码**的时候，会进行一个“准备工作”，比如第一个例子中的**变量提升**，和第二个例子中的**函数提升**。 JavaScript 的可执行代码(executable code)的类型有三种：全局代码、函数代码、eval代码。举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用个更专业一点的说法，就叫做**执行上下文(execution context)**。我们写的函数多了去了，如何管理创建的那么多执行上下文呢？所以 JavaScript 引擎创建了**执行上下文栈(Execution context stack，ECS)** 来管理执行上下文为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组： ~~~js ECStack = []; ~~~ 试想当 JavaScript 开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空，所以程序结束之前， ECStack 最底部永远有个 globalContext： ~~~js ECStack = [ globalContext ]; ~~~ 现在 JavaScript 遇到下面的这段代码了： ~~~js function fun3() { console.log('fun3') } function fun2() { fun3(); } function fun1() { fun2(); } fun1(); ~~~ 当**执行一个函数的时候**，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码： ~~~js // 伪代码 // fun1() ECStack.push(<fun1> functionContext); // fun1中竟然调用了fun2，还要创建fun2的执行上下文 ECStack.push(<fun2> functionContext); // 擦，fun2还调用了fun3！ ECStack.push(<fun3> functionContext); // fun3执行完毕 ECStack.pop(); // fun2执行完毕 ECStack.pop(); // fun1执行完毕 ECStack.pop(); // javascript接着执行下面的代码，但是ECStack底层永远有个globalContext ~~~ >[success]大佬写的太好了根本找不出多余的字所以就把需要理解的地方直接搬运了 # 执行上下文(excution context)的三个属性当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性： * 变量对象(Variable object，VO) * 作用域链(Scope chain) * this ## 变量对象变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。 不同执行上下文下的变量对象稍有不同 - 全局上下文中的变量对象就是全局对象，在客户端 JavaScript 中，全局对象就是 Window 对象，预定义了一堆的函数和属性 - 在函数上下文中，我们用**活动对象(activation object, AO)** 来表示变量对象。活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object ，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。 活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。 **执行过程** 执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做： 1. 进入执行上下文 2. 代码执行 **1.进入执行上下文** 当进入执行上下文时，这时候还没有执行代码，变量对象会包括： 1. 函数的所有形参 (如果是函数上下文) * 由名称和对应值组成的一个变量对象的属性被创建 * 没有实参，属性值设为 undefined 2. 函数声明 * 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建 * 如果变量对象已经存在相同名称的属性，则完全替换这个属性 3. 变量声明 * 由名称和对应值（undefined）组成一个变量对象的属性被创建； * 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性举个例子： ~~~js function foo(a) { var b = 2; function c() {} var d = function() {}; b = 3; } foo(1); ~~~ 在进入执行上下文后，这时候的 AO 是： ~~~js AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: reference to function c(){}, d: undefined } ~~~ **2.代码执行** 在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值还是上面的例子，当代码执行完后，这时候的 AO 是： ~~~js AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 3, c: reference to function c(){}, d: reference to FunctionExpression "d" } ~~~ 到这里变量对象的创建过程就介绍完了，让我们简洁的总结我们上述所说： 1. 全局上下文的变量对象初始化是全局对象 2. 函数上下文的变量对象初始化只包括 Arguments 对象 3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值 4. 在代码执行阶段，会再次修改变量对象的属性值看懂了这篇文章或许才算是真正理解**变量提升**和**函数提升**的问题了吧 ~~~ console.log(foo); function foo(){ console.log("foo"); } var foo = 1; ~~~ 会打印函数，而不是 undefined 。这是因为在进入执行上下文时（个人认为姑且叫做分析阶段吧，完成赋值的过程叫执行阶段），如果如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。 ## 作用域链查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。下面，让我们以一个函数的创建和激活两个时期来讲解作用域链是如何创建和变化的。 **函数创建** 函数的作用域在函数定义的时候就决定了。这是因为函数有一个内部属性 \[\[scope\]\]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 \[\[scope\]\] 就是所有父变量对象的层级链，但是注意：\[\[scope\]\] 并不代表完整的作用域链！举个例子： ~~~js function foo() { function bar() { ... } } ~~~ 函数创建时，各自的\[\[scope\]\]为： ~~~js foo.[[scope]] = [ globalContext.VO ]; bar.[[scope]] = [ fooContext.AO, globalContext.VO ]; ~~~ **函数激活** 当函数激活时，进入函数上下文，创建 VO/AO 后，就会将活动对象添加到作用链的前端。这时候执行上下文的作用域链，我们命名为 Scope： ~~~js Scope = [AO].concat([[Scope]]); ~~~ 至此，作用域链创建完毕。 **完整过程** 以下面的例子为例，结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程： ~~~js var scope = "global scope"; function checkscope(){ var scope2 = 'local scope'; return scope2; } checkscope(); ~~~ 执行过程如下： 1.checkscope 函数被创建，保存作用域链到内部属性\[\[scope\]\] ~~~js checkscope.[[scope]] = [ globalContext.VO ]; ~~~ 2.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈 ~~~js ECStack = [ globalContext, checkscopeContext ]; ~~~ 3.checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数\[\[scope\]\]属性创建作用域链 ~~~js checkscopeContext = { Scope: checkscope.[[scope]], } ~~~ 4.第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明 ~~~js checkscopeContext = { AO: { arguments: { length: 0 }, scope2: undefined }， Scope: checkscope.[[scope]], } ~~~ 5.第三步：将活动对象压入 checkscope 作用域链顶端 ~~~js checkscopeContext = { AO: { arguments: { length: 0 }, scope2: undefined }, Scope: [AO, [[Scope]]] } ~~~ 6.准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值 ~~~js checkscopeContext = { AO: { arguments: { length: 0 }, scope2: 'local scope' }, Scope: [AO, [[Scope]]] } ~~~ 7.查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出 ~~~js ECStack = [ globalContext ]; ~~~ > 读完并理解了这篇后，对作用域链的创建过程有了更深的理解了。