【JavaScript】变量 & 常量

ECMAScript 变量可以用于保存任何类型的数据。

有 3 个关键字可以声明变量：var、const 和 let。其中 const 和 let 只能在 ES6 及更晚的版本中使用。

var 关键字

var 声明

var message;

这行代码定义了一个名为 message 的变量，可以用它保存任何类型的值。在没初始化的情况下，变量会保存一个特殊值 undefined。

可以在定义变量的同时初始化：

var message = 'hi';

这里，message 被定义为一个保存着字符串 'hi' 的变量。

后续可以改变保存的值，也可以改变值的类型：

var message = 'hi';
message = 100; // 合法, 但不推荐

在这个例子中，变量 message 首先被定义为一个保存字符串值 'hi' 的变量，然后又被重新赋值为数值 100。

如果需要定义多个变量，可以在一条语句中用逗号 , 分隔：

var message = 'hi',
    found = false,
    age = 29;

在严格模式下，不能定义名为 eval 和 arguments 的变量，否则会导致语法错误。

变量的作用域

使用 var 定义的变量具有函数作用域。

使用 var 在一个函数内部定义变量，就意味着该变量将在函数退出时被销毁：

function test() {
    var message = 'hi'; // 局部变量
}
test();
console.log(message); // 出错~

这里 message 变量是在函数 test 内部使用 var 定义的。调用 test 函数会创建这个变量并给它赋值。函数执行完之后，变量随即被销毁，因此示例中的最后一行会导致错误。

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

function test() {
    message = 'hi'; // 全局变量
}
test();
console.log(message); // "hi"

去掉 var 操作符之后，message 就变成了全局变量。只要调用一次函数 test，就会定义这个变量，并且可以在函数外部访问该变量。

注意：虽然可以通过省略 var 操作符定义全局变量，但不推荐这么做，因为这会使代码很难维护。

在严格模式下，如果像这样给未声明的变量赋值会抛出 ReferenceError。

特别事项

变量声明提升：通过 var 声明的变量会被提升到函数作用域顶部。

a = 10;
var a;
console.log(a); // 10

JS 引擎会将 var a = 2 理解为 var a 和 a = 2 两个任务，第一个是编译阶段的任务，第二个是执行阶段的任务。

注意：赋值操作并不会被提升。以下 2 种写法等效：

console.log(a); // undefined
var a = 200;

var a;
console.log(a); // undefined
a = 200;

可重复定义：重复的 var 声明会被忽略。以下 2 种写法等价：

function foo() {
    var age = 16;
    var age = 26;
    var age = 36;
    console.log(age);
}
foo(); // 36

function foo() {
    var age = 16;
    age = 26;
    age = 36;
    console.log(age);
}
foo(); // 36

要注意避免重复声明，特别是当普通的 var 声明和函数声明混合在一起的时候，否则会引起很多危险的问题！

let 关键字

let 声明

var 声明变量具有函数作用域，而 let 声明的变量具有块作用域。

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

在同一作用域内，变量不能重复用 let 定义。

let a;
let a; // Uncaught SyntaxError

“声明冗余报错” 不会因混用 let 和 var 而受影响。

var name;
let name; // SyntaxError

let age;
var age; // SyntaxError

暂时性死区

严格来讲，let 声明的变量也会被提升，但由于 “暂时性死区”（temporal dead zone）的缘故，不能在声明之前使用 let 变量。

// name 会被提升
console.log(name); // undefined
var name = 'Matt';

// age 其实也会被提升; 但不能在声明之前使用
console.log(age); // ReferenceError: age 没有定义
let age = 26;

在 let 声明之前都为 “暂时性死区”（temporal dead zone），在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

有意思的是，对未声明变量使用 typeof 不会产生错误，但在 TDZ 中却会报错：

{
    typeof a; // undefined
    typeof b; // ReferenceError!
    let b;
}

for 循环中的 let 声明

在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：

for (var i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // 5

改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：

for (let i = 0; i < 5; ++i) {
    // 循环逻辑
}
console.log(i); // ReferenceError: i 没有定义

在使用 var 的时候，最常见的问题就是对迭代变量的奇特声明和修改：

for (var i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0);
}
// 你可能以为会输出 0 1 2 3 4
// 实际上会输出 5 5 5 5 5

之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值 5。在之后执行超时逻辑时，所有的 i 都是同一个变量，因此输出的都是同一个值。

而在使用 let 声明迭代变量时，JS 引擎在后台会为每个迭代循环声明一个新的迭代变量。每个 setTimeout 引用的都是不同的变量，所以 console.log 输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。

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

const 关键字

const 与 let 基本相同，唯一的区别是用它声明变量时必须初始化变量，且尝试修改 const 声明的变量会导致运行时错误。

const 声明的限制只适用于它指向的变量的引用。换句话说，如果 const 变量引用的是一个对象，那么修改这个对象内部的属性并不违反 const 的限制。

对于引用类型的数据，运算符操作的是内存地址：

const NUM = [10];
NUM.push(20);
console.log(NUM); // [10, 20]

在此过程中，内存地址没有发生改变，所以可以改变数组内容（对象同理）。

如果想让整个对象都不能修改，可以使用 Object.freeze，这样再给属性赋值时会静默失败：

const o3 = Object.freeze({});
o3.name = 'Jake';
console.log(o3.name); // undefined

由于 const 声明暗示变量的值是单一类型且不可修改，JS 运行时编译器可以将其所有实例都替换成实际的值，而不会通过查询表进行变量查找。谷歌的 V8 引擎就执行这种优化。

注意：开发实践表明，应该尽可能地多使用 const 声明，除非确实需要一个将来会重新赋值的变量。这样可以从根本上保证提前发现重新赋值导致的 bug。

全局变量与顶层对象

顶层对象：在浏览器环境中，顶层对象指的是 window；在 Node 环境中，顶层对象指的是 global。

ES5 中，使用 var 声明的全局变量会成为 [顶层对象] 的属性：

var a = 1;
console.log(window.a); // 1

ES6 中，使用 let 、const 声明的全局变量、全局常量不再会成为 [顶层对象] 的属性：

let a = 1;
console.log(window.a); // undefined

特殊的全局变量：没有使用关键字声明的变量，会被自动绑定到顶层对象上。

function fn() {
    a = 1; // 全局变量 a
}

fn(); // 调用函数, 全局变量 a 开始生效;  注意: 在函数里面, 不调用则不会生效
console.log(a); // 输出全局变量值 1

在写连续赋值操作时要注意，后面的变量没有显式声明 会成为一个全局变量：

function text() {
    var a = (b = 123); // b 没有显式声明, 式子会先把值 123 赋给 b, 再赋给 a
    console.log(a, b); // 123 123
}
text(); // 调用函数, 全局变量 b 开始生效
console.log(window.b); // 123

上例正确的写法应该是先一起声明再一起赋值：

function text() {
    var a, b; // 先一起声明
    a = b = 123; // 再一起赋值
    console.log(a, b);
}
text();
console.log(window.b); // undefined

面试题解

如果使用 var 实现事件的批量绑定，会出问题：

<body>
    <button>a</button>
    <button>b</button>
    <button>c</button>
</body>

<script>
    // 获取所有的 button 标签
    const allButton = document.querySelectorAll('button');

    // 批量绑定事件
    for (var i = 0; i < allButton.length; i++) {
        allButton[i].onclick = () => {
            console.log(i);
        };
    }
</script>

此时我们点击任意 button 标签，会发现，所有打印结果都是 3。这是因为，事件是异步操作。JS 会先走完同步代码，再执行异步操作的回调函数。所以，执行异步操作时，同步操作 for 循环已经走完了，此时 i 为 3。

解决方法 ①：在绑定事件函数时，将需要用到的值，以属性的形式存储起来。需要用到时再取出：

for (var i = 0; i < allButton.length; i++) {
    allButton[i].id = i;
    allButton[i].onclick = function () {
        console.log(this.id);
    };
}

解决方法 ②：使用 IIEF 添加一层作用域。在事件函数执行时，就会获取到对应作用域内的数值：

for (var i = 0; i < allButton.length; i++) {
    (function (j) {
        allButton[j].onclick = () => {
            console.log(j);
        };
    })(i);
}

解决方法 ③：使用 let 实现事件的批量绑定。因为 let 拥有块级作用域：

for (let i = 0; i < allButton.length; i++) {
    allButton[i].onclick = () => {
        console.log(i);
    };
}

注意：因为 let 拥有块级作用域，所以在 for 循环内，{ .. } 中的变量会覆盖 ( .. ) 中的同名变量。

for (let i = 0; i < 10; i++) {
    let i = 10;
    console.log(i); // 会打印 10 个 10
}