《你不知道的javascript（上）》作用域与闭包（二）

在翻阅《你不知道的javascript》这一套书的中上卷目录之后，发现书中针对闭包、对象、原型、语法、异步、回调等等既基础又重要的
javascript知识有着针对性的阐述，于是决定对这套书的中上卷进行学习。上卷和中卷各讲述了两大部分知识，分别是：作用域与闭包、
this和对象原型、类型和语法、异步和性能。本文是对作用域与闭包的学习总结。

对于作用域及其相关知识的理解，我认为主要把握这样一些东西：js所使用作用域的类型，IIFE以及作用域中的提升。

1.作用域类型

　　作用域分为词法作用域和动态作用域，js使用的是词法作用域。所谓词法作用域，指的是在编译词法分析阶段根据词法单元确定下来的作用域，并且在引擎执行代码阶段作用域是不变的（大部分情况下），注意括号里的大部分情况，因为在通常对语法的学习中，只要注意一些不符合常规情况的状态，对语法的把握会顺利许多。

　　一小部分会在执行代码期间改变作用域的情况（书中称之为“欺骗”）是两种：在js中使用了eval()和with()方法（在非严格模式下）：

• eval()可以接受一个字符串作为参数，并且在执行代码期间，将参数中可能传递的值看作本来就存在于eval()所在位置的代码；
  
• with()主要作用是可以接受一个对象，并快捷引用其中的属性。然而，with()在处理这个对象的时候，不仅会形成一个新的作用域，
  还可能改变原本存在的词法作用域（这个方法比较复杂）。
  

对eval()举个例子：

function foo(str,a) {
  eval(str);
  console.log(a,b);
}
var b = 2;
foo("var b = 3",1);//1,3

在执行foo("var b = 3",1)语句时，在正常情况下，函数foo(str,a)执行到console.log(a,b)时，查找b会找到全局变量中的b并得到2，但实际却得到3，这是因为eval()将“var b = 3”看作在函数foo(str,a)中的代码，相当于在函数中声明了一个b作为局部变量，于是下一句console.log(a,b)执行的时候先找到局部变量得到值3,就结束了查找，而全局变量b被屏蔽了。

　　在严格模式下，eval()有自己的作用域，不会在其所处函数中产生屏蔽效应，而with()是被禁用的。并且，在第一章中讲到，引擎在优化性能的时候，是根据已经确定的作用域和词法单元来进行优化的，在使用了eval()和with()后，使得函数作用域可能在动态情况下（执行代码期间）发生变化，而引擎在遇到这个两个方法后就不会进行性能优化。所以，在js中使用这两个方法会导致性能下降。

对于词法作用域，其中又分成了块作用域和函数作用域，js绝大部分情况下使用的是函数作用域，但存在个别块作用域的时候，使用with()和try~catch语句的时候会形成块作用域（又是with()，在这里，《高程》第三版第4章中也讲到了with()会形成作用域，但《高程》中提到这种情况使得作用域链变长了，而with()形成的依然是函数作用域），并且ES6出来之后，也正式承认了块作用域的存在和使用，在{}中使用let和const声明就能创造块作用域了，这为使用循环语句等提供了很大的便利。

2.IIFE

　　IIFE是立即执行函数表达式。首先应该理解什么是函数表达式，非常简单，以function单词作为开头的是函数声明，而带有function但并非以其开头的语句就是函数表达式，最典型的情况就是(function(){})。函数声明和函数表达式相同的地方在于形成了函数作用域，而不同的地方函数声明会被提升，而表达式不会（显然不会，因为声明才是编译器工作的对象）。

　　函数表达式的一个主要作用是可以使函数匿名，这样就避免了函数作用域中多出一个标识符。但是并非所有情况下匿名都是最优的，例如：当函数不只需要被调用一次的时候，就不能匿名了。

　　而函数表达式另一个主要的作用就是作为IIFE的出现，既(function(){})()或(function(){}())的形式，可以立即执行函数，而无需调用或加载。而IIFE多出来的括号并不是只使得函数会立即执行，在括号中还可以传递需要的参数。例如，以(function(a,b){})(c,d)的形式既能将参数传递进函数了，而简单的函数表达式(function(){})却没有这样的功能。

　　此外，IIFE还是闭包机制的一个最佳实践（虽然不是最能体现闭包机制的方式），在第三部分的闭包中会讲到。

3.作用域中的提升

　　其实作用域中的提升非常简单，只要能够理解js的编译原理：在编译器工作阶段，会进行声明，以及对其他语句形成引擎执行的代码，因此，在编写的代码中，不管一个作用域中的声明处于哪里，肯定都比赋值等其他句语先完成，而js语句的执行是按照从上到下执行的，这就好比将声明从下统一提升到了函数中最上面的地方，这就称为声明。

　　对提升需要把握的要点有以下三处：

• 函数表达式不会提升；
  
• let和const声明不会提升；
  
• 函数声明会提升到变量声明的上方，而在同一个作用域中声明了同名函数时，后一个同名函数在提升时会覆盖前一个函数的声明。

Small Star's Blog|小星的博客