作用域（五）——块作用域

尽管函数作用域是最常见的作用域单元，当然也是现行大多数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(); // 执行一个非法操作来强制制造一个异常【当然，这种情况也可以通过throw new Error(‘错误信息’)来实现】
}catch(err){
  console.log(err); // 能够正常执行！
}

console.log(err); // ReferenceError:err not found

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

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

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

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;
}

在这，小编添加一个区别于let关键字，用var声明变量的对比

{
  console.log(bar); // undefined
  var bar = 2;
}
console.log(bar); // 2
console.log(window.bar); // 2

垃圾收集

另一个块作用域非常有用的恶原因和闭包及回收内存垃圾的回收机制相关。这里简要说明一下，内部的实现原理，会在以后的文章中更新。

考虑以下代码：

function process(data){
  // 在这里做点有趣的事情
}
var someReallyBigData = {…};

process(someReallyBigData);
var btn = document.getElementById(‘mybutton’);

btn.addEventListener(‘click’,function click(evt){
  console.log(‘button clicked’);
})

click函数的点击回调并不需要someReallyBigData变量。理论上这意味着当process函数执行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于click函数形成了一个覆盖整个作用域的闭包，JavaScript引擎极有可能依然保存着这个结构（取决于具体实现）。【在小编看来，这样会造成空间的浪费，也造成了后续其他修改这个变量修改，造成数据的不一致。严格一点看，这个数据是引用类型，还要考虑深浅拷贝的问题】

function process(data){
  // 这里做点有趣的事情
}
// 在这个块定义的内容完事可以销毁！

{
  let someReallyBigData = {…};
  process(someReallyBigData);
}

var btn = document.getElementById(‘mybutton’);
btn.addEventListener(‘click’,function click(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绑定到了循环的块中，实际上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值。

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

{
  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(bar > bar){
    console.log(baz);
  }
}

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

// 三个变量都被注册到全局window上
var foo = true,baz = 10;
if(foo){
  var bar = 3;
}
// 睁大眼睛，区别就在这】
if(baz > bar){
  console.log(baz);
}

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

// 现在全局只有foo和baz两个变量。
var foo = true,baz = 10;
if(foo){
  let bar = 3;
  if(baz > bar){ // 移动代码时不要忘了bar
    console.log(baz);
  }
}

3.4.4 const

除了let以外，ES6还引入了const，同样可以用来创建块作用域变量，但其值是固定的（常量）。之后任何试图修改值的操作都会引起错误。【当然，引用数据类型可以修改，修改值的时候，指向的内存地址不会变化，可以参考小编的这篇文章神奇的const】

var foo = true;
if(foo){
  var a = 2;
  const b = 3;
  a = 3; // 正常
  b = 4; // 错误
}
console.log(a); // 3 【变量a通过var声明，注册在全局作用域上】
console.log(b); // ReferenceError【可以看出，const除了不能修改值之外，还继承了let的块级作用域】

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