JS 基础篇(九)：var、let、const的区别

在JS中，定义变量的方法有var、let、const 三种方式。下面我们一一介绍他们之间的区别。

一、var定义

1、“var”处理所有变量声明，不管在哪里声明，最后都会在函数作用域顶端（如果在函数内部声明）或则在全局作用域顶端（在函数外部声明），即变量提升。

console.log(varDemo1); //underfined 并不会报错
if(true){
    var varDemo1 = "this is var";
    console.log(varDemo1);//this is var
} 

2、在JS函数中的var声明，其作用域是函数体的全部。

if(true){
    var varDemo1 = "this is var";
    console.log(varDemo1);//this is var
}    
console.log(varDemo1);//this is var

如上代码所示：即使已经跳出了if判断，但是在外面我们还是能够访问到变量varDemo1。（感觉这很不合理！）

3、循环内变量过度共享

for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }
// 输出为：3 3 3

循环本身及三次 timeout 回调均共享唯一的变量 ** i 。当循环结束执行时，i 的值为3。所以当第一个 timeout 执行时，调用的 i 当让也为 3 了。

二、let定义

对于var定义的变量所表现出来的3个特点，感觉完全就是bug啊！幸好有let定义变量的方式，它完全解决了var定义变量的所有问题！

1、let声明的变量，不会“表现”出变量提升。(具体请了解let的暂时性死区问题)。

console.log(letDemo1); //报错:letDemo1 is not defined
if(true){
    let letDemo1 = "this is let";
    console.log(letDemo1);//this is let
}  

2、let声明的变量拥有块级作用域。

if(true){
    let letDemo1 = "this is let";
    console.log(letDemo1);//this is let
}    
console.log(letDemo1);//报错:letDemo1 is not defined

3、形如for (let x...)的循环在每次迭代时都为x创建新的绑定。

for (let i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }
//输出为:0 1 2

4、let声明的全局变量不是全局对象的属性。你不可以通过window.变量名的方式访问这些变量。它们只存在于一个不可见的块的作用域中。

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

let b = 456;
console.log(window.b);//underfined

5、用let重定义变量会抛出一个语法错误

let c = "123";
let c = "456"; 
//报错

三、const定义

const 就是用来定义常量的。
1、声明的时候要直接赋值，只声明不赋值报错。

const PI; //报错

2、重复声明变量报错。

const PI = 3.14;
const PI = 5; //报错  

3、给变量重新赋值报错。

const PI = 3.14;
PI = 5; //报错