题解JS预编译

参考
来源：https://www.bilibili.com/video/BV1sN411974w?p=2
细讲：
https://zhuanlan.zhihu.com/p/50236805
https://developer.mozilla.org/zh-CN/docs/Glossary/Scope

1. 知识

JS运行三步

  语法分析-预编译-逐行执行

1. 函数声明整体提升
2. 变量声明提升（*注意是变量声明）

语法分析

  任何变量，如果变量未经声明就赋值，这些变量就为全局对象所有。一切声明的全局变量和未经声明的变量，全归window所有。
  例如:

// 1
var a = 123;
window.a = 123;
// 2
function test(){
	// 这里的b是未经声明的变量，所以是归window所有的。
	var a = b = 110;
}

作用域Scope

  当前的执行上下文。值 (en-US)和表达式在其中 "可见" 或可被访问到的上下文。如果一个变量 (en-US)或者其他表达式不 "在当前的作用域中"，那么它就是不可用的。 作用域也可以根据代码层次分层，以便子作用域可以访问父作用域，通常是指沿着链式的作用域链查找，而不能从父作用域引用子作用域中的变量和引用。
  当然，一个 Function 将生成一个闭包（通常是返回一个函数引用），这个函数引用从外部作用域（在当前环境下）可以访问闭包内部的作用域。

局部（作用域）预编译

  先扫描一下整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有错误的话，开始从上到下解释一行执行一行：

1. 创建AO对象（Activation Object）执行期上下文。
2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
3. 将实参值和形参统一。
4. 找函数声明,会覆盖变量申明

全局（作用域）预编译

  GO对象是全局预编译，所以它优先于AO对象所创建和执行

1. 创建GO对象（Global Object）全局对象。
2. 找变量声明，将变量名作为GO属性名，值为undefined
3. 查找函数声明，作为GO属性，值赋予函数体

局部作用域

• 调用函数时创建，结束调用时销毁
• 每次调用会创建一个独立的全新函数作用域
• 函数作用域中访问变量&函数，会在自身作用域中寻找，若未找到沿着作用域链去上一层寻找

全局作用域

• 打开页面时创建，页面关闭时销毁
• 编写在<script>中的变量和函数，作用域为全局
• 全局作用域有全局对象window，代表一个浏览器窗口，由浏览器创建可以直接调用
• 全局作用域声明的变量和函数保存于window对象的属性和方法

2. 题目

// 函数
function fn(a,c){
	console.log(a); // function a() {}
	// 变量声明+变量赋值（只提升变量声明，不提升变量赋值）
	var a = 123;
	console.log(a); // 123
	console.log(c); // function c() {}
	// 函数声明(函数声明提升，覆盖变量声明)
	function a(){};
	if (false) {
	 var d=66 // 不执行
	}
	console.log(d);// undefined
	console.log(b);// undefined
	// 函数表达式
	var b = function(){};
	console.log(b);// function(){}
	// 函数声明
	function c(){};
	console.log(c);// function c(){}
}
//调用函数
fn(1,2);

3. 过程

1.预编译第1步：创建AO对象

AO{

}

2.预编译第2步：找形参和变量声明，将形参名和变量名作为AO对象的属性名

AO{
     a : undefined,
     c : undefined,
	 d : undefined,
	 b : undefined
}

3.预编译第3步：将实参值和形参统一

AO{
     a : 1,
     c : 2,
	 d : undefined,
	 b : undefined
}

4.预编译第4步：在函数体里面找函数声明，值赋予函数体。

AO{
     a : function a(){...},
	 c : function c(){...},
     d : undefined,
     b : undefined
}

5.解释执行见题目注释

4. 答案

function a(){}
123
function c(){}
undefined
undefined
function(){}
function c(){}