前端开发之JavaScript的var,let,const和块级作用域

---

前言

ES5 中，使用 var 定义全局变量（ var 是 variable 的简写）。

ES6 中，新增了 let 和 const 来定义变量：

• let：定义局部变量，替代 var。

• const：定义常量（定义后，不可修改）。

---

1.var：定义全局变量(无论在哪写都是全局变量，即使是for循环写var i)

看下面的代码：

{
    var a = 1;
}

console.log(a); //这里的 a，指的是 区块 里的 a

上方代码是可以输出结果的，输出结果为 1。因为 var 是全局声明的，所以，即使是在区块里声明，但仍然在全局起作用。

也就是说：使用 var 声明的变量不具备块级作用域特性。

再来看下面这段代码：

var a = 1;
{
    var a = 2;
}

console.log(a); //这里的 a，指的是 区块 里的 a

上方代码的输出结果为 2 ，因为 var 是全局声明的。

总结:js中用var可能会污染作用域，如今的实战中，基本都是用的 ES6 语法，所以请尽量避免使用 var 定义变量。

---

2.ES6语法:  let(相当于局部变量)

let：定义局部变量

举例 1：

{
    let a = 'hello';
}
console.log(a); // 打印结果报错：Uncaught ReferenceError: a is not defined

上方代码，打印报错。

举例 2：

var a = 2;
{
    let a = 3;
}

console.log(a); // 打印结果：2

通过上面两个例子可以看出，用 let 声明的变量，只在局部（块级作用域内）起作用。

1、用 var 声明变量：

for (var i = 0; i < 10; i++) {
    console.log('循环体中:' + i);
}

console.log('循环体外:' + i);

上方代码可以正常打印结果，且最后一行的打印结果是 10。说明循环体外定义的变量 i，是全局作用域下的 i。

2、用 let 声明变量：

for (let i = 0; i < 10; i++) {
    console.log('循环体中:' + i); // // 每循环一次，就会在 { } 所在的块级作用域中，重新定义一个新的变量 i
}

console.log('循环体外:' + i);

上方代码的关键在于：每次循环都会产生一个块级作用域，每个块级作用域中会重新定义一个新的变量 i。

另外，上方代码的最后一行无法打印结果，也就是说打印会报错。因为用 let 定义的变量 i，只在{ }这个块级作用域里生效。

总结：我们要习惯用 let 声明，减少 var 声明带来的污染全局空间。

为了进一步说明 let 不会带来污染，需要说明的是：当我们定义了let a = 1时，如果我们在同一个作用域内继续定义let a = 2，是会报错的。

---

3、const：定义常量

在程序开发中，有些变量是希望声明后，在业务层就不再发生变化，此时可以用 const 来定义常量。常量就是值（内存地址）不能变化的量。

举例：

const name = 'smyhvae'; //定义常量

用 const 声明的常量，只在局部（块级作用域内）起作用；而且，用 const 声明常量时，必须赋值，否则报错。

---

4.let 和 const 的特点【重要】

• 不属于顶层对象 Window

• 不允许重复声明

• 不存在变量提升

• 暂时性死区

• 支持块级作用域

相反， 用var声明的变量：存在变量提升、可以重复声明、没有块级作用域。

5.var/let/const 的共同点

• 全局作用域中定义的变量，可以在函数中使用。

• 函数中声明的变量，只能在函数及其子函数中使用，外部无法使用。

---

补充知识

暂时性死区 DTC

ES6 规定：使用 let/const 声明的变量，会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。

也就是说，在使用 let/const 声明变量时，变量需要先声明，再使用（声明语句必须放在使用之前）。这在语法上，称为 “暂时性死区”（ temporal dead zone，简称 TDZ）。

DTC 其实是一种保护机制，可以让我们养成良好的编程习惯。

代码举例：

const name = 'qianguyihao';

function foo() {
    console.log(name);
    const name = 'hello';
}

foo(); // 执行函数后，控制台报错：Uncaught ReferenceError: Cannot access 'name' before initialization

ES5 中如何定义常量

ES5中有Object.defineProperty这样一个api，可以定义常量。这个API中接收三个参数。

代码举例：

// 定义常量 PI
Object.defineProperty(window, 'PI', {
    value: 3.14,
    writable: false,
});

console.log(PI); // 打印结果：3.14
PI = 6; //尝试修改常量
console.log(PI); //打印结果：3.14，说明修改失败