《你不知道的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|小星的博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容