你不知道的JavaScript（三）|作用域和闭包

函数中的作用域
函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。这种设计方案是非常有用的，能充分利用JavaScript变量可以根据需要改变值类型的“动态”特性

隐藏内部实现

function doSomething(a) {
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
function doSomethingElse(a) {
  return a - 1;
}
var b;
doSomething( 2 ); // 15

以上代码片段中，变量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

规避冲突
1.全局命名空间
变量冲突的一个典型例子存在于全局作用域中。当程序中加载了多个第三方库时，如果它们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。
这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标示符暴露在顶级的词法作用域中。
2.模块管理
另外一种避免冲突的办法和现代的模块机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标示符加入到全局作用域中，而是通过以来管理器的机制将库的标示符显示地导入到另外一个特定的作用域中。

函数作用域

var a = 2;
function foo() { // <-- 添加这一行
  var a = 3;
  console.log( a ); // 3
} // <-- 以及这一行
foo(); // <-- 以及这一行
console.log( a ); // 2

以上代码改为如下：

var a = 2;
(function foo(){ // <-- 添加这一行
  var a = 3;
  console.log( a ); // 3
})(); // <-- 以及这一行
console.log( a ); // 2

比较一下前面两个代码片段。第一个片段中foo被绑定在所在作用域中，可以直接通过foo()来调用它。第二个片段中foo被绑定在函数表达式自身的函数中而不是所在作用域中。换句话说，(function foo(){..})作为函数表达式意味着foo只能在..所代表的位置中被访问，外部作用域则不行。foo变量名被隐藏在自身中意味着不会非必要地污染外部作用域。

1.立即执行函数表达式
IIFE的一个非常普通的进阶用法是把它们当做函数调用并传递参数进去。

var a = 2;
(function IIFE( global ) {
  var a = 3;
  console.log( a ); // 3
  console.log( global.a ); // 2
})( window );
console.log( a ); // 2

这个模式的另外一个应用场景是解决undefined标识符的默认值被错误覆盖导致的异常（虽然不常见）。将一个参数命名为undefined，但是在对应的位置不传入任何职，这样就可以保证在代码块中undefined标识符的值真的是undefined：

undefined = true; // 给其他代码挖了一个大坑！绝对不要这样做！
(function IIFE( undefined ) {
  var a;
  if (a === undefined) {
  console.log( "Undefined is safe here!" );
}
})();

IIFE还有一个变化的用途是倒置代码的运行顺序：

var a = 2;
(function IIFE( def ) {
  def( window );
})(function def( global ) {
  var a = 3;
  console.log( a ); // 3
  console.log( global.a ); // 2
});

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

2.let、const
3.垃圾回收

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函数的点击回调并不需要somReallyBigData变量。理论上这意味着当process(..)执行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于click函数形成了一个覆盖整个作用域的闭包，JavaScript引擎极有可能依然保存着这个结构（取决于具体实现）。
块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存someReallyBigData了：

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

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

慈母手中线,游子身上衣