基于变量提升用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

}

Q1：为什么会得到示例-1输出结果？
A2：由于函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

用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

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

1.创建AO对象

AO{

}

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

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

3.将实参和形参统一

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

4. 在函数体里找函数声明，将函数名作为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() { }
}

Q2: 在第四部a的初始化为一个function(){} 为什么还能被赋值为123？
A2:
 JS是弱类型动态语言。弱类型意味着 我不需要告诉执行引擎某个变量的具体类型
 动态语言: 可以使用同一个变量保存不同类型的数据

所以我们发现，a变量既可以是function(){}，赋值操作之后又可以变回Number类型的123

---

end

以上就是本文内容，仅是个人学习期间的学习内容记录，如有错误，欢迎指出探讨！