深入理解ES6系列笔记之第一章《块级作用域绑定》

块级作用域绑定

本文仅仅作为前端实习面试的笔记内容，因此不能完全保证内容正确性，如有错误，欢迎指正！

---

• var声明及变量提升(Hoisting)机制
  在函数作用域或者全局作用域通过关键字var声明的变量，无论实际上在哪里声明，都会被当作当前作用域顶部声明的变量。

function getValue (condition) {
  if (condition) {
    var value = 'blue'
    // other operations

    return value
  } else {
    // 此处可以访问value变量，其值为undefined
    return null
  }
  // 此处可以访问value变量，其值为undefined
}

在预编译阶段，JavaScript引擎会将上面代码修改成下面这个样子

function getValue (condition) {
    var value
    if (condition) {
      value = 'blue'
      // other operations
  
      return value
    } else {
      // 此处可以访问value变量，其值为undefined
      return null
    }
    // 此处可以访问value变量，其值为undefined
}

可以看到，变量value的声明提升到目前函数作用域的顶部，初始化操作仍在原来位置。所以在else和之后的代码块中都可以访问到value，但是由于没有初始化，因此为undefined。关于这块内容，如果想要详细了解，可以阅读《你不知道的JavaScript上卷》。

• 块级声明
  先得了解块级作用域，在许多类C语言中都存在这种块级作用域，块级作用域存在于
  • 函数内部
  • 块中({}包括的范围)
    定义在块级作用域内部的变量，外部无法访问。

1. let声明
   用let来声明变量，就可以将变量的作用域限制在当前的代码块中，因此相当于给JavaScript添加了一个块级作用域。

function getValue (condition) {
  if (condition) {
    let value = 'blue'
    // other operations

    return value
  } else {
    // 此处不可以访问value变量
    console.log(value)
    return null
  }
  // 此处不可以访问value变量
}

getValue(0)

通过结果可以看出执行流离开if块，value就会销毁，如果condition一开始就为false，就不会声明并初始化value变量，所以错误显示为value is not defined。
2. 禁止重声明
假设当前作用域已经声明了某个标示符，此刻再使用let关键字进行声明就会出错

var num1 = 20
var num1 = 30

var count = 100
let count = 200

通过对比可以看出，多次声明var变量不会造成错误。但是对于已经声明的变量，再次用let声明就会报错。同理可以想到如果已经使用let声明的变量，再次用let声明也会导致错误。
但是需要注意上面指出了在同一个作用域重复定义会导致错误，但是在不同作用域重复声明相同变量不会出错

var count = 30

if (condition) {
  // 此处不会出错，因为二者在不同作用域当中
  let count = 40
}

3. const声明

• const声明通过名称可以看出是用来声明常量的，因此在声明常量时必须进行初始化操作。
• const和let声明的都是块级标识符
• 和let类似，在同一作用域用const声明已经存在的标识符会导致语法错误。
  以上内容不难理解，其中const声明的变量需要注意的一个点是
  不管在严格模式还是非严格模式，都不可以为const定义的常量再赋值，否则就会抛出错误。但是对于const定义的常量对象，可以修改对象的属性值，但是不允许修改绑定

const maxItems = 5
maxItems = 6

const person = {
  name: 'tangsong'
}

person.name = 'yuanmingqing'

person = {
  name: 'yuanmingqing'
}

通过结果可以看出，直接修改常量对象的值，并没有导致绑定改变，因此没有出错。但是改变绑定直接导致出错。
4. 临时死区
JavaScript引擎扫描代码发现变量声明时，会将var变量提升至作用域顶部，遇到const和let声明会将其放在临时死区中，访问临时死区的变量会导致错误，只有执行变量声明语句之后，变量才能从临时死区中移出。

console.log(typeof value1)
console.log(typeof value2)
var value1 = 20
let value2 = 30

• 循环中的块作用域绑定

1. 循环中的函数

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}

funcs.forEach(function (func) {
  func()
})

因为循环内部创建的函数全部都保留了对相同变量的引用，所以会输出10个10。可以通过借助立即执行表达式(IIFE)来解决这类问题。想要了解更多IIFE的内容，同样可以看《你不知道的JavaScript上卷》

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push((function (value) {
    return function () {
      console.log(value)
    }
  }(i)))
}

funcs.forEach(function (func) {
  func()
})

在这个循环内部，IIFE表达式为接受的每一个参数变量i都创建一个副本value存储。因此调用每个函数会输出从0到9。
2. 循环中的let声明
利用let可以模仿IIFE从而达到相同的效果，因为每次循环迭代都会创建一个新变量，并以之前迭代中同名变量的值来初始化它

var funcs = []

for (let i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}

funcs.forEach(function (func) {
  func()
})

for-in循环表现的和for循环行为一致。如果使用var，那么就会输出三个c

var funcs = []
var object = {
  a: true,
  b: true,
  c: true
}

for (let key in object) {
  funcs.push(function () {
    console.log(key)
  })
}

funcs.forEach(function (func) {
  func()
})

3. 循环中的const声明

var funcs = []

for (const i = 0; i < 10; i++) {
  funcs.push(function () {
    console.log(i)
  })
}

funcs.forEach(function (func) {
  func()
})

这种情况下会直接出错，迭代操作末尾执行i++，因为i是const常量，因此直接出错。

var funcs = []
var object = {
  a: true,
  b: true,
  c: true
}

for (const key in object) {
  funcs.push(function () {
    console.log(key)
  })
}

funcs.forEach(function (func) {
  func()
})

输出情况和使用let相同，因为每次迭代会创建一个新的绑定，而不会修改原有的绑定。

• 全局块作用域绑定
  使用var声明的全局对象会覆盖全局属性
  使用let和const声明的全局对象不会覆盖全局属性，仅仅是遮蔽
• 块级绑定最佳实践的进化
  默认使用const，只有在确实需要改变变量的值时使用let