JS学习系列 06 - 变量对象

全局对象初始化时系统将创建并初始化一系列原始属性，例如：Math、String、Date、parseInt、window等等，之后是我们在全局上下文中自己定义的全局变量。在 DOM 中，全局对象的 window 属性可以引用全局对象自身，全局上下文环境的 this 属性也可以引用全局对象。

// 全局执行上下文环境
EC(globalContext) = {
   // 全局对象（全局上下文环境的变量对象） 
   global: {
      Math: <...>,
      String: <...>,
      ...
      ...
      window: global     // 引用全局对象自身
   },
   
   // this 属性
   this: global

   // 作用域链
   ...
}

arguments 是活动对象的一个属性，它也是一个对象，包括以下属性：

1. callee - 指向当前函数的引用
2. length - 真正传递的参数个数
3. properties-indexes - index 是字符串类型的整数，例如"1": "aa"，类似于数组类型，也可以通过arguments[1]来访问，但是不能用数组的方法（push, pop等等）。另外，properties-indexes 的值和实际传递进来的参数之间是共享的，一个改变，另一个也随之改变。

举个例子：

function foo (x, y, z) {
  
   // 声明的函数参数数量
   console.log(foo.length);      // 3

   // 实际传递进来的参数数量
   console.log(arguments.length);      // 2

   // arguments 的 callee 属性指向当前函数
   console.log(arguments.callee === foo)   // true

   // 参数共享
   console.log(x === arguments[0]);      // true
   console.log(x);      // 10

   arguments[0] = 20;
   console.log(x);   // 20

   x = 30;
   console.log(arguments[0]);    // 30

   // 但是注意，没有传递进来的参数 z ，和第3个索引值是不共享的
   z = 40;
   console.log(arguments[2]);      // undefined

   arguments[2] = 50;
   console.log(z);      // 40
}

foo(10, 20);

function foo (a, b) {
   var c = 5;

   function bar () {};

   var d = function _d () {};

   (function f () {});
}

foo(10);

当进入带有实参10的 foo 函数上下文时（预编译时，此时代码还没有执行），AO 结构如下：

注意，函数表达式 f 并不包含在活动对象 AO 内。 也就是说，只有函数声明会被包含在变量对象 VO 里面，函数表达式并不会影响变量对象。

行内函数表达式 _d 则只能在该函数内部可以使用， 也不会包含在 VO 内。

这之后，就会进入第2个阶段，代码执行阶段。

代码执行

在这个阶段，AO/VO 已经有了属性（并不是所有的属性都有值，大部分属性的值还是系统默认的初始值 undefined）。

AO 在代码执行阶段被修改如下：

AO['c'] = 5;
AO['d'] = <reference to FunctionDelcaration "_d">

console.log(x);      // function

var x = 10;
console.log(x);      // 10

x = 20;

function x () {};

console.log(x);      // 20

这里为什么是这样的结果呢？

上边我们说过，在代码执行之前的预编译，会为变量对象生成一些属性，先是形参，再是函数声明，最后是变量，并且变量并不会影响同名的函数声明。

所以，在进入执行上下文时，AO/VO 结构如下：

AO = {
   x: <reference to FunctionDeclaration "x">

   // 在碰到变量声明 x 时，因为已经存在了函数声明 x ，所以会忽略
}

紧接着，在代码执行阶段，AO/VO 被修改如下：

AO['x'] = 10;
AO['x'] = 20;

希望大家可以好好理解变量对象，对于理解我们后边要讲的作用域链有很大的帮助。

5. 变量

有一些文章说过：

不管是使用 var 关键字（在全局上下文）还是不使用 var 关键字（在任何地方），都可以声明一个变量。

请记住，这是错误的观念。

任何时候，变量都只能通过使用 var 关键字来声明（ES6 之前）。

a = 10;

上面的赋值语句，仅仅是给全局对象创建了一个新属性（在在非严格模式，严格模式下会报错），但注意，它不是变量。“不是变量”并不是说它不能被改变，而是指它不符合ECMAScript 规范中变量的概念。

让我们通过一个例子来看一下两者的区别：

console.log(a);        // undefined
console.log(b);        // 报错，b is not defined

b = 10;
var a = 20;

只要我们很好的理解了：变量对象、预编译阶段和执行代码阶段，就可以迅速的给出答案。

预编译（进入上下文）阶段：

VO = {
   a: undefined
}

我们可以看到，因为 b 不是通过 var 声明的，所以这个阶段根本就没有 b ，b 只有在代码执行阶段才会出现。但是在这个例子中，还没有执行到 b 那就已经报错了。

我们稍微更改一下示例代码：

console.log(a);      // undefined

b = 10;
console.log(b);             // 10 代码执行阶段被创建
console.log(window.b);      // 10
console.log(this.b);        // 10

var a = 20;
console.log(a);      // 20 代码执行阶段被修改

关于变量，还有一个很重要的知识点。

变量不能用 delete 操作符来删除。

a = 10;

console.log(window.a);    // 10

console.log(delete a);    // true

console.log(window.a);    // undefined

var b = 20;
console.log(window.b);    // 20

console.log(delete b);    // false

console.log(window.b);    // 20

注意：这个规则在 eval() 上下文中不起作用。

eval('var a = 10;');
console.log(window.a);    // 10

console.log(delete a);    // true

console.log(window.a);    // undefined