块作用中的域

        尽管函数作用域是最常见的作用域单元，当然也是现行大多数JavaScript中最普遍的设计方法，但其他类型的作用域单元也是存在的，并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀、简介的代码。

        除JavaScript外的很多编程语言都支持块作用域，因此其他语言开发者对于相关的思维方式会很熟悉，但是对于主要使用JavaScript的开发者来说，这个概念会很陌生。

        尽管你可能连一行带有块作用域风格的代码都没写过，但对下面这种很常见的JavaScript代码一定很熟悉：

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

        我们在for循环的头部直接定义了变量i，通常是因为只想在for循环内部的上下文中使用i，而忽略了i会被绑定在外部作用域（函数或全局）中的事实。

        这就是块作用域的用处。变量的声明应该距离使用的地方越近越好，并最大限度地本地化。另外一个例子。

var foo = true;if(foo){  var bar = foo * 2;  bar = something(bar);  console.log(bar);}

        bar变量仅在if声明的上下文中使用，因此如果能将它声明在if块内部中会是一个很有意义的事情。但是，当使用var声明变量时候，它写在哪都是一样的，因为他们最终都会属于外部作用域。这段代码是为了风格更易读而伪装出的形式上的块作用域，如果使用这种形式，要确保没在作用域其他地方意外地使用bar只能依靠自觉性。

        块作用域是一个用来对之前的最小授权原则进行扩展的工具，将代码从在函数中隐藏信息扩展为在块中隐藏信息。【这段话确实拗口，简单点说就是扩大了原来的作用域】

        再次考虑for循环的例子：

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

        为什么要把一个只在for循环内部使用（至少是应该只能在内部使用）的变量i污染到整个函数作用域中呢？

        更重要的是，开发者需要检查自己的代码，避免在作用范围意外地使用（或复用）某些变量，如果在错误的地方使用变量将导致未知变量的异常。变量i的块作用域（如果存在的话）将使只能能在for循环内部使用，如果在函数中其他地方使用会导致错误。这对保证变量不会被混乱地复用及提升代码的可维护性都有很大帮助。

        但可惜，表面上看JavaScript并没有块作用域的相关功能。除非你更加深入地研究。

with

        我们在之前讨论过with关键字。它不仅是一个难以理解的结构，同时也是块作用域的一个例子（块作用域的一种形式），用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效。

try/catch

        非常少有人会注意到JavaScript的ES3规范中规定try/catch的catch分句会创建一个块作用域，其中声明的变量仅在catch内部有效。

例如：

try{  undefined(); // 执行一个非法操作来强制制造一个异常}catch(err){  console.log(err); // 能够正常执行！}
console.log(err); // ReferenceError: err not found

        正如你所看到的，err仅存在catch分句内部，当试图从别处引用它时会抛出错误。

        尽管这个行为已经被标准化，并且被大部分的标准JavaScript环境（除了老版本的IE浏览器）所支持，但是当同一个作用域中的两个或多个catch分句用同样的标识符名称声明错误变量时，很多静态检查工具还是会发出警告。实际上这并不是重复定义，因为所有变量都被安全的限制在块作用域内部，但是静态检查工具还是会很烦人的发出警告。

        为了避免这个不必要的警告，很多开发者会将catch的参数声明为err1、err2等。也有的开发者干脆关闭了静态检查工具对重复变量名的检查。

        也许catch分句会创建块作用域这件事看起来像教条的学院理论一样没什么用处，但是在实际项目中，还是很有用的。

let

        到目前为止，我们知道JavaScript在暴露块作用域的功能中有一些奇怪的行为。如果仅仅是这样，那么JavaScript开发者多年来也就不会将块作用域当作非常有用的机制来使用了。

        幸好，ES6改变了现状，引入了新的let关键字，提供了除var以外的另一种变量声明方式。

        let关键字可以将变量绑定到所在的任意作用域中（通常是{…}内部）。换句话说，let为其声明的变量隐式地劫持了所在的块作用域。

var foo = true;if(foo){  let bar = foo * 2;  bar = something(bar);  console.log(bar);}
console.log(bar); // ReferenceError

        用let将变量附加在一个已经存在的块作用域上的行为是隐式的。在开发和修改代码过程中，如果没有密切关注哪些块作用域中有绑定的变量，并且习惯性地移动这些块或者将其包含在其他的块中，就会导致代码变得混乱。

        为块作用域显式地创建块可以部分解决这个问题，使变量的附属关系变得更加清晰。通常来讲，显式的代码优于隐式或一些精巧但不清晰的代码。显式的块作用域风格非常容易书写，并且和其他语言中的块作用域的工作原理一致：​​​​​​​

var foo = true;if(foo){  { // 显式的块    let bar = foo * 2;    bar = something(bar);    console.log(bar);  }}
console.log(bar); // ReferenceError

        只要声明是有效的，在声明中的任意位置都可以使用{…}括号来为let创建一个用于绑定的块。在这个例子中，我们在if声明内部显式地创建了一个块，如果需要对其进行重构，整个块都可以方便地移动而不会对外部if声明的位置和语义产生任何影响。【这里涉及到后期代码的重构和维护】

        在后面的文章中，我们会继续讨论提升，提升式指声明会被视为存在于其所出现的作用域的整个范围内。

        但是使用let进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不“存在”。​​​​​​​

{
        ​​​​​​​console.log(bar); // ReferenceError!
        let bar = 2;
}

1、垃圾收集

        另一个块作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。

        这里简要说明一下，而内部的实现原理，也就是闭包的机制，会在后面的文章中详细解释。

考虑以下代码：

function process(data){  // 在这里做点有趣的事情}var someReallyBigData = {…};process(someReallyBigData);var ban = document.getElementById(“my button”);btn.addEventListener(‘click’,function click(evt){  console.log(‘button clicked’)})

        click函数的点击回调并不需要someReallyBigData变量。理论上这意味着当process(…)执行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于click函数形成了一个覆盖整个作用域的闭包，JavaScript引擎极有可能依然保存着这个结构（取决于具体实现）。

        块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存someReallyBigData了：​​​​​​​

function process(data){// 在这里做点有趣的事情  }// 在这个块中定义的内容完事可以销毁！{  let someReallyBigData = {…}}var btn = document.getElementById(‘my button’);btn.addEventListener(‘click’,function(evt){  console.log("button clicked");})

        为了变量显式声明块作用域，并对变量进行本地绑定是非常有用的工具，可以把它添加到你的代码工具箱中了。

2、let循环

        一个let可以发挥优势的典型例子就是之前讨论的for循环。​​​​​​​

for(let i=0;i<10;i++){  console.log(i);}
console.log(i); // ReferenceError

        for循环头部的let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值。

        下面通过另一种方式来说明每次迭代时进行重新绑定的行为：​​​​​​​

{  let j;  for(j=0;j<10;j++){    let i = j; // 每个迭代重新绑定！    console.log(i)  }}​​​​​​​

        每个迭代进行重新绑定非常有趣，我们会在后续讨论闭包的时候进行说明。

        由于let声明附属于一个新的作用域而不是当前的函数作用域（也不属于全局作用域），当代码中存在对于函数作用域中var声明的隐式依赖时，就会有很多隐藏的陷阱，如果用let来替代var则需要在代码重构过成功付出额外的精力。

        考虑以下代码：​​​​​​​

var foo = true,baz = 10;if(foo){  var bar = 3;  if(baz > bar){    console.log(baz);  }}

        这段代码可以简单地被重构成下面的同等形式：​​​​​​​

var foo = true,baz = 10;if(foo){  var bar = 3;}if(baz > bar){  console.log(baz);}

        但是在使用块级作用域的变量时需要注意以下变化：​​​​​​​

var foo = true,baz = 10;if(foo){  let bar = 3;  if(baz > bar){ // 移动代码时不要忘了bar    console.log(baz)  }}

const

        除了let以外，ES6还引入了const，同样可以用来创建块作用域变量，但其值是固定的（常量）。之后任何试图修改值的操作都会引起错误。​​​​​​​

var foo = true;if(foo){  var a = 2;  const b = 3; // 包含在if中的块作用域常量  a = 3; // 正确  b = 4; // 错误}
console.log(a); // 3【变量a是通过var声明的，在全局作用域上】console.log(b); // ReferenceError【变量b是通过const声明的，在if花括号内块作用域】

大家可以扫描二维码，关注我的微信公众号，蜗牛全栈。