ES6学习之提升

错误提示参考

编译阶段报错提示ReferenceError
运行阶段报错提示TypeError

声明变量

声明变量假设理解为包括创建、初始化、赋值。

var a; // 创建、初始化为undefined
var b = 1; // 创建、初始化、赋值

创建会在编译阶段分析并提升。
赋值在运行阶段执行。

变量提升

编译阶段JS引擎的编译器会将var声明变量的创建和初始化提升到作用域顶部，并忽略重复的声明。

console.log(a);
var a = 1;
var a = 2;

会被引擎理解为：

var a = undefined;
console.log(a)
a = 1;
a = 2; // 重复声明被忽略，保留赋值操作

函数声明

声明一个函数有两个方式：

函数声明式

function a() {}
函数声明式也会被提升，与var不同的是:

1. 它的定义(赋值)也会被提升
2. 提升的优先级高于变量声明

foo();
var foo = 1;
function foo () { console.log(2); }

会被理解为：

function foo () { console.log(2); } // 创建和赋值都被提升
// var foo = undefined; 函数提升高于变量提升，这里重复声明被忽略
foo = 1;

函数表达式

1. 匿名函数表达式 var a = function() {}
2. 具名函数表达式 var a = function aa() {}

• 从语法上看，这种方式是以变量声明的方式创建了一个变量，然后将一个函数赋值给它。所以这种函数的提升和其他变量一样。
• 函数表达式的命名只能在函数体内部使用，外部获取不到。所以等号右边的函数表达式，编译器只当它是个表达式，并没有声明的意思，所以也不会提升。

console.log(a)
var a = function foo () { console.log(foo) };
foo()

会被理解为

var a = undefined;
console.log(a)
a = function foo () { console.log(foo) };
foo() // 当前作用域查询不到foo，这里在编译阶段报错

let const

ES6增加了新的声明方式 let const，是对var的扩展，除了实现了块作用域和常量功能，在变量提升方便也做了限制。

1. 创建操作依然被提升。
2. 初始化和赋值没有被提升。
3. let const不允许使用未初始化的变量

let a = 1;
{
	console.log(a);
	let a = 2;
}

会被理解为

let a = undefined;
a = 1;
{
	// 块作用域
	let a; // 此时未初始化为undefined
	
	// console.log在当前作用域查找到被创建的a并使用
	// console.log(a)报错: ReferenceError: Cannot access 'a' before initialization
	// => 初始化前无法访问a
	console.log(a);
	a = 2;
}

函数内的声明（个人理解）

思考下面的代码

function foo(a, b) {
	console.log(a, b);
	var a = 3;
	function b () {}
}
foo(1, 2); // 1, f b(){}

这段代码没研究明白的地方是参数的赋值是在哪个阶段？
当前我只能理解为这样

function foo (a, b) {
	{
		// 执行任务A
		// 先执行参数的赋值操作
		var a = 1, b = 2;
	}
	{
		// 执行任务B
		// 再执行函数体的代码，这块区域限制了变量提升的范围
		function b() {} // 函数声明提升到顶部
		// var a; // 同作用域的声明被忽略
		console.log(a, b);
		a = 3;
	}
}
foo(1, 2)

因为在函数体内用let声明与参数同名的变量会报错，说明任务A和任务B属于同一个作用域。
所以只能理解为函数体在编译时区分了任务，而不是区分了作用域。
等大佬解答原理

总结

1. 所有的声明都会提升到作用域顶部。
2. var声明提升创建、初始化。
3. let const声明只提升创建，不提升。
4. 函数声明提升创建、初始化、赋值。且优先级高于字面量声明。
5. 同一个变量只会声明一次，其它的会被忽略或覆盖。