附录B:填补块儿作用域

特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS

在第三章中,我们探索了块儿作用域。我们看到最早在 ES3 中引入的 withcatch 子句都是存在于 JavaScript 中的块儿作用域的小例子。

但是 ES6 引入的 let 最终使我们的代码有了完整的,不受约束的块作用域能力。不论是在功能上还是在代码风格上,块作用域都使许多激动人心的事情成为可能。

但要是我们想在前 ES6 环境中使用块儿作用域呢?

考虑这段代码:

{
    let a = 2;
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

它在 ES6 环境下工作的非常好。但是我们能在前 ES6 中这么做吗?catch 就是答案。

try{throw 2}catch(a){
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

哇!这真是难看和奇怪的代码。我们看到一个 try/catch 似乎强制抛出一个错误,但是这个它抛出的“错误”只是一个值 2。然后接收它的变量声明是在 catch(a) 子句中。三观:毁尽。

没错,catch 子句拥有块儿作用域,这意味着它可以被用于在前 ES6 环境中填补块儿作用域。

“但是……”,你说。“……没人愿意写这么丑的代码!”你是对的。也没人编写由 CoffeeScript 编译器输出的(某些)代码。这不是重点。

重点是工具可以将 ES6 代码转译为能够在前 ES6 环境中工作的代码。你可以使用块儿作用域编写代码,并从这样的功能中获益,然后让一个编译工具来掌管生成将在部署之后实际 工作 的代码。

这实际上是所有(嗯哼,大多数)ES6 特性首选的迁移路径:在从前 ES6 到 ES6 的转变过程中,使用一个代码转译器将 ES6 代码转换为 ES5 兼容的代码。

Traceur

Google 维护着一个称为“Traceur”[1]的项目,它的任务正是为了广泛使用 ES6 特性而将它转译为前 ES6(大多数是 ES5,但不是全部!)代码。TC39 协会依赖这个工具(和其他的工具)来测试他们所规定的特性的语义。

Traceur 将从我们的代码段中产生出什么?你猜对了!

{
    try {
        throw undefined;
    } catch (a) {
        a = 2;
        console.log( a );
    }
}

console.log( a );

所以,使用这种工具,我们可以开始利用块儿作用域,无论我们是否面向 ES6,因为 try/catch 从 ES3 那时就开始存在了(并且这样工作)。

隐含的与明确的块儿

在第三章中,在我们介绍块儿作用域时,我们认识了一些关于代码可维护性/可重构性的潜在陷阱。有什么其他的方法可以利用块儿作用域同时减少这些负面影响吗?

考虑一下 let 的这种形式,它被称为“let 块儿”或“let 语句”(和以前的“let 声明”对比来说)。

let (a = 2) {
    console.log( a ); // 2
}

console.log( a ); // ReferenceError

与隐含地劫持一个既存的块儿不同,let 语句为它的作用域绑定明确地创建了一个块儿。这个明确的块儿不仅更显眼,而且在代码重构方面健壮得多,从文法上讲,它通过强制所有的声明都位于块儿的顶部而产生了某种程度上更干净的代码。这使任何块儿都更易于观察,更易于知道什么属于这个作用域和什么不属于这个作用域。

作为一种模式,它是与许多人在函数作用域中采纳的方式相对称的 —— 它们手动地将所有var声明移动/提升到函数的顶部。let 语句有意地将它们放在块儿的顶部,而且如果你没有通篇到处使用 let 声明,那么你的块儿作用域声明就会在某种程度上更易于识别和维护。

但是,这里有一个问题。let 语句的形式没有包含在 ES6 中。就连官方的 Traceur 编译器也不接受这种形式的代码。

我们有两个选择。我们可以使用 ES6 合法的语法格式化,再加上一点儿代码规则:

/*let*/ { let a = 2;
    console.log( a );
}

console.log( a ); // ReferenceError

但是,工具就意味着要解决我们的问题。所以另一个选项是编写明确的 let 语句块儿,并让工具将他转换为合理的,可以工作的代码。

所以,我建造了一个称为“let-er”[^note-let_er]的工具来解决这个问题。let-er 是一个编译期代码转译器,它唯一的任务就是找到 let 语句形式并转译它们。它将你的代码其他部分原封不动地留下,包括任何 let 声明。你可以安全地将 let-er 用于 ES6 转译器的第一步,然后如果有需要,你可以将你的代码通过 Traceur 这样的东西。

另外,let-er 有一个配置标志 --es6,当它打开时(默认是关闭),会改变生成的代码的种类。与使用 try/catch 的 ES3 填补黑科技不同的是,let-er 将拿着我们的代码并产生完全兼容 ES6 的代码,没有黑科技:

{
    let a = 2;
    console.log( a );
}

console.log( a ); // ReferenceError

所以,你可以立即开始使用 let-er,而且可以面向所有前 ES6 环境,当你仅关心 ES6 时,你可以加入配置标志并立即仅面向 ES6。

而且最重要的是,你可以使用更好的和更明确的 let 语句形式,即便它(还)不是任何 ES 官方版本的一部分。

性能

让我在 try/catch 的性能问题上加入最后一个快速的说明,并/或解决这个问题:“为什么不使用一个IIFE来创建作用域?”

首先,try/catch 的性能 慢一些,但是没有任何合理的假设表明它 必须 是这样,或者它 总是 这样。因为 TC39 认可的官方 ES6 转译器使用 try/catch,Traceur 团队已经让 Chrome 去改进 try/catch 的性能了,而且它们有很明显的动力这样做。

第二,IIFE 和 try/catch 不是一个合理的“苹果对苹果”的比较,因为一个包装着任意代码的函数改变了这段代码的含义,以及它的 thisreturnbreak、和 continue 的含义。IIFE 不是一个合适一般替代品。它只能在特定的情况下手动使用。

真正的问题变成了:你是否想要使用块儿作用域。如果是,这些工具给你提供了这些选择。如果不,那就在你的代码中继续使用 var

[^note-let_er]: let-er


  1. Google Traceur

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

推荐阅读更多精彩内容