ES2015已定稿一年多了，想必人人早就用上let和const来充分应用块作用域的上风了吧？那末，你们晓得块作用域都是怎样声明的吗？

在种种教程材料的例子里，块作用域都是涌现在for(……){……}/if(……){……}/while(……){……}这些语句里的，那你有无想过，块作用域实在跟这些逻辑掌握语句完整没有关系？

前置学问

本文须要有块作用域以及let / const相干学问，若有短缺，请看这里。

块作用域的标识

块作用域的标识实际上是那一对大括号{}，换句话说，我们不须要任何逻辑掌握语句就可以直接运用大括号来建立块作用域：

var a = 2;
{
  let a = 3;
}
console.log(a); // 输出2

块作用域的隐式声明

置信人人平常都不会直接用大括号来建立块作用域，而是像下面这个例子来运用：

var a = 2;
var b = 2;
var c = 0;
if (a === b) {
  let c = 2;
  a ++;
  b -= c;
}
console.log(a); // 3
console.log(b); // 0

你可以注意到，这段代码里定义了两个变量c，这偶然并非有意反复起名为c，而是前面一大堆代码，基础不晓得变量名c已被用掉了。尽管如此，由于块作用域的原因，这段代码照样可以安全地运转。

但假如这段代码由他人接办，而他又急于改需求呢，那极可以就会涌现以下这类状况：

var a = 2;
var b = 2;
var c = 0;
if (a === b) {
  let c = 2;
  a ++;
}
b -= c;
console.log(a); // 3
console.log(b); // 2

需求是如许改的：不须要推断a === b就实行b -= c;了。此时，这段代码在运转时也不会报错（由于前面早已定义有了一个同名变量c），但效果却出错了，而且每每这类毛病还不轻易发明。

块作用域的显式声明

怎样防止上述问题呢？答案是：应用分外的一对大括号来做块作用域的显式声明。

我们试着用块作用域的显式声明来修正上述代码：

var a = 2;
var b = 2;
var c = 0;
if (a === b) {
  { // 运用大括号来包裹住块作用域变量相干的代码块
    let c = 2;
    b -= c;
  }
  a ++; // 操纵的都是块作用域外部就定义好的变量，剔除在大括号之外
}
console.log(a); // 3
console.log(b); // 0

看着有点别扭是吧？没紧要，我们看看按需求修正后的代码：

var a = 2;
var b = 2;
var c = 0;
if (a === b) {
  a ++;
}

{
  let c = 2;
  b -= c;
}

console.log(a); // 3
console.log(b); // 0

duang!

爸爸妈妈再也不必忧郁我重构代码的时刻出一大堆bug了！

总结

块作用域的显式声明实际上是主动分离隔接收块作用域治理的let / const变量和不接收块作用域治理的var变量，从而协助我们在重构代码时，能更轻松、更放心肠搬动代码。

本文首发于
Array_Huang的手艺博客——
有用至上，非经作者赞同，请勿转载。

原文地点：
https://segmentfault.com/a/1190000007639527