概念
从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。
变量的变量提升
var声明的变量提升
先看个例子
console.log(a) //输出: undefined
var a = 1 //创建 + 初始化 + 赋值
首先我们知道var 声明存在「创建、初始化和赋值」三个过程
- 创建: 在环境中创建了变量
a - 初始化: 将变量a的值初始化为
undefined - 赋值: 将变量
a的值赋值为1
上述例子输出为undefined,也就是说var声明的变量「创建、初始化」的过程被提升了,而赋值过程未被提升.
let声明的变量提升
console.log(a) //报错: Cannot access 'a' before initialization
let a = 1 //创建 + 初始化
在上述例子中报错,不能在 a 初始化之前访问 a,那么说明用 let声明的变量「初始化」过程未被提升,同时「赋值」过程也便不存在了,那么我们又如何知道「创建」过程有没有被提升
let a = 1
let b = 1
let c = 1
{
let c = 2
console.log(a) // 报错: Cannot access 'a' before initialization
console.log(b)// 输出: 1
console.log(c)// 输出: 2
let a = 2
}
上述例子中:
- 变量
b在全局作用域中声明赋值,输出 1 - 变量
c在块级作用域中被重新声明赋值, 输出 2 - 变量
a在全局作用域中声明赋值,在块级作用域中也重新声明赋值了,此时如果块级作用域中变量a的「创建」未被提升,那么变量a应当输出的是全局作用域赋值的值 1. -
值得注意的一点:执行
let a = 1是将 变量a初始化为 1,与var的初始化是不同的,而let a才是将变量a初始化为undefined -
const:
const和let只有一个区别，那就是 const 只有「创建」和「初始化」，没有「赋值」过程。
函数的变量提升
首先我们知道函数的声明有俩种方式:
- 函数声明式
console.log(fn)
function fn () {
console.log(1)
}
// 输出:
// ƒ fn () {
// console.log(1)
// }
- 函数字面量式
console.log(fn)
let fn = function () {
console.log(1)
}
// 输出:
// undefined
// 若用 let 来声明函数, 会报错. 和上述变量提升相同.
总结:
-
var的「创建」和「初始化」都被提升了。 -
let的「创建」过程被提升了，但是初始化没有提升。 -
function的「创建」「初始化」和「赋值」都被提升了。 - 同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。
- 函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
题目
- 下列代码输出的是什么,为什么?
console.log(a);
var a = 1;
function foo() {
console.log(a);
var a = 2;
console.log(a);
}
foo();
console.log(a);
// undefined undefined 2 1
- 如何理解
let x = x报错之后，再次let x依然会报错？
let x = x
// 报错:Cannot access 'x' before initialization
let x = 1
// 报错:Identifier 'x' has already been declared
1.因为let x = x是将变量x初始化为x,而 x还未被初始化,所以初始化失败.
2.x无法再被初始化, 是因为 x 已经在环境中被创建.
3.即x像是处在创建完成到初始化过程中间,一种类似锁定的状态.
