ES6新增let、const关键字详解与var的区别

一、let、const的基本使用

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

let关键字：

• 从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量

const关键字：

• const关键字是constant的单词的缩写，表示常量、衡量的意思；
• 它表示保存的数据一旦被赋值，就不能被修改；
• 但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；

注意：let、const不允许重复声明变量；

代码示例：

var foo = "foo"
let bar = "bar"

// const constant(常量/衡量)
const name = "abc"
name = "cba" // 报错

// 注意事项一: const本质上是传递的值不可以修改
// 但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
const obj = {
  foo: "foo"
}

obj = {} // 报错
obj.foo = "aaa"
console.log(obj.foo)


// 注意事项二: 通过let/const定义的变量名是不可以重复定义
var foo = "abc"
var foo = "cba"

let foo = "abc"
// SyntaxError: Identifier 'foo' has already been declared
let foo = "cba" 

console.log(foo)

二、let/const 与 var的区别

作用域提升

定义：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；

1.区别一：

• let 和 const 没有作用域提升

        let、const没有进行作用域提升，但是会在解析阶段被创建出来

        代码示例:

其实foo已经被创建，只是不能够访问

console.log(foo) // Reference(引用)Error: Cannot access 'foo' before initialization(初始化)
let foo = "foo"

这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值

2.区别二：

let-const与Window的关系：

在全局通过var来声明一个变量，事实上会在window上添加一个属性，但是let、const是不会给window上添加任何属性的

最新的ECMA标准中对执行上下文的描述 ：

变量被保存到VariableMap中 ：

也就是说我们声明的变量和环境记录是被添加到变量环境中的：

在早期,用var声明的变量是保存到go，而go也就是window

但现在，在v8引擎中，全局执行上下文已经不是VO对象了，而是VE，而且用let/const声明的函数是保存到variables_: VariableMap中

3.区别三：

ES5没有块级作用域，ES6有块级作用域

ES5中的作用域：

全局作用域和函数作用域

代码示例：

// ES5中没有块级作用域
// 块代码(block code)
{
  // 声明一个变量
  var foo = "foo"
}

console.log(foo) // foo

ES6的块级作用域：

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：

// ES6的代码块级作用域
// 对let/const/function/class声明的类型是有效
{
  let foo = "kk"
  function demo() {
    console.log("demo function")
  }
  class Person {}
}

// console.log(foo) // foo is not defined
// 不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
// demo()
var p = new Person() // Person is not defined

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的： 这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升；

if-switch-for都是块级作用域：

if(true) {
  var i = 0
  let j = 1
}
console.log(i); // 0
console.log(j); // ReferenceError: j is not defined

switch(color) {
  case 'red': 
    var i = 0
    let j =1
}
console.log(i); // 0
console.log(j); // ReferenceError: j is not defined

for(var i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 可以访问

for(let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 不可以访问