JavaScript学习（三） —— 变量对象、活动对象

JS代码在浏览器中运行时，解释器执行代码到调用某个函数时，被调用的函数加入Call Stack栈，创建对应这个函数的执行上下文，在这个当口，解释器接下来做了什么？

1.变量对象（Variable Object）

正常情况下，我们写的代码会包括定义很多变量和函数。浏览器中内置的解释器在拿到JS代码时是如何工作的？

解释器首先需要找到这些变量和函数的定义，它会在执行上下文创建的时候首先生成变量对象。

以函数环境为例，在调用某个函数时，这个函数入栈函数调用栈，此时它处于栈的顶端。此时先进入执行上下文的创建阶段，它包含以下三个部分：

1. 创建函数的arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。没有实参的话，属性值为undefined。
2. 这个函数内部的所有函数声明。就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。
3. 这个函数内部的所有变量声明。每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会影响已经存在的这类属性。

创建变量对象的过程

2.活动对象2（Activation Object）

还是要以函数环境为主要场景。在进入执行阶段之前，变量对象中的属性都不可访问。进入执行阶段后，变量对象 变成活动对象（Activation Object），里面的属性可以被访问了，然后执行代码。

注意“变成” 这个词。它表明了在函数执行上下文中 变量对象（Variable Object） 和活动对象（Activation Object） 是同一个对象，它们只是存在不同生命周期中。

3.JS的提升（Hosting）机制

1.变量提升

看一个例子：

var str = 'global';
function fn() {
  console.log(str);
  var str = 'local';
  console.log(str);
}
fn();

输出结果

undefined
'local'

我们知道变量提升是在函数级作用域中把声明部分提升到顶端。解释器是这样处理这段代码的：

var str = 'global';
function fn() { // fn函数
  var str; // str在fn函数级作用域的声明部分提升到这里，默认值是undefined
  console.log(str); // 在fn函数级作用域中读取str的值，取到的是undefined
  str = 'local'; // str在fn函数级作用域的赋值部分
  console.log(str); // 再次取str，取得的值是'local'
}
fn();

解释器会把fn函数中第二行的 var str = 'local' 代码拆成两部分：

• ① 声明部分：var str; 按照前面的步骤看：函数fn的执行上下文创建阶段，会生成变量对象，此时只有变量名，并且把声明部分的代码提到这个fn函数作用域的顶端，对应的变量str值默认给的是undefined
• ② 赋值部分：str = 'local'; 在函数fn内部，变量str的赋值语句已经是第三行了。赋值行为发生在函数执行上下文的执行阶段，这个阶段完成了变量对象向活动对象的转化，确定了变量的属性值和对函数fn内部的函数声明的引用。此时也进入了执行代码的部分，第一次打印str输出undefined，第二次输出'local'。

2.函数提升

函数提升与变量提升一样都是提升到当前作用域顶端，但是有些不同点： 先看一个例子：

console.log(fn1); // [Function: fn1]
fn1(); // fn1
console.log(fn2); // undefined
fn2(); // Uncaught TypeError: fn2 is not a function
function fn1() { // 函数声明
  console.log('fn1');
}
var fn2 = function(){ // 函数表达式
  console.log('fn2');
};

• 函数fn1在声明之前就调用，可以得到打印结果，并顺利调用成功，说明函数fn1提升。
• 在调用fn2时会报错，说明函数表达式不会提升，如果想调用fn2，调用的语句要写在声明fn2的函数表达式之后。

这是其一，不过重点是第二个例子：

var str = 'global';
function fn() {
    str = 'local';
    console.log(str);
    return;
    function str() {};
}
fn();
console.log(str);

输出结果

'local'
'global'

处理这段代码时，执行上下文到了执行阶段，完成变量赋值和函数引用，在准备执行代码时刻，代码是这样的：

var str = 'global';
function fn() {
  var str = function () {};
  str = 'local';
  console.log(str);
  return;
}
fn();
console.log(str);

解析：函数fn内部第一行代码var str = function () {}先完成str函数提升。然后第二行代码str = 'local'又给str赋值为'local'，第三行就输出'local'。

说明函数提升的优先级高于变量提升，原因是：

还是这张图，创建变量对象的过程

这个过程是从左到右的顺序，明显第二步对函数的赋值比第三步对变量的赋值要早。

最后总结： 用一段比较抽象的代码（差不多是解释器的处理逻辑）描述函数上下文生命周期： 先是创建阶段：

// 函数fn执行上下文的创建阶段
fnExecutionContext = { // fn执行上下文
  VariableObject: {},  // 变量对象
  ScopeChain: {}, // 作用域链，后面的文章会讨论作用域与作用域链
}
...
// 处理fn执行上下文的变量对象variableObject
VariableObject = {
    args: {...},  // 假设解释器在初始化一个变量对象时，对fn参数列表是args这样定义的
    _fn: <_fn reference>  // _fn表示fn执行上下文中的某个函数定义，<_fn reference>表示地址引用
    str: undefined // str表示fn执行上下文中的某个变量的定义
}

然后到了执行阶段：

// 变量对象转变成活动对象
Variable Object => Activation Object
...
// 完成变量对象variableObject的赋值操作
VariableObject = {
    args: {...},  // 假设函数fn传了参数，args 有了一些具体的值
    _fn: <_fn reference>  // <_fn reference>地址引用的具体值假设是function () {}
    str: 'local' // str变量有了具体值 'local'
    this: window // 假设fn是定义在window上，即全局执行环境中的
}