JavaScript的变量提升

科海拾零 / 2023-08-27 / 原文

参考资料：https://time.geekbang.org/column/article/126339

变量提升
变量形式声明的函数
变量提升导致的问题
- 变量被覆盖
- 变量不被销毁
避开变量提升
- 引入let和const关键字
- 块级作用域

变量提升是在代码执行时，把变量和函数的声明部分提升到代码开头的行为，变量被提升后，会被默认设置为undefined。

变量提升

当使用var关键字声明变量时，

consolt.log(a)
var a = 1
// undefined

等价于

var a
console.log(a)
a = 1

变量a作为全局变量时，其声明会被提升到全局作用域的顶端，而初始化和赋值不会。

在函数作用域中

function main() {
    console.log(a)
    var a = 1
}

main()
// undefined

函数内部变量的声明会被提升到函数作用域的顶端，等价于

function main() {
    var a
    console.log(a)
    a = 1
}

main()

变量形式声明的函数

JavaScript中函数的声明有两种形式

function main() {
    // 函数形式声明
}

var func = main() {
    // 变量形式声明
}

在使用变量形式声明函数时，也会出现提升的现象。

func()

var func = function () {
    console.log("Hello World!\n")
}
// TypeError: func is not a function

func1()
function func1() {
    console.log("Hello World!\n")
}
// Hello World!

变量提升导致的问题

变量被覆盖

var s = "HTML"
function main() {
    console.log(s);
    if (0) {
        var s = "CSS"
    }
}

main()
// undefined

当执行到console.log(s)时，会在执行上下文中寻找变量s，一个在全局上下文中HTML，另一个在函数main的执行上下文中CSS。

JavaScirpt会优先从当前的执行上下文（函数的执行上下文）中查找变量，由于变量提升的存在，包含了s = undefined。

变量不被销毁

function main() {
    for (var i = 0; i < 6; ++i) {

    }
    console.log(i)
}

main()
// 6

避开变量提升

引入`let`和`const`关键字

ECMAScript6已经通过引入块级作用域和let, const关键字避开这种设计缺陷。

console.log(a)
let a = 1
// ReferenceError: Cannot access 'a' before initialization

function main() {
    let a = 1
    if (1) {
        let a = 2
        console.log(a)
    }
    console.log(a)
}

main()
// 2 1

let关键字支持块级作用域，作用块内的变量不影响外面的变量。

块级作用域

function main() {
    var a = 1
    let b = 2
    {
        let b = 3
        var c = 4
        let d = 5
        console.log(a)
        console.log(b)
        console.log(d)
    }
    console.log(b)
    console.log(c)
}

main()
//  1 3 5 2 4

在执行代码前，JavaScript会先编译并创建执行上下文