JS函数作用域

函数中的作用域

JS具有基于函数的作用域，意味着每声明一个函数都会为其自身创建一个气泡，而其他结构都不会创建作用域气泡。但事实上，这并不完全正确。

function foo(a){
  var b = 2;
  function bar(){
    
  }
  var c = 3;
}
-----------------------------------------------------------------------------------------------------
全局作用域也有自己的作用域气泡，它只包含一个标识符foo。
foo()函数的作用域气泡中包含了标识符a、b、c和bar，因此无法从foo()函数外部对它们进行访问。
也就是说，这些标识符全都无法从全局作用域中进行访问。
无论标识符声明出现在作用域中的何处，这个标识符所代表的变量或函数都将附属于所处作用域的气泡。

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）。这种设计方案是非常有用的，能充分利用JS变量可以根据需要改变值类型的“动态”特性。
与此同时，如果不细心处理那些可以在整个作用域范围内被访问的变量，可能会带来意想不到的问题。

隐藏内部实现

对函数的传统认知就是先声明一个函数，然后再向里面添加代码。但反过来想也可以带来一些启示：从所写的代码中挑选出一个任意的片段，然后用函数声明对它进行包装，实际上就是把这些代码隐藏起来了。

实际的结果就是在这个代码片段的周围创建了一个作用域气泡，也就是说这段代码中的任何声明（变量或函数）都将绑定在这个新创建的包装函数的作用域中，而不是先前所在的作用域中。换句话说，可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来隐藏它们。

为什么隐藏变量和函数是一个有用的技术呢？
有很多原因促成了这种基于作用域的隐藏方法，它们大多是从最小特权原则中引申出来的，也叫最小授权或最小暴露原则。这个原则是指在软件设计之中，应该最小限度地暴露必要内容，而讲其他内容都隐藏起来，比如某个模块或对象的API设计。

这个原则可以延伸到如何选择作用域来包含变量和函数，如果所有变量和函数都在全局作用域中，当然可以在所有的内部嵌套作用域中访问到它们。但这样会破坏前面提到的最小特权原则，因为可能会暴露过多的变量或函数，而这些变量和函数本应该是私有的，正确的代码应该是可以阻止对这些变量或函数进行访问的。

function doSomething(a){
  // 变量b和函数doSomethingElse()应该是doSomething()内部具体实现的私有内容
  // 给予外部作用域对b和doSomethingElse()的访问权限不仅没有必要，而且可能是危险的。
  // 因为它们可能被有意或无意地以非预期的方式使用，从而导致超出了doSomething()的适用条件。
  // 更合理的设计会将这些私有的具体内容隐藏在doSomething()内部
  b = a + doSomethingElse(a*2);
  console.log(b*3);
}
function doSomethingElse(a){
  return a - 1;
}
var b ;
doSomething(2);// 15

function doSomething(a){
  // b 和 doSomethingElse() 都无法从外部被访问，而只有被doSomething()所控制。
  // 功能性和最终效果都没有受影响，但是设计上将具体内容私有化了，设计良好的软件都会依次进行实现。
  function doSomethingElse(a){
    return a - 1;
  }
  var b;
  b = a + doSomething(a*2);
  console.log(b * 3);
}
doSomething(2);// 15

规避冲突

隐藏作用域中的变量和函数所带来的另一个好处，是可以避免同名标识符之间的冲突，两个标识符可能具有相同的名字但用途却不一样，无意间可能造成命名冲突。冲突会导致变量的值被意外覆盖。

function foo(){
  function bar(a){
    // bar()函数内部的赋值表达式i=3意外地覆盖了声明在foo()内部for循环中的i
    // 这将导致无限循环，因为i被固定设置为3，永远无法满足小于10这个条件。
    i = 3;
    console.log(a+i);
  }
  for(var i=0; i<10; i++){
    bar(i*2);
  }
}
foo();

1. 全局命名空间

变量冲突的一个典型例子存在于全局作用域中，当程序中加载了多个第三方库时，如果他们没有妥善地将内部私有的函数或变量隐藏起来，就会很容易引发冲突。

这些库通常会在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象（命名空间）的属性，而不是将自己的标识符暴露在顶级的词法作用域中。

var MyLibrary = {
  awesome:'stuff',
  doSomething:function(){
  
  },
  doSomethingElse:function(){

  }
}

2. 模块管理

另外一种规避冲突的办法和现代的模块机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无法将标识符加入到全局作用域中，而是通过依赖管理器的机制将库的标识符显式地导入到另一个特定的作用域中。

显而易见，这些工具并没有能够违反词法作用域规则的神奇功能。它们只是利用作用的规则强制所有标识符都不能注入到共享作用域中，而是保存在私有、无冲突的作用域中，这样可以有效规避掉所有的意外冲突。

因此，只要你愿意，即使不适用任何依赖管理工具也可以实现相同的功效。

函数作用域

在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。

var a = 2;
// 声明一个具名函数foo()，意味着foo这个名字本身污染了所在作用域（全局作用域）
function foo(){
  var a = 3;
  console.log(a);
}
// 显式地通过函数名foo()调用这个函数才能运行其中的代码
foo();
console.log(a);

虽然这种技术可以解决一些问题，但是并不理想，因为会导致一些额外的问题。如果函数不需要函数名，或者至少函数名可以不污染所在所用于，并且能够自动运行，这就会更加理想。

幸好，JS提供了能够同时解决这两个问题的方案：

var a = 2;
(function foo(){
  var a = 3;
  console.log(a); // 3
})();
console.log(a); // 2

包装函数的声明以函数声明和函数表达式之间最重要的区别是它们的名称标识符会将绑定在何处。区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位置，如果 function 是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

具名与匿名

对于函数表达式你最熟悉的场景可能就是回调函数

// 匿名函数表达式，因为function()没有名称标识符。
// 函数表达式可以是匿名的，而函数声明则不可以省略函数名，在JS的语法中这是非法的。
setTimeout(function(){
  console.log('i waited 1 second')
}, 1000);

匿名函数表达式书写起来简单快捷，很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑：

1. 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
2. 如果没有函数名，当函数需要引用自身时，只能使用已经过期的 arguments.callee 引用，比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
3. 匿名函数省略了对于代码可读性/可理解性很重要的函数名，一个描述性的名称可以让代码不言自明。

行内函数表达式非常强大且有用，匿名和具名之间的区别并不会对这点有任何影响。给函数表达式指定一个函数名可以有效解决以上问题，始终给函数表达式命名是一个最佳实践。

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

由于函数被包含在一对括号内部，因此成为了一个表达式，通过末尾加上另一个括号可以立即执行这个函数。第一个括号将函数变成了表达式，第二个括号执行了这个函数。

这种模式很常见，社区给它规定了一个术语，叫做IIFE（Immediiately Invoked Function Expression），代表立即执行函数表达式。

函数名对IIFE当然不是必须的，IIFE最常见的用法是使用一个匿名函数表达式，虽然使用具名函数的IIFE并不常见，但它具有上述匿名函数表达式的所有优势，因此也是一个值得推广的实践。

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