你不懂JS:作用域与闭包 第二章:词法作用域

官方中文版原文链接

感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大奖:点击这里领取

在第一章中,我们将“作用域”定义为一组规则,它主宰着 引擎 如何通过标识符名称在当前的 作用域,或者在包含它的任意 嵌套作用域 中来查询一个变量,

作用域的工作方式有两种占统治地位的模型。其中的第一种是最最常见,在绝大多数的编程语言中被使用的。它称为 词法作用域,我们将深入检视它。另一种仍然被一些语言(比如Bash脚本,Perl中的一些模式,等等)使用的模型,称为 动态作用域

动态作用域在附录A中讲解。我在这里提到它仅仅是为词法作用域提供一个对比,而词法作用域是JavaScript采用的作用域模型。

词法分析时

正如我们在第一章中讨论的,标准语言编译器的第一个传统步骤称为词法分析(也就是分词)。如果你回忆一下,词法分析处理是检查一串源代码字符,并给token赋予语法含义作为某种有状态解析的输出。

正是这个概念给理解词法作用域是什么提供了基础,也是这个名词的渊源。

要定义它有点儿兜圈子,词法作用域是在词法分析时被定义的作用域。换句话说,词法作用域是基于,你,在写程序时,变量和作用域的块儿在何处被编写决定的,因此它在词法分析器处理你的代码时(基本上)是固定不变的。

注意: 我们将会稍稍看到有一些方法可以骗过词法作用域,从而在词法分析器处理过后改变它,但是这些方法都是使人皱眉头的。事实上公认的最佳实践是,将词法作用域看作是仅仅依靠词法的,因此在本质上完全是编写时决定的。

让我们考虑这段代码:

function foo(a) {

    var b = a * 2;

    function bar(c) {
        console.log( a, b, c );
    }

    bar(b * 3);
}

foo( 2 ); // 2 4 12

在这个代码实例中有三个固有的嵌套作用域。将这些作用域考虑为套在一起的气泡可能有助于思考。

fig2.png

气泡1 包围着全局作用域,它里面只有一个标识符:foo

气泡2 包围着作用域foo,它含有三个标识符:abarb

气泡3 包围着作用域bar,它里面只包含一个标识符:c

作用域气泡是根据作用域的块儿被写在何处定义的,一个嵌套在另一个内部,等等。在下一章中,我们将讨论作用域的不同单位,但是就现在来说,让我们认为每一个函数创建了一个新的作用域气泡。

bar的气泡完全被包含在foo的气泡中,因为(而且只因为)这就是我们选择定义函数bar的位置。

注意这些嵌套的气泡是严格嵌套的。我们没有讨论气泡可以跨越边界的维恩图(Venn diagrams)。换句话说,没有那个函数的气泡可以同时(部分地)存在于另外两个外部的作用域气泡中,就像没有函数可以部分地存在于它的两个父函数中一样。

查询

这些作用域气泡的结构和相对位置完全解释了 引擎 在查找一个标识符时,它需要查看的所有地方。

在上面的代码段中,引擎 执行语句console.log(..)并开始查找三个被引用的变量abc。它首先从最内部的作用域气泡开始,也就是bar(..)函数的作用域。在这里它找不到a,所以它向上走一层,到外面下一个最近的作用域气泡,foo(..)的作用域。它在这里找到了a,于是它就使用这个a。同样的事情也发生在b上。但是对于c,它在bar(..)内部就找到了。

如果在bar(..)内部和foo(..)内部都有一个c,那么console.log(..)语句将会找到并使用bar(..)中的那一个,绝不会到达foo(..)中的那一个。

一旦找到第一个匹配,作用域查询就停止了。相同的标识符名称可以在嵌套作用域的多个层中被指定,这称为“遮蔽(shadowing)”(内部的标识符“遮蔽”了外部的标识符)。无论如何遮蔽,作用域查询总是从当前被执行的最内侧的作用域开始,向外/向上不断查找,直到第一个匹配才停止。

注意: 全局变量也自动地是全局对象(在浏览器中是window,等等)的属性,所以不直接通过全局变量的词法名称,而通过将它作为全局对象的一个属性引用来间接地引用,是可能的。

window.a

这种技术给出了访问全局变量的方法,没有它全局变量将因为被遮蔽而不可访问。然而,被遮蔽的非全局变量是无法访问的。

不管函数是从 哪里 被调用的,也不论它是 如何 被调用的,它的词法作用域是由这个函数被声明的位置 唯一 定义的。

词法作用域查询 仅仅 在处理头等标识符时实施,比如ab,和c。如果你在一段代码中拥有一个foo.bar.baz的引用,词法作用域查询将在查找foo标识符时实施,但一旦定位这个变量,对象属性访问规则将会分别接管barbaz属性的解析。

欺骗词法作用域

如果词法作用域仅仅是由函数被声明的位置定义的,而且这个位置完全是一个编写时的决定,那么怎么可能有办法在运行时“修改”(也就是,作弊欺骗)词法作用域呢?

JavaScript有两种这样的机制。在广大的社区中它们都等同地被认为是让人皱眉头的,在你代码中使用它们是一种差劲儿的做法。但是关于它们的具有代表性的争论经常错过了最重要的一点:欺骗词法作用域会导致更低下的性能。

在我讲解性能的问题以前,先让我们看看这两种机制是如何工作的。

eval

JavaScript中的eval(..)函数接收一个字符串作为参数值,并将这个字符串的内容看作是好像它已经被实际编写在程序的那个位置上。换句话说,你可以用编程的方式在你编写好的代码内部生成代码,而且你可以运行这个生成的代码,就好像它在编写时就已经在那里了一样。

如果以这种观点来评价eval(..),那么eval(..)是如何允许你修改词法作用域环境应当是很清楚的:欺骗并假装这个编写时(也就是,词法)代码一直就在那里。

eval(..)被执行的后续代码行中,引擎 将不会“知道”或“关心”前面的代码是被动态翻译的,而且因此修改了词法作用域环境。引擎 将会像它一直做的那样,简单地进行词法作用域查询。

考虑如下代码:

function foo(str, a) {
    eval( str ); // 作弊!
    console.log( a, b );
}

var b = 2;

foo( "var b = 3;", 1 ); // 1, 3

eval(..)调用的位置上,字符串"var b = 3"被看作是一直就存在在那里的代码。因为这个代码恰巧声明了一个新的变量b,它就修改了现存的foo(..)的词法作用域。事实上,就像上面提到的那样,这个代码实际上在foo(..)内部创建了变量b,它遮蔽了声明在外部(全局)作用域中的b

console.log(..)调用发生时,它会在foo(..)的作用域中找到ab,而且绝不会找到外部的b。这样,我们就打印出"1, 3"而不是一般情况下的"1, 2"。

注意: 在这个例子中,为了简单起见,我们传入的“代码”字符串是固定的文字。但是它可以通过根据你的程序逻辑将字符拼接在一起,很容易地以编程方式创建。eval(..)通常被用于执行动态创建的代码,因为动态地对一段实质上源自字符串字面值的静态代码进行求值,并不会比直接编写这样的代码带来更多真正的好处。

默认情况下,如果eval(..)执行的代码字符串包含一个或多个声明(变量或函数)的话,这个动作就会修改这个eval(..)所在的词法作用域。技术上讲,eval(..)可以通过种种技巧(超出了我们这里的讨论范围)被“间接”调用,而使它在全局作用域的上下文中执行,如此修改全局作用域。但不论那种情况,eval(..)都可以在运行时修改一个编写时的词法作用域。

注意:eval(..)被用于一个操作它自己的词法作用域的strict模式程序时,在eval(..)内部做出的声明不会实际上修改包围它的作用域。

function foo(str) {
   "use strict";
   eval( str );
   console.log( a ); // ReferenceError: a is not defined
}

foo( "var a = 2" );

在JavaScript中还有其他的工具拥有与eval(..)非常类似的效果。setTimeout(..)setInterval(..)可以 为它们各自的第一个参数值接收一个字符串,其内容将会被eval为一个动态生成的函数的代码。这种老旧的,遗产行为早就被废弃了。别这么做!

new Function(..)函数构造器类似地为它的 最后 一个参数值接收一个代码字符串,来把它转换为一个动态生成的函数(前面的参数值,如果有的话,将作为新函数的命名参数)。这种函数构造器语法要比eval(..)稍稍安全一些,但在你的代码中它仍然应当被避免。

在你的代码中动态生成代码的用例少的不可思议,因为在性能上的倒退使得这种能力几乎总是得不偿失。

with

JavaScript的另一个使人皱眉头(而且现在被废弃了!),而且可以欺骗词法作用域的特性是with关键字。有许多种合法的方式可以讲解with,但是我在此选择从它如何与词法作用域互动并影响词法作用域的角度来讲解它。

讲解with的典型方式是作为一种缩写,来引用一个对象的多个属性,而 不必 每次都重复对象引用本身。

例如:

var obj = {
    a: 1,
    b: 2,
    c: 3
};

//  重复“obj”显得更“繁冗”
obj.a = 2;
obj.b = 3;
obj.c = 4;

// “更简单”的缩写
with (obj) {
    a = 3;
    b = 4;
    c = 5;
}

然而,这里发生的事情要比只是一个对象属性访问的便捷缩写要多得多。考虑如下代码:

function foo(obj) {
    with (obj) {
        a = 2;
    }
}

var o1 = {
    a: 3
};

var o2 = {
    b: 3
};

foo( o1 );
console.log( o1.a ); // 2

foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2 -- 哦,全局作用域被泄漏了!

在这个代码示例中,创建了两个对象o1o2。一个有a属性,而另一个没有。foo(..)函数接收一个对象引用obj作为参数值,并在这个引用上调用with (obj) {..}。在with块儿内部,我们制造了一个变量a的看似是普通词法引用的东西,实际上是一个LHS引用(见第一章),并将值2赋予它。

当我们传入o1时,赋值a = 2找到属性o1.a并赋予它值2,正如在后续的console.log(o1.a)语句反应的那样。然而,当我们传入o2,因为它没有a属性,没有这样的属性被创建,所以o2.a还是undefined

但是之后我们注意到一个特别的副作用,赋值a = 2创建了一个全局变量a。这怎么可能?

with语句接收一个对象,这个对象有0个或多个属性,并 将这个对象视为好像它是一个完全隔离的词法作用域,因此这个对象的属性被视为在这个“作用域”中词法定义的标识符。

注意: 尽管一个with块儿将一个对象视为一个词法作用域,但是在with块儿内部的一个普通var声明将不会归于这个with块儿的作用域,而是归于包含它的函数作用域。

如果eval(..)函数接收一个含有一个或多个声明的代码字符串,它就会修改现存的词法作用域,而with语句实际上是从你传递给它的对象中凭空制造了一个 全新的词法作用域

以这种方式理解的话,当我们传入o1with语句声明的“作用域”就是o1,而且这个“作用域”拥有一个对应于o1.a属性的“标识符”。但当我们使用o2作为“作用域”时,它里面没有这样的a“标识符”,于是LHS标识符查询(见第一章)的普通规则发生了。

“作用域”o2中没有,foo(..)的作用域中也没有,甚至连全局作作用域中都没有找到标识符a,所以当a = 2被执行时,其结果就是自动全局变量被创建(因为我们没有在strict模式下)。

with在运行时将一个对象和它的属性转换为一个带有“标识符”的“作用域”,这个奇怪想法有些烧脑。但是对于我们看到的结果来说,这是我能给出的最清晰的解释。

注意: 除了使用它们是个坏主意意外,eval(..)with都受Strict模式的影响(制约)。with干脆就不允许使用,而虽然eval(..)还保有其核心功能,但各种间接形式的或不安全的eval(..)是不允许的。

性能

通过在运行时修改,或创建新的词法作用域,eval(..)with都可以欺骗编写时定义的词法作用域。

你可能会问,那又有什么大不了的?如果它们提供了更精巧的功能和编码灵活性,那它们不是 好的 特性吗?不。

JavaScript 引擎 在编译阶段期行许多性能优化工作。其中的一些优化原理都归结为实质上在进行词法分析时可以静态地分析代码,并提前决定所有的变量和函数声明都在什么位置,这样在执行期间就可以少花些力气来解析标识符。

但如果 引擎 在代码中找到一个eval(..)with,它实质上就不得不 假定 自己知道的所有的标识符的位置可能是不合法的,因为它不可能在词法分析时就知道你将会向eval(..)传递什么样的代码来修改词法作用域,或者你可能会向with传递的对象有什么样的内容来创建一个新的将被查询的词法作用域。

换句话说,悲观地看,如果eval(..)with出现,那么它 做的几乎所有的优化都会变得没有意义,所以它就会简单地根本不做任何优化。

你的代码几乎肯定会趋于运行的更慢,只因为你在代码的任何地方引入了一个了eval(..)with。无论 引擎 将在努力限制这些悲观臆测的副作用上表现得多么聪明,都没有任何办法可以绕过这个事实:没有优化,代码就运行的更慢。

复习

词法作用域意味着作用域是由编写时函数被声明的位置的决策定义的。编译器的词法分析阶段实质上可以知道所有的标识符是在哪里和如何声明的,并如此在执行期间预测它们将如何被查询。

在JavaScript中有两种机制可以“欺骗”词法作用域:eval(..)with。前者可以通过对一个拥有一个或多个声明的“代码”字符串进行求值,来(在运行时)修改现存的词法作用域。后者实质上是通过将一个对象引用看作一个“作用域”,并将这个对象的属性看作作用域中的标识符,(同样,也是在运行时)创建一个全新的词法作用域。

这些机制的缺点是,它压制了 引擎 在作用域查询上进行编译期优化的能力,因为 引擎 不得不悲观地假定这样的优化是不合法的。这两种特性的结果就是代码 会运行的更慢。不要使用它们。

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

推荐阅读更多精彩内容