正如我们在第2章中讨论的那样，作用域包含了一系列的“气泡”，每一个都可以为容器，其中包含了标识符（变量、函数）的定义。这些气泡互相嵌套并且整齐地排列成蜂窝型，排列的结构是在写代码时定义的。
但是，究竟是什么生成了一个新的气泡？只有函数会生成新的气泡？JavaScript中的其他结构能生成作用域气泡吗？
对于前面提出的问题，最常见的答案是JavaScript具有基于函数的作用域，意味着每声明一个函数都会为其自身创建一个气泡，而其他结构不会创建作用域气泡。但事实上这并不完全正确，下面我们来看一下。
首先需要研究一下函数作用域及其背后的一些内容。
考虑下面的代码：
function foo(a) {
var b = 2;
// 一些代码
function bar() {
// ...
}
// 更多代码
var c = 3;
}在这个代码片段中，foo(...)的作用域气泡中包含了标识符a、b、c和bar。无论标识符声明出现在作用域的好处，这个标识符所代表的变量或函数都将术语所处作用域的气泡。我们将在下一章讨论具体的原理。
bar(...)拥有自己的作用域气泡。全局作用域也有自己的作用域气泡，它只包含了一个标识符：foo。
由于标识符a、b、c和bar都附属于foo(...)的作用域气泡，因此无法从foo(...)的外部对他们进行访问。也就是说，这些标识符全部都无法从全局作用域中进行访问，因此下面代码会导致ReferenceError错误：
bar() // 失败
console.log( a, b, c); //三个全部失败但是，这些标识符（a、b、c、foo和bar）在foo(...)的内部都是可以被访问的，同样在bar(...)内部也可以被访问（假设bar(...)内部没有同名的标识符声明）。
函数作用域的含义是指，术语这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域也可以使用）。这种设计方案是非常有用的，能充分利用JavaScript变量可以根据需要改变值类型的“动态”特性。
但与此同时，如果不细心处理那些可以在整个作用域范围内被访问的变量，可能会带来意想不到的问题。
对函数的传统认知就是生命一个函数，然后再向里面添加代码。但反过来想也可以带来一些启示：从缩写的代码中挑选出一个任意的片段，然后用函数声明对它进行包装，实际上就是把这些代码“隐藏”起来了。
实际结果就是在这个代码片段的周伟创建了一个作用域气泡，也就是说这段代码中任何声明（变量或函数）都将绑定在这个新创建的包装函数的作用域中，而不是先前所在的作用域中。换句话说，可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。
为什么“隐藏”变量和函数是一个有用的技术？
有很多原因促成了这种基于作用域的隐藏方法。他们大都是从最小特权原则中引申出来的也叫最小授权或最小饱咯原则。这个原则是指在软件设计中，应该最小限度地暴露必必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的API设计。
这个原则可以延伸到如何选择作用域来包含变量和函数。如果所有变量和函数都在全局作用域中，当然可以在所有的内部嵌套作用域中访问到他们。但这样会破坏前面提到的最小特权原则，因此可能会暴露过多的变量或函数，而这些变量或函数本应该是私有的，正确的代码应该是可以阻止对这些变量或函数进行访问的。
例如：
function doSomething(a) {
b = a + doSomethingElse( a * 2 );
console.log( b * 3 );
}
function doSomethingElse(a) {
return a - 1;
}
var b;
doSomething( 2 ); //15在这个代码片段中，变量b和函数soSomethingElse(...)应该是doSomething(...)内部具体实现的“私有”内容。给予外部作用域对b和doSomethingElse(...)的“访问权限”不仅没有必要，而且可能是“危险”的，因为他们可能被无意义地以非预期的方式使用，从而导致超出了doSomething(...)的适用条件。更“合理”的设计会将这些私有的具体内容隐藏在doSomething(...)内容，例如：
function doSomething(a) {
function doSomethingElse(a) {
return a - 1;
}
var b;
b = a + doSomethingElse( a * 2 );
console.log( b * 3 );
}
doSomething( 2 ) // 15现在，b和doSmethingElse(...)都无法从外部被访问，而只能被doSomething(...)所控制。功能性和最终效果都没有受影响，但是设计上具体内容私有化了，设计良好的软件都会依次进行实现。
“隐藏”作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个比昂师傅可能具有相同的名字但用途却不一样，无意间可能会造成命名冲突。冲突会导致变量的值被意外覆盖。
例如：
function foo() {
function bar(a) {
i = 3; // 修改for循环所属作用域中的i
console.log( a + i );
}
for (var i = 0; i < 10; i += 1){
bar( i * 2); // 糟糕，无效循环了！
}
}
foo();bar(...)内部的赋值表达式 i=3意外覆盖了声明在foo(...)内部for循环中的i。在这个例子中将会导致无限循环，因为i被固定设置为3，永远满足小玉10这个条件。
bar(...)内部的赋值操作需要声明一个本地变量来使用，采用任何名字都可以，var i = 3;就可以满足这个需求（同时会为i声明一个前面提到过的“遮蔽变量”）。另外一种方法是采用一个完全不同的标识符名称，比如var j = 3;。但是软件设计在某种情况下可能自然而然地要求使用同样的标识符名称，因此在这种情况下使用作用域来“隐藏”内部声明时唯一的最佳选择。
1.全局命名空间
变量冲突的一个景点例子存在于全局组用于中。当程序中加载了多个第三方库，如果它们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。
这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象呗用作库的命名空间，所有需要暴露给外检的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴露在顶级的语法作用域中。
例如：
var MyReallyCoolLibrary = {
awesome: "stuff",
doSomething: function() {
// ...
},
doAnotherThing: function() {
// ...
}
};2.模块管理
另外一种避免冲突的方法和现代的模块管理机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标识符加入到全局作用域中，而是用过依赖管理器的机制将库的标识符显式地导入另外一个特定的作用域中。
显而易见，这些工具并没有能够违反词法作用域规则的“神奇”功能。他们只是利用作用域的规则强制所有标识符都不能注入到共享作用域中，而是保持在私有，无冲突的作用域中，这样可以有效规避掉所有的意外冲突。
因此，只要你愿意，计时不适用任何依赖管理工具也可以实现相同的功效。第五章会介绍模块模式的详细内容。
我们已经知道，在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。
例如：
var a = 2;
function foo() { // <--添加这一行
var a = 3;
console.log( a ); // 3
} // <-- 以及这一行
foo(); // <-- 以及这一行
console.log( a ); // 2虽然这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题。首先，必须声明一个具名函数foo()，意味着foo这个名称本身“污染”了所在作用域（在这个例子中是全局作用域）。其次，必须显式地通过函数名（foo()）调用这个函数才能运行其中的代码。
如果函数不需要函数名（或者至少函数名可以不污染所在作用域），并且能够自动运行，这将会更加理想。
幸好，JavaScript提供了能够同时解决这两个问题的方案。
var a = 2;
(function foo(){ // <-- 添加这一行
var a = 3;
console.log( a ); // 3
})(); // <-- 以及这一行
console.log( a ); // 2接下来我们分别介绍这里发生的事情。
首先，包装函数的声明以（function...而不仅是以function...开始。尽管看上去这并不是一个显眼的细节，但实际上却非常重要的区别。函数会被当做函数表达式而不是一个标准的函数声明来处理）。
区分函数声明和表达式最简单的方法是看function关键字出现在声明中的位置（不仅仅是一行代码，而是整个声明中的位置）。如果function是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。
函数声明和函数表达式之间最重要的区别是他们的名称标识符将会绑定在何处。
比较一下前面连个代码片段。第一个片段中foo被绑定在所在作用于中，可以直接通过foo()来调用它。第二个片段中foo被绑定在函数表达式自身的函数中而不是所在作用域中。
换句话说，(function foo(){ ... })作为函数表达式意味着foo只能在..所代表的位置中被访问，外部作用域则不行。foo变量名被隐藏在自身中意味着不会非必要地污染外部作用域。
对于函数表达式你最熟悉的场景可能就是回调参数了，比如：
setTimeout(function(){
console.log('I waited 1 second!');
}, 1000)这叫作匿名函数表达式，因此function()..没有名称标识符。函数表达式可以是匿名的，而函数声明不可以省略函数名---在JavaScript的语法结构中这是非法的。
匿名函数表达式书写起来非常简单快捷，很多库和工具也倾向鼓励使用这种代码风格。但是它也有几个缺点需要考虑。
- 匿名函数在栈追踪中不会显示有意义的函数名，是的调试很困难。
- 如果没有函数名，但函数需要引用自身时只能使用已经过期的arguments.callee引用，比如在递归中。另一个函数需要引用自身的例子，是在时间触发后时间监听器需要解绑自身。
- 匿名函数省略了对于代码可读性/可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。
行内函数表达式非常强大且有用---匿名和具名之间的匹配并不会对这点有任何影响。给函数表达式指定一个函数名可以有效解决以上问题。始终给函数表达式命名是一个最佳实践：
setTimeout( function timeoutHandler() { // <-- 快看，我有名字了！
console.log('I waited 1 second!');
}, 1000);var a = 2;
(function foo() {
var a = 3;
console.log( a ); // 3
})();
console.log( a ); // 2由于函数被包含在一对()括号内部，因此成为了一个表达式，通过在末尾加上另外一个()可以立即执行这个函数，比如(function foo(){})()。第一个()将函数变成表达式，第二个()执行了这个函数。
这种模式很常见，几年前社区给它规定了术语：IIFE，代表立即执行函数表达式(Immediately Invoked Function Expression)；
函数名对IIFE当然不是必须的，IIFE最常见的用法是使用一个匿名函数表达式。虽然使用具名函数的IIFE并不常见，但它具有上述匿名函数表达式的所有优势，因此也是一个值得推广的实践。
var a = 2;
(function IIFE() {
var a = 3;
console.log( a ); // 3
})();
console.log( a ); // 2相较于传统的IIFE形式，很多人都更喜欢另一个改进的形式：(function(){}())。仔细观察其中的区别。第一种行驶中函数表达式被包含在()中，然后在后面用的另一个()括号来调用。第二种形式中用来调用的()括号移进了包装的()括号中。
这两种形式在功能上是一致的，选择哪个完全凭个人喜好。
IIFE的另一个非常普遍的进阶用法是把他们当做函数调用传递参数进去
例如：
var a = 2;
(function IIFE( global ) {
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
})(window);
console.log( a ); // 2我们将window对象的引用传递进去，但将参数命名为global，因此在代码风格上对全局对象的引用变得比引用一个没有“全局”字样的变量更加清晰。当然可以从外部作用域传递任何你需要的东西，并将变量命名为任何你觉得合适的名字。这对于改进代码风格是非常有帮助的。
这个模式的另外一个应用场景是解决undefined标识符的默认值被覆盖导致的异常（虽然不常见）。将一个参数命名为undefined，但是在对应的位置不传入任何值，这样就可以保证在代码块中undefined标识符的值真的是undefined：
unsefined = true; // 给其他代码挖了一个大坑!绝对不要这样做！
(function IIFE( undefined ) {
var a;
if(a === undefined) {
console.log('undefined is safe here!');
}
})();IIFE还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在IIFE执行之后当做参数传递进去。这种模式在UMD（Universal Module Definition）项目中被广泛使用。尽管这种模式略显冗长，但有些人认为它更容易理解。
var a = 2;
(function IIFE( def ) {
def( window );
})(function def(global) {
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
});函数表达式def定义在片段的第二部分，然而当做参数（这个参数也叫作def）被传递仅IIFE函数定义的第一部分中。最后，参数def（也就是传递进去的函数）被调用，并将window传入党组global参数的值。
尽管函数作用域是最常见的作用域单元，当然也是现行大多数JavaScript中最普遍的设计方法，但其他类型的作用域单元也是存在的，并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀，简洁的代码。
除了JavaScript外的很多变成语言都支持块级作用域，因此其他语言的开发者对于相关的思维方式很熟悉，但对于主要使用JavaScript的开发者来说，这个概念会很陌生。
尽管你可能连一行带有块作用域风格的代码都没写过，但对下面这种很常见的JavaScript代码一定很熟悉：
for (var i = 0; i < 10; i += 1) {
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 += 1) {
console.log( i );
}为什么要把一个只在for循环内部使用（至少是应该只在内部使用）的变量i污染到整个函数作用域中呢？
更重要的是，开发者需要检查自己的代码，以避免在通范围外有外地使用（或复用）某些变量，如果在错误的地方使用变量将导致未知变量的异常。变量i的块作用域（如果存在的话）将使得其职能在for循环内部使用，如果在使用函数中其他地方使用会导致错误。这对保证变量不会被混乱地复用及提升代码的可维护性都有很大帮助。
很可惜，便面上看JavaScript并没有块作用域的相关功能。
除非你更加深入地研究。
我们在第2章讨论with关键字。它不仅仅是一个难以理解的结构，同事也是块作用域的一个例子（块作用域的一种形式），用with从对象中创建的作用域仅在with声明中而非外部作用域中有效。
非常少有人会注意到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分句会创建块作用域这件事开起来像教条的学院理论一样没什么用处，但是查看附录B就会发现一些有用的信息。
到目前为止，我们知道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.垃圾收集
另一个块作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。这里简要说明一个，而内部的实现原理，也就是闭包的机制会在第5张详细解释。
考虑以下代码：
function process(data) {
// 在这里做点有趣的事情
}
var someReallyBigData = {...};
process( someReallyBigData );
var btn = document.getElementById('my_button');
btn.addEventListener('click', function click(evt) {
console.log('button clicked');
}, /*capturingPhase=*/false);click函数的点击回调并不需要someReallBigData变量。理论上这意味着当process(...)执行后，在内存中占用大量空间的数据结构就可以被垃圾回收。但是，由于click函数形成了一个覆盖整个作用域的闭包，JavaScript引擎极有可能依然保存着这个结构（取决于具体的实现）。
块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存someReallBigData了：
function process(data) {
// 在这里做点有趣的事情
}
// 在这个块中定义的内容可以销毁了！
{
let someReallyBigData = { ... };
process( someReallyBigData );
}
var btn = document.getElementById('my_button');
btn.addEventListener('click', function click(evt) {
console.log('button clicked');
}, /*capturingPhase=*/false);为了变量显式声明作用域，并对变量进行本地绑定是非常有用的工具，可以把它添加到你的代码工具箱中了。
2.let循环
一个let可以发挥优势的典型例子就是之前讨论的for循环
for(let i=0; i<10; i+=1) {
console.log( i );
}
console.log( i ); // ReferenceErrorfor循环头部的let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新赋值。
下面通过另一种方式来说明每次迭代时进行重新绑定的行为：
{
let j;
for(j=0; j<10; j+=1){
let i = j; // 每个迭代从新绑定
console.log( i );
}
}每个迭代进行重新绑定的原因非常有趣，我们会在第5章讨论闭包进行说明。
由于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 );
}
}参考附录B，其中介绍了另外一种作用域形式，可以用更健壮的方式实现目的，并且写出的代码更容易维护和重构。
除了let以外，ES6还引入了const，同样可以用来创建块作用域变量，但其值是固定的（常量）。之后任何试图该值的操作都会引起错误。
var foo = true;
if(foo) {
var a = 2;
conse b = 3; // 包含在if中的块作用域
a = 3; // 正常！
b = 4; // 错误！
}
console.log( a ); // 3
console.log( b ); // ReferenceError!函数是JavaScript中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。
但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码（通常指{...}内部）。
从ES3开始，try/catch结构在catch分句中具有块作用域。
在ES6中引入了let关键字（var 关键字的表亲），用来在任意代码中声明扁郎。if(...) {let a = 2;}会声明一个劫持了if的{...}块的变量，并且将变量添加到这个块中。
有些人认为块作用域不应该完全作为函数作用域的替代方案。两种功能应该同时存在，开发者可以并且也应该需要选择使用作用域，创造可读，可维护的优良代码。