JavaScript预编译

JavaScript预编译四部曲：

1. 创建AO(Activation Object)对象；
2. 找形参和变量申明，将变量和形参名作为AO对象的属性名，值为undefined；
3. 将实参值和形参值相统一；
4. 在函数体里面找函数申明，值赋予函数体。

这样说比较难理解，我们来看个例子：

    function fn (a) {
      console.log(a)
      var a = 123
      console.log(a)
      function a () {}
      console.log(a)
      var b = function () {}
      console.log(b)
      function d () {}
    }

    fn(1)

第一步，创建AO对象：

AO:  {}

第二步，找形参和变量申明，将变量和形参名作为AO对象的属性名，值为undefined:

image.png

根据上图可得AO对象为：

AO: {
  a: undefined,
  b: undefined
}

第三部，将实参值和形参值相统一
例子中函数只有a一个形参，AO对象为

AO: {
  a: 1,
  b: undefined
}

第四部，在函数体里面找函数申明，值赋予函数体。
例子中函数申明如下图：

image.png

如果函数申明的函数名和AO对象的属性名相同，那么会覆盖掉的AO原来的属性值
AO对象的a属性重复了，从而被覆盖。故生成的AO对象为：

AO: {
 a: function a () {}, //这里a被覆盖了
 b: undefined,
 d: function d () {}
}

最后来看运行结果：

    function fn (a) {
      // AO: { a: function a () {} }
      console.log(a) // function a () {}
      var a = 123  // 这里将AO的值改变成123 AO: {a: 123} 
      console.log(a) // 123
      function a () {}
      console.log(a) // 123
      var b = function () {} 
      console.log(b) // function () {}
      function d () {}
    }

    fn(1)