《你不知道的javascript》上卷

作用域与闭包(二)——作用域

Posted by Small Star on April 29, 2017

在翻阅《你不知道的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声明不会提升;
  • 函数声明会提升到变量声明的上方,而在同一个作用域中声明了同名函数时,后一个同名函数在提升时会覆盖前一个函数的声明。