JS 中的变量提升

概念

从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

变量的变量提升

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 只有「创建」和「初始化」，没有「赋值」过程。

函数的变量提升

首先我们知道函数的声明有俩种方式:

1. 函数声明式

console.log(fn)
function fn () {
    console.log(1)
}
//  输出:
//  ƒ fn () {
//      console.log(1)
//  }

2. 函数字面量式

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像是处在创建完成到初始化过程中间,一种类似锁定的状态.