基于变量提升用AO，GO对象理解JavaScript预编译过程

本文说明 ：
Q 表示 question 问题
A 表示 answer 解答

什么是预编译？

引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。

用GO对象来理解预编译发生在全局作用域

预编译在全局执行前的三部曲
1. 创建GO(global object)对象 ()
2. 找变量声明，将变量声明作为GO对象的属性名，值赋予undefined
3. 找全局里的函数声明，将函数名作为GO对象的属性名，值赋予函数体

举个例子（示例 – 1）：

console.log(a);//undefined
function a() {
}
var a = 1;
console.log(a);//1
复制代码

预编译在全局执行前的三部曲

1.创建GO对象

AO{

}

2.找变量声明，将变量声明作为GO对象的属性名，值赋予undefined

AO{
a : undefined

}

3.找全局里的函数声明，将函数名作为GO对象的属性名，值赋予函数体

AO{
a : ~~undefined~~ function(){}

}

执行过程：

执行var a = 1;

实际上这行代码可以理解为为 var a;和 a = 1;声明和赋值两个操作。
var声明的变量会变量提升，在AO对象中寻找变量名为a的变量，如果存在a,则忽略声明操作，如果不存在a,则在AO对象中声明一个a变量，值赋予undefined。
//本行代码说明： 重复的声明变量是不会报错的
console.log(a);//undefined
var a = 0;
console.log(a);//0
var a = 1;
console.log(a);//1
复制代码
执行a = 1赋值操作时
AO{
a : ~~undefined~~ ~~function(){}~~ 1

}

示例-2输出结果的原因：由函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

用AO对象来理解函数执行前预编译过程

预编译在函数执行前的四部曲

1. 创建AO对象（活动对象activation object）
2. 到函数体作用域里找形参和变量声明，将形参和变量声明作为AO对象的属性名，值为undefined。
3. 将实参和形参统一
4. 在函数体里找函数声明，将函数名作为AO对象的属性名，值赋予函数体

举个例子（示例 – 2）：

function fn(a) {
    console.log(a);//1(第一个 console.log())
    var a = 123;
    console.log(a);//2
    function a() {}
    console.log(a);//3
    var b = function() {}//函数表达式
    console.log(b);//4
    function d() {}
    var d = a;
    console.log(d);//5
  }
  
  fn(1);
  
//输出结果：
[Function: a]
123
123
[Function: b]
123
复制代码

预编译在函数执行前的四部曲

创建AO对象

AO{

}

2.到函数体作用域里找形参和变量声明，将形参和变量声明作为AO对象的属性名，值为undefined。

AO{
a:undefined;
b:undefined;
d:undefined;
}

3.将实参和形参统一

AO{
a:~~undefined;~~ 1;
b:undefined;
d:undefined;
}

在函数体里找函数声明，将函数名作为AO对象的属性名，值赋予函数体

AO{
a:~~undefined; 1;~~ function (){ }
b:undefined;
d:~~undefined;~~ function() { }
}

执行过程：

第一个console.log:此时函数的执行环境内的变量为
AO{

a:~~undefined; 1;~~ function (){ }

b:undefined;

d:~~undefined;~~ function() { }

}

第二、三、四、五个console.log:此时函数的执行环境内的变量为
AO{

a:~~undefined; 1;~~ ~~function (){ };~~ 123；

b:undefined;
d:~~undefined;~~ function() { }
}

Q1: 在第四部a的初始化为一个function(){} 为什么还能被赋值为123？
A1:
JS是弱类型动态语言。弱类型意味着我不需要告诉执行引擎某个变量的具体类型
动态语言: 可以使用同一个变量保存不同类型的数据
所以我们发现，a变量既可以是function(){}，赋值操作之后又可以变回Number类型的123