块级作用域

定义

作用域规则，定义了变量查找规则，就像在高楼中查房，先查所在楼层，找不到时到上一层查，直到最顶层即全局作用域。

块级作用域，指的是一个语句结束后其内部变量销毁。

JS 中的作用域

但是，在JS中，作用域是在函数体内。注意 if 语句不是函数，所以没有单独作用域

function outputNumbers(count) {
  for (var i = 0; i < count; i++) {
    alert(i);
  }
  alert(i);   // 计数
}

重新声明会被忽视，且不会改变它的值。

function outputNumbers(count) {
  for (var i = 0; i < count; i++) {
    alert(i);
  }
  var i;
  alert(i);   // 计数
}

模拟

如何解决上述问题呢？用匿名函数模拟块级作用域，变量只在这个大的语句内有效。 这里是一种 hack，因为目的并不是要创建一个函数，只是借助函数生成块级作用域

(funciton(){
  // 块级作用域
})()

第一对圆括号是干嘛的？能省略吗？

funciton(){
  // 块级作用域
}()  // 报错

因为在JS中 function 作为关键字开头，表示函数，后面不能接圆括号。

var someFunction = funciton(){
  // 块级作用域
}
someFunction();

这段代码的含义是创建一个匿名函数，然后将其赋值给变量someFunction

ES6

大括号内声明的let const function，都是块内有效

let i = 1
{
  let i = 2
  console.log(i)
}
console.log(i)

何时使用

无论在什么地方，只要临时需要一些变量

// 为什么把 var 换成 let，就能正常打印 1-9 了
// 因为 var 没有块级作用域，setTimeout 中的函数是另外一个作用域，执行时 i 已经循环完，打印 10
// 改成 let 后，保持在作用域内有效
for(let i = 0; i < 10; i += 1) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}