作用域，上下文，变量对象和作用域链-CSDN博客

阅读了一些作用域链相关博客，做一个读书笔记。

参考资料：

一、作用域

作用域是指程序源代码中定义变量的区域。

作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域，函数的作用域在函数定义的时候就决定了。

而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。

动态作用域和静态作用域，决定的是作用域链的顺序。

JavaScript中，函数的作用域基于函数创建的位置。

因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链

二、执行上下文

JavaScript 引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。当执行一段代码的时候，会进行一个“准备工作”，比如变量提升或函数提升。

JavaScript引擎遇到一段怎样的代码时才会做“准备工作”呢？

JavaScript 可执行代码(executable code)的类型：全局代码、函数代码、eval代码。

举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，也就是"执行上下文(execution context)"。
如何管理创建执行上下文呢？

JavaScript 引擎创建了**执行上下文栈（Execution context stack，ECS）**来管理执行上下文。

为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：

  ECStack = [];
复制代码

试想当 JavaScript 开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空，所以程序结束之前， ECStack 最底部永远有个 globalContext：

  ECStack = [
      globalContext
  ];
复制代码

现在 JavaScript 遇到下面的这段代码了：

  function fun3() {
      console.log('fun3')
  }
  
  function fun2() {
      fun3();
  }
  
  function fun1() {
      fun2();
  }
  
  fun1();
复制代码

当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码：

  // 伪代码
  
  // 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
复制代码

三、变量对象

对于每个执行上下文，都有三个重要属性：

变量对象(Variable object，VO)，作用域链(Scope chain)，this

什么是变量对象？

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。
全局上下文下的变量对象

全局上下文中的变量对象就是全局对象。
1. 可以通过 this 引用，在客户端 JavaScript 中，全局对象就是 Window 对象。
2. 全局对象是由 Object 构造函数实例化的一个对象。
3. 预定义了一大堆函数和属性。
4. 全局变量的宿主。
5. 客户端 JavaScript 中，全局对象有 window 属性指向自身。
全局对象是在进入任何执行环境之前就已经创建了的对象。

这个对象只存在一份，它的属性在程序中的任何地方都可以访问，全局对象的生命周期终止于程序退出那一刻。
函数上下文下的变量对象

在函数上下文中，我们用**活动对象(activation object, AO)**来表示变量对象。

VO和AO其实都是同一个对象，只是处于执行上下文的不同生命周期。

VO对应的是函数创建阶段，JS解析引擎进行预解析时，所有的变量和函数的声明，统称为Variable Object。该变量与执行上下文相关，知道自己的数据存储在哪里，并且知道如何访问，但不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，变量对象(VO)转变为了活动对象(AO)，里面的属性都能被访问了，然后开始进行执行阶段的操作。

AO对应的是函数执行阶段，当函数被调用执行时，会建立一个执行上下文，该执行上下文包含了函数所需的所有变量，该变量共同组成了一个新的对象就是Activetion Object。
活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

进入执行上下文

当进入执行上下文时，这时候还没有执行代码，

变量对象会包括：

函数的所有形参 (如果是函数上下文)
- 由名称和对应值组成的一个变量对象的属性被创建
- 没有实参，属性值设为 undefined
函数声明
- 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
- 如果变量对象已经存在相同名称的属性，则完全替换这个属性
变量声明
- 由名称和对应值（undefined）组成一个变量对象的属性被创建；
- 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

  function foo(a) {
    var b = 2;
    function c() {}
    var d = function() {};
    b = 3;
  }
  foo(1);
复制代码

在进入执行上下文后，这时候的 AO 是：

  AO = {
      arguments: {
          0: 1,
          length: 1
      },
      a: 1,
      b: undefined,
      c: reference to function c(){},
      d: undefined
  }
复制代码

代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

还是上面的例子，当代码执行完后，这时候的 AO 是：

  AO = {
      arguments: {
          0: 1,
          length: 1
      },
      a: 1,
      b: 3,
      c: reference to function c(){},
      d: reference to FunctionExpression "d"
  }
复制代码