一文大白话讲清楚ES6中var/let/const之间的区别与联系

一文大白话讲清楚ES6中var/let/const之间的区别与联系

1.还是那句话，黑猫白猫都是抓老鼠的

• 不管是ES6之前的var，还是ES6之后的let和const，都是用来创建数据变量的，这个无可厚非
• 不同JavaScript数据变量的，看我这篇文章 最全的javascript的基本数据类型和引用数据类型讲解，以及基本数据类型和引用数据类型在存储上的区别

2.黑猫是黑的，白猫是白的

• 既然都是创建变量的，那有啥区别呢，看下文

2.1 变量提升

• var创建的变量存在变量提升，即在变量声明之前就可以调用变量，值为undefined
• let 和 const 创建的变量不存在变量提升，如果在声明前引用，直接报错
• 上代码

console.log(aOfVar)//undefined
var aOfVar=5

console.log(aOfLet)
let aOfLet=6;// Cannot access 'aOfLet' before initialization

console.log(aOfConst)// Cannot access 'aOfLet' before initialization
const aOfConst=7

• 有人问了，为啥var会做变量提升呢，什么时候提升的呢
• 在执行上下文创建阶段的时候做的提升，具体看我这篇文章 一文大白话讲清楚执行上下文和执行栈

2.2 暂时性死区

• 啥叫暂时性死区，其实说的跟2.1是一回事，暂时性死区就是只有等待变量声明的那一行代码被执行，才可以获取和使用变量。
• 那let和const肯定存在暂时性死区
• var肯定不存在，因为他提升了，所以没到执行变量声明行，就可以访问，只不过值为undefined

2.3 块级作用域

• 先说啥叫块级作用域，就是用{}包起来的区域，该区域内的变量只能在该区域使用
• var 不存在块级作用域
• let和const存在块级作用域

{
    var aOfVar=5
}
console.log(aOfVar)//5


{
    let aOfLet=6
}
console.log(aOfLet)// aOfLet is not defined


{
    const aOfConst=7
}

console.log(aOfConst)// aOfLet is not defined

2.4 重复声明

• var 允许重复生命两个同名变量
• let和const不可以

var aOfVar=5
var aOfVar=55
console.log(aOfVar)//55


let aOfLet=6.
let aOfLet=66// Identifier 'aOfLet' has already been declared

const aOfConst=7
const aOfConst=77// Identifier 'aOfLet' has already been declared

2.5 变量值修改

• var和let的变量值可以修改
• const变量的值不可以修改

var aOfVar=5
aOfVar=55
console.log(aOfVar)//55


let aOfLet=6.
aOfLet=66
console.log(aOfLet)//66

const aOfConst=7
aOfConst=77//  Assignment to constant variable.

2.6 window绑定

• var定义的变量会被绑定在window对象上
• 而let和const不会

    var aOfVar=5
    console.log(window.aOfVar)//55


    let aOfLet=6.
    console.log(window.aOfLet)//undefined

    const aOfConst=7
    console.log(window.aOfConst)//undefined