JS提升篇：var、let 和const的区别

前言

虽然在面试资料里，这个知识点多次出现，但是每次看了之后，没过多久就又会忘记了，归根结底还是自己理解得不到位。所以将这部分知识点在这里做个总结，帮助自己理解和记忆。

1、块级作用域

块作用域由 { } 包括，let和const具有块级作用域，var不存在块级作用域。

if(1){
    var a = 100;
    let b = 10;
    const c = 1;
}

console.log(a); // 100
console.log(b);  // 报错：b is not defined  ===> 找不到b这个变量
console.log(c);  // 报错：c is not defined  ===> 找不到c这个变量

块级作用域解决了ES5中的两个问题：

• 内层变量可能覆盖外层变量
• 用来计数的循环变量泄露为全局变量

2、变量提升

var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
var a = 100;

console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
let b = 10;

console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
const c = 10;

再来看这段代码

function fn() {
   //var a
    if (true) {
        console.log(a + ' now');
    }
    else {
        var a = 1;
        console.log(2);
    }
}

fn(); // a -> undefined

我们发现不执行的代码也会影响会执行的代码，因为var a会提升到if语句的前面。

在Java中变量的分为全局变量（成员变量）或者局部变量，在方法体中定义的变量都是局部变量，否则是全局变量（即在方法体外，在类中定义的变量）。

在JavaScript中，在方法体外外用var定义的变量其它方法可以共享，在方法中用var定义的变量只有该方法内生效。

3、给全局添加属性

浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，同时会将该变量添加为全局对象的属性，但是let和const就不会。

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined

4、重复声明

var声明变量时，可以重复声明变量，const和let不能重复声明。

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

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

let b = 100;
let b = 10;
//  控制台报错：Identifier 'b' has already been declared  ===> 标识符a已经被声明了。

5、暂时性死区

如果块级作用域内存在let、const命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。在代码块内，使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。

var a = 100;

if(1){
    a = 10;
    // 在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

当前作用域顶部到该变量声明位置中间的部分，都是该变量的死区，在死区中，禁止访问该变量。“暂时性死区”也意味着typeof不再是一个百分之百安全的操作，因为会使typeof报错。

{
  typeof name; // ReferenceError
  let name;
}

6、初始值设置

在变量声明时，var 和 let 可以不用设置初始值，而const声明变量必须设置初始值，不能使用null占位。

const a; // 控制台报错：SyntaxError: Missing initializer in const declaration

7、指针指向

let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值），但const声明的变量是不允许改变指针的指向(只能进行一次赋值，即声明后不能再修改)。

const a = 1;
a = 2; // 控制台报错：TypeError: Assignment to constant variable.

注意：

实际上，const保证的并不是变量的值不得改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

但对于引用类型的数据（主要是对象和数组），变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

const obj = {a:100}; // 对象
obj.name = 'apple';
obj.a = 10000;
console.log(obj); // {a:10000,name:'apple'}

const list = []; // 数组
list[0] = 10;
console.log(list); // [10]

拓展：

面试题

for (let i = 0; i < 5; i++) {
    console.log(i)
}

上面的代码我们知道打印结果是 0, 1, 2, 3, 4，但是你们有没有想过这个变量i的作用域到底是什么呢？

有人说在这个for循环里呀，但是我这里想说的是这个i作用域是在括号()里。正常的代码是这样的：

1. 首先这个变量_i的作用域是在()里才有效的，循环体里是不能访问到_i的
2. 每次循环的时候创建一个i变量，将括号里的_i赋值到变量i上
3. 最后i++后再将变量i的值赋值回_i上

当然这个过程是很复杂的，可以用下面代码理解，但是JS的实现机制是很复杂的，这里想要说明的let i的作用域有时候并不是我们所理解的那样的。

for (let _i = 0; i < 5; i++) {
    let i = _i
    console.log(i)
    // i++ 先做
    _i = i
}

来源：CSDN、 简书、 博客园