[前端基础-JS篇]var let const详解

前言

ECMAScript变量是松散类型，可以保存任何类型的数据，每个变量只不过是一个用于保存任意值的命名占位符。有三个关键字可以声明变量：var、let、const。

1. var

• 初始化：使用var关键字的变量可以不初始化，默认为undefined；
• 赋值：给变量赋值之后，可以更改变量保存的值和类型（但不推荐改变变量保存值的类型）

1.1 声明作用域

使用var定义的变量会成为包含它的函数的局部变量，当退出该函数时，该变量被销毁

function test() {
    var name = "riccardo"; //函数的局部变量，函数退出时被销毁
}

test();
console.log(name) // ReferenceError: name is not defined

在函数内定义变量时省略操作符，可以创建一个全局变量

function test() {
    name = "riccardo"; //创建一个全局变量name
}

test();
console.log(name) // riccardo

这样做容易造成维护困难，并不推荐，而且在严格模式下，像这样给未声明的变量赋值，会抛出ReferenceError

1.2 声明提升

声明提升：把当前作用域中的所有变量声明都放到作用域的顶部。
如下代码不会报错，因为使用var关键字声明的变量会自动提升到函数作用域的顶部

function foo() {
    console.log(age);
    var age = 18;

    // 以上等价于:
    // var age;
    // console.log(age);
    // age = 18;
}
foo(); // undefined

反复多次使用var声明同一变量也没有问题，变量值会被最后一个初始化声明覆盖。

function repeat() {
    var age = 18;
    var age = 21;
    var age;
    console.log(age);
    
    // 以上等价于:
    // var age;
    // age = 18;
    // age = 21;
    // console.log(age);
}

repeat(); // 21

2. let

let的初始化与赋值特性与var一致，但二者存在一些明显区别：

2.1 与var的区别

1. let声明的范围是块作用域，而var声明的范围是函数作用域

if (true) {
    var age = 18;
}
console.log(age); // 18

if (true) {
    let name = "riccardo";
}
console.log(name); // ReferenceError: name is not defined

块作用域是函数作用域的子集，因此适用于var作用域的限制也会适用于let

2. let不允许在同一个块作用域中出现重复声明

let age;
let age; // SyntaxError

var name;
let name; // SyntaxError

var和let关键字声明的并不是不同类型的变量，只是指出变量在相关作用域如何存在

3. let声明的变量不会在作用域中提升。

let value = 'world';
function append() {
    console.log(value); // ReferenceError: Cannot access 'value' before initialization
    let value = 'hello';
    console.log(value);
}

append();

上面的例子中，在执行append函数时会先扫描当前函数作用域的变量，发现了用let定义的变量value，但并不会像var一样进行声明提升，而是处在暂时性死区（Temperal dead zone）简称TDZ中，在此阶段引用到后面才声明的变量就会抛出ReferenceError，只有执行完TDZ中才会将其移出，才可使用正常方法。这种机制只在当前作用域生效。并且注意到第一句打印输出引用的是之后声明的value，而不是全局变量value，仔细品品。

4. let在全局作用域中声明的变量不会成为window的属性

<script>
    var name = "riccardo";
    console.log(window.name); // riccardo

    let age = "18";
    console.log(window.age); // undefined
</script>

5. for循环中表现不同（经典面试题）:
   • 退出循环时，var声明的迭代变量保存的是导致循环退出的值，因此在之后执行setTimeout时所有的i都是同一个变量；
     
   • 使用let声明的变量，JS引擎会在后台为每个迭代循环声明一个新的迭代变量，每个setTimeout引用的都是不同的变量实例，因此输出不同。

for (var i = 0; i < 5; i++) {
    // 5,5,5,5,5
    setTimeout(() => console.log(i), 0)
}

for (let i = 0; i < 5; i++) {
    // 0,1,2,3,4
    setTimeout(() => console.log(i), 0)
}

let这种每次迭代都会声明一个独立变量实例的行为适用于所有for循环，包括for-in和for-of。

3. const

1. const声明时必须同时初始化变量，且不能修改其声明的变量；
   
2. const与let有一些相同点：1. 不允许重复声明；2. 作用域都是块；3.不存在声明提升，有暂时性死区；4. 全局变量不会挂载到window上；
3. 如果const变量引用的是一个对象，可以修改对象内部的属性，但不可以更改对象。

const person = {};
person.name = 'riccardo'; // ok
person = {}; // TypeError: Assignment to constant variable.

总结

var	let	const
可以不初始化	可以不初始化	必须初始化
值可更改	值可更改	值不可更改
函数作用域	块作用域	块作用域
声明提升	没有声明提升	没有声明提升
重复声明	不可重复声明	不可重复声明
全局变量挂载到window	全局变量不会挂载到window	全局变量不会挂载到window

1. 尽量不使用var
2. const优先，let次之

参考文献

[1] Matt Frisbie. JavaScript高级程序设计(第4版)[M]. 北京:人民邮电出版社,2020:24~30
[2] JavaScript 变量声明var、let、const详解 - 掘金 (juejin.cn)