《JavaScript 编程精解》全书摘要与逐章导读

导言是怎样展开的AI 辅助

开篇：一个被框成缺口的问题。本章以埃伦·乌尔曼（Ellen Ullman）的一段题词开头，警告说计算机不是照着我们的形象造出来的，而是“我们自身极其细小的一部分的投射”——那一部分，交给了逻辑和规则。这段引文为后面的一切定下基调：这将是一本讲怎样迁就一台机器的狭隘的书，而不是歌颂它的威力。正式的论证随后从一个平常的观察开始——计算机像螺丝刀一样常见，却复杂得多——并很快收窄到一个具体的缺口。对常见的任务（电子邮件、计算器），已经有现成的应用；对独特的或没有边界的任务，则没有。编程正是为填这个缺口而被引入，并被直白地定义：为一台“愚蠢、迂腐”的机器构造一组精确的指令，作者称这种活动“在根本上乏味而令人沮丧”，然后才承认它也可能有回报、很快，还是一道好谜题。从这里起，开篇转向语言：编程大多是通过人工构造的语言完成的，而这些语言出人意料地借鉴了人与人交谈的方式。一段简短的历史插叙——20世纪八九十年代的 BASIC 和 DOS 提示符，让位给“更易学，但自由度更小”的可视界面——落在了本书选定的主题上：JavaScript，只要你知道往哪儿看，它还在那里，内置在每一个现代浏览器里。

展开，第一乐章：困难是真的，而且得由你自己去面对。“关于编程”这一节从主题转向读者。作者直白地说，编程很难，并诊断了原因：根本的规则很简单，但建立在它们之上的程序会累积出足够的复杂性，生出自己的规则——“在某种意义上，你是在建造自己的迷宫，而且很容易在里面迷路。”这变成了体己的劝告：读这本书有时会令人沮丧，但挣扎并不意味着你的能力有问题；歇一歇，重读，做做例子。第二段题词，出自勒古恩（Le Guin），给这份劝告提供了节奏（“当行动变得无益时，就去收集信息……”）。这一节随后去寻找程序究竟是什么的定义，承认类比总有不足，暂且落在机器的比较上——许多部件，彼此相连——然后给出本章被引用最多的表述：程序是“一座思想的建筑”，没有成本，没有重量，在我们手下轻易地生长，也同样轻易地变得复杂。于是有了统领全书的论点：“编程的技艺，是构建不让程序员困惑的程序的技艺。”这一乐章以有意转向一个对立的立场收束。有些程序员靠把自己限制在“最佳实践”和一个安全区里来管理复杂性；作者拒绝这种做法，说它既无聊又无效，坚持新问题需要新解法，你应该至少犯一次设计错误才能理解它们，而品味是“靠实践培养出来的，而不是从一份规则清单里学到的。”

展开，第二乐章：同一个程序，爬上一架抽象的梯子。“为什么语言重要”通过一个单一的演示，把本章抽象的主张变得具体，这个演示在五个层级上反复进行。它从最底层开始——在一台假想的机器上，用九行二进制把 1 到 10 加起来——并配上对开关和穿孔纸板的提醒，以及一句苦笑的让步：输入那些比特图案至少曾赐予人“一种自己是强大巫师的深切感觉”。同一个程序随后被改写成关于内存位置的、带编号的英文指令；再用名字（total、count、compare）和标签来写，这时作者停下来把逻辑走了一遍，解释说那个别扭的 compare 变量之所以存在，只因为原始的机器除了判断一个数是不是零，什么也测不了。然后是 JavaScript：一个六行的 while 循环，其中手动的跳转消失了，与零比较的花招也不再需要——“编程语言……可以替我们处理那些无趣的细节。”最后，假定有假想的 range 和 sum 操作，程序坍缩成一行，读起来几乎像英语。寓意被明说了：同一个程序可以被表达得晦涩，也可以被表达得易读，而一门好语言让程序员能在更高的层面上说话——略去细节，提供构件，让你定义自己的构件，并让它们易于组合。这一节是本章的引擎：它把“语言重要”从一句断言，变成了读者亲眼看着发生的事。

转折：从一般的编程，转到这门具体的、不完美的语言。“什么是 JavaScript？”从原理转向偶然与历史。JavaScript 于 1995 年出现在 Netscape Navigator 里，扩散到每一个主流浏览器，并使交互式的 Web 应用成为可能。作者指出，这个名字几乎与 Java 没有关系，选它是出于营销考虑，而不是出于良好的判断——“现在我们被这个名字套住了。”在 Ecma 下的标准化产生了 ECMAScript，它不过是同一门语言的另一个名字。接着是本章最坦率的一段：人们对 JavaScript 说了很难听的话，而其中许多是真的；作者本人起初就鄙视它，因为它几乎什么都接受，却把它解释得与你的本意不同。他诚实地把责任分摊给他自己的缺乏经验和一个真实的设计缺陷——这门语言的宽松本意是帮助初学者，却多半使 bug 更难找。让步随后得到平衡：同样的灵活性允许了僵硬的语言所禁止的技巧，造就一种随意而愉快的风格，而在认真学会它之后，他慢慢喜欢上了它。接下来是一份压缩的版本史（ES3 的漫长统治，在政治上不可能的第4版于 2008 年被放弃，2009 年温和的第5版，2015 年重大的第6版，此后每年的小更新），并附带实用的说明：旧程序仍能工作，较老的浏览器可能滞后，而本书使用 2024 年的版本。最后，范围越过浏览器扩大——MongoDB、CouchDB，尤其是 Node.js——使 JavaScript 不被呈现成只用于 Web 的工具。

收束：实用的说明、一张地图，和一次握手。最后三节是杂务，而且它们有意地从论证降到后勤。“代码，以及怎么处理它”坚持认为阅读和编写代码不可或缺：别对着例子一扫而过，在你真正写出一个能运行的解答之前别以为理解了一道习题，并且在真正的解释器里运行一切，这样才能得到反馈，也才会被诱惑去做实验。它指向在线版——那里的例子可以点击、可以编辑——和带有起始代码与解答的习题页，同时警告说，后面的章节依赖特定的环境，也依赖按章打包成 ZIP 提供的附带文件。“本书概览”随后把版图分成三部分摆出来——十二章讲语言，七章讲浏览器，两章讲 Node.js——外加五个项目章，并对逐章做了概述，其中包括送货机器人、编程语言的实现、平台游戏和像素画程序。“排版约定”解释了等宽字体，展示了一个 factorial 函数，并演示了表示预期输出的 // → 记法——读者已经在 55 的例子里见过两次的同一种记法，现在被正式命名。本章结束于一句简短的“祝你好运！”，它合上了前面那些坦率的警告所开启的圈：困难从未被否认，而读者无论如何被送上前去。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

导言的核心概念

程序

一段精确指令的文本，它同时也是指挥计算机的力量，以及计算机内存里的数据。

适用处： 与熟悉事物的类比只是部分贴合；与机器的比较只是表面上贴合。

复杂性

简单的规则堆积成连作者自己都被弄糊涂的程序的那种方式。

适用处： 无法靠固定的最佳实践规则消除；品味是靠实践培养出来的。

抽象

让语言或你自己的构件去处理细节，这样你就能在更高的层面上谈论动作。

适用处： 只有当被省略的细节对这个任务来说真的无趣时才有用。

第 1 章是怎样展开的AI 辅助

开篇：从比特到值。本章以虚构的 Yuan-Ma 大师的一段题词开头，定下沉思的调子——表面之下的程序，屏幕不过是涟漪——随后立刻把这份情绪翻译成一个技术主张：在计算机的世界里只有数据，而一切数据都是比特。作者用一个具体的演示来落实它，把 13 写成二进制 00001101，并在底下标出数位的权，让读者看到二进制不过是换了个基数的十进制。从这里起，文字把镜头拉远到规模——一台现代机器拥有超过 1000 亿比特的工作内存——并提出本章的组织性难题：怎样在一片比特的海洋里工作而不被淹没？答案引入了本章标题里的概念。比特被归成值，而每个值都有一个决定其角色的类型。一段迷人的旁白指出，创建一个值只要调用它的名字，不花更多工夫，不过值确实占内存，不再使用时会被回收——对垃圾回收的头一次温和暗示。作者随后明说了计划：本章其余部分讲简单的值类型，以及作用于它们的运算符。

展开：类型逐个登场，各带着自己的但书。正文逐个类型地推进，并浮现出一种模式——每种类型都先被简单地引入，随后被一个限制弄复杂。数字最先：JavaScript 每个数字用 64 位，产生约 1800 亿亿种模式，但作者立刻连着两次对此作了限定，因为符号位和小数点的位置要吃掉一部分范围，留下大约 9 千万亿作为可靠的整数上限。这引出本章最实用的警告：在这个范围内的整数算术是精确的，而小数算术则不是，所以小数应被当作近似值。算术运算符随后登场（+、*、-、/、%），优先级被解释了，又被有意淡化——“拿不准的时候，加括号就是了。”数字类型的怪癖为这一节收尾：Infinity、-Infinity 和 NaN，作者提醒说基于无穷大的计算在数学上并不站得住，并很快滑进 NaN。字符串接着来，形状相同——先简单、后复杂：三种引号风格，用反斜杠转义，把文本表示成数字的 Unicode 基础，以及 16 位的字符串元素覆盖不了整个 Unicode、所以 emoji 占两个位置的复杂情况——这一点推迟到第5章。这一节以模板字面量这一令人愉快的能力收尾，它可以跨行，并通过 ${} 嵌入计算出来的值。一段短小的插曲用 typeof 区分一元与二元运算符，并引入 console.log 作为本书展示结果的手段。布尔值随后到来，接着是比较运算符，带着另一个关于次序的意外——字符串比较只是大致按字母序，因为大写排在小写之下——以及那个令人难忘的事实：NaN 是唯一不等于它自己的值。逻辑运算符 &&、|| 和 ! 补全了这一组，它们的优先级顺序被辩护说，这样排能让典型表达式里的括号最少，而三元条件运算符为这一节收口。对 null 和 undefined 的简短处理，把它们呈现为表示“没有”的两种方式，其区别是“JavaScript 设计里的一个意外”，最好当作可互换的。

转折：类型转换，以及从描述转向建议。本章在“自动类型转换”处转向，口吻明显变了。到此为止，作者一直在描述一个系统；现在他在对一个系统发出警告。这一节开头是一串古怪的表达式——8 * null 是 0，“5” - 1 是 4，但 “5” + 1 却是 “51”——它们被解释为类型转换，所依据的规则“往往并不是你想要或期待的”。== 运算符被单独点名为最坏的祸首，还有个特例：null 和 undefined 彼此相等，却不等于其他任何东西，作者指出这其实对测试一个值是否存在很有用。这直接导向一条建议：防御性地使用 === 和 !==。最后一节把这个主题延伸到 && 和 ||，揭示它们根本不返回布尔值，而是返回其原始操作数之一，这使 || 可以当作默认值的兜底——而 ?? 提供了一个更精确的版本，只在遇到 null 或 undefined 时才兜底。这一节以短路求值收尾：在 true || X 里，X 根本不会被求值，条件运算符也有这一性质。

收束。总结是刻意谦逊的。它盘点了所涵盖的内容——四种值类型，以及作用于它们的二元、一元和三元运算符——然后以令人缴械的诚实说出本章自己的局限：这足够把 JavaScript 当袖珍计算器用，“但也没多少别的了”。最后一句指向第2章，在那里，这些孤立的表达式将被系在一起，成为真正的程序。所以，从结构上看，本章从物理（比特）走到词汇（值与类型），再走到语法（运算符），它反复出现的节奏，是先引入一种方便、再披露它的代价——会丢失精度的 64 位数字，装不下整个 Unicode 的 16 位字符串元素，以及一套迁就到作者最后竟建议读者退出其中一部分的类型系统。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 1 章的核心概念

值

一块被当作一份信息来对待的比特，带着一个说明其角色的类型。

适用处： 值并非不花成本：每个值都得被存储，不再用的会被回收。

类型转换

JavaScript 悄悄地把一个值转换成运算符所需的类型。

适用处： 规则往往与预期不同；=== 和 !== 完全避免转换。

短路求值

&&、||、?? 和 ?: 在左边已经决定了答案时，跳过对右边的求值。

适用处： 只适用于这几个运算符，不适用于普通的二元运算符。

NaN

一个数字类型的值，代表一次没有产生任何有意义结果的计算。

适用处： 它是 JavaScript 里唯一不等于它自己的值。

第 2 章是怎样展开的AI 辅助

开篇：借来一套语法。本章从第1章停下的地方开始——只有值，而值是惰性的——并问：要把它们组装成能运行的东西，需要什么。第一步是把表达式定义为任何产生一个值的代码片段，然后作出一个承载本章大半分量的结构性观察：一个表达式可以坐在另一个表达式里面，就像从句坐在句子里面。这里的论证靠的是与人类语言的类比，而不是演示，其回报是一个关于表达经济性的主张。因为这种包含可以无限重复，没有内置的限制，所以一小批固定的运算符和形式，就足以写下任意复杂的计算。读者被递到手里的，是一套语法，而不是一张词汇表。

第一个转折：计算还不是做事。在开篇里把表达式能表达多少确立之后，作者立刻把这一点倒过来。语句被求值，其值随即被丢弃——所以单凭表达力，换不来任何可观察的东西。证据是刻意落空的：一个只有两行的程序，计算出数字 1 和值 true。它合法，它执行，而运行它不留下任何看得见的痕迹。本章在这里给出了一行代码值得写的真正标准：它必须改变自身之外的某样东西，要么通过打印输出，要么通过让一个名字重新指向别处。该防范的常见误读，恰是这个例子所戳破的那个——以为一行正确地计算了点什么的代码，就已经在做有用的工作了。

展开：记忆，然后是重复。对副作用的需要，自然引向那唯一使程序有状态的副作用，本章于是把绑定作为程序记忆的机制引入。这个框架很谨慎，值得保留：名字不是装着值的盒子，而更像一根抓住值、让它保持可达的触手。例子是路易吉（Luigi）欠的一笔债，先设成 140，然后在还了 35 美元之后，指向 105——名字还在，而它背后的值被换掉，这恰是被记住的状态的形状。（作者还指出，另有一些绑定形式，在能否被重新指向上规则不同，而一个从未被赋值的绑定得到 undefined。）从这里起，本章转向控制流，循环带着动机而不只是语法到来：给每个偶数各写一行输出，对寥寥几个值行得通，但推广到一千以下的每个偶数，这办法就整个垮了。一个带着计数器绑定来追踪进度的循环，只用一次就把同样的活干了。一千只是说明规模；原则是，编程的存在就是为了让工作变小。条件、break 与 continue，以及 switch 补全了这套本领，本章以命名和缩进的约定为这一段收尾——这些规则，机器是不在乎的。

属于人的转折：注释。这份漠不关心，在关于注释的一节里成了明确的主题，注释按定义就是计算机忽略的文本——单行用 //，块用 /* */。给出的理由是：代码装不下程序需要告诉读它的人的一切。例子是一个持有数字 11213 的绑定，配着一段块注释，解释选它背后的个人经历：这些信息代码永远透露不了，因为代码只能展示那个值，永远展示不了它的缘由。于是，命名约定、缩进和注释构成一个连贯的论证，对象是读者，而不是解释器。

收束：一层层拼起来的图画。总结把本章拉回成一幅单一的图画，分阶段搭起来——语句可以包含语句，语句包含表达式，表达式由更小的表达式构成——然后补上一个观察：执行不过是自上而下地跑过这个结构。条件和循环被点名为仅有的打乱这个顺序的东西。回顾涉及语句、表达式、控制流、绑定、环境和函数，随后是三道习题，留给读者的是一个结构模型，而不是一份要背的语法清单。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 2 章的核心概念

表达式

任何产生一个值的代码片段，而表达式可以嵌套在彼此里面。

适用处： 单独一个表达式不是程序；它需要一个语句的框架。

语句与副作用

语句是代码里的一个整句；只有当它以某种方式改变了世界，才有用。

适用处： 只计算并丢掉值的语句，不留任何可观察的痕迹。

绑定

一个抓住值的名字，使程序能记住它，并且可以重新挂接到新的值上。

适用处： const 绑定不能被重新指向；一个未初始化的绑定得到 undefined。

环境

某一时刻存活的所有绑定和值，包括系统提供的内置绑定。 当前存在、可以按名字使用的全部绑定的集合。

适用处： 内容因平台而异，例如浏览器特有的输入函数。 JavaScript 系统会预先填入标准绑定，所以它从不为空。

控制流

语句运行的顺序：直线向前，用 if/else 分支，或用循环重复。

适用处： 没有终止条件或 break 的循环会永远运行。

函数

包在一个值里的一段程序，可以带着参数被调用，也可能返回一个值。

适用处： 第2章只调用现成的函数；编写函数要等到第3章。

第 3 章是怎样展开的AI 辅助

开篇：为什么我们需要新词。本章开头不是语法，而是一个规模的比较。一个说英语的成年人掌握着大约 2 万个词，而几乎没有哪门编程语言带着接近 2 万条内置命令——而它带着的那些还很僵硬。作者得出的结论是，程序必须能够自己造词汇，否则就会淹死在冗长里。函数正是作为这样的东西被引入的：一种把一段程序包进一个值、给它起个名字、此后用一个词说出否则要许多行才能说完的东西的办法。

展开：机制，依次摆开。从这里起，本章稳步走过各个机制。先是定义语法和 return，然后是作用域——全局的、局部的，以及让内层函数能看到它所写在其中的那个函数的绑定的词法嵌套。函数被显示为普通的值，这促成了声明记法和箭头记法的并列呈现。接着是调用栈，它既解释了一个函数怎么知道往哪里返回，也解释了嵌套调用为什么有代价；然后是可选参数；以及闭包。闭包是前面两条线索系在一起的地方：因为每次调用都为函数的参数和局部变量创建全新的实例，又因为内层函数按名字写在哪里而不是按谁调用它来解析名字，一个从调用里返回出来的函数，就一直指向那次调用自己的绑定。于是 wrapValue(1) 和 wrapValue(2) 永远各自独立地产出 1 和 2。递归为机制的这前半部分收尾，作者对它的价格很诚实：因为每个待返回的调用都必须把它的返回上下文堆在栈上，递归的 power 在典型的引擎里比 for 循环的版本慢大约三倍。他由此提炼出的实用规则不是“避免递归”，而是“先写清楚的版本，只在测量显示要紧的地方才优化”——并且他立刻指出例外：像 findSolution 这样的分支式搜索，用递归写确实更清楚。

转折：从怎么做，到什么时候做。本章从写函数转向决定何时把它们提出来，并通过一个演练的例子来做。农场库存的打印代码把补零的逻辑就地重复了好几遍，一加上猪就坏了。修法不是把重复的几行原样提出来，而是把它们底下的那个想法单独分离出来——一个返回补零后字符串、而不是打印一个字符串的函数——并给它起一个恰好这样说的名字：zeroPad。可复用性来自命名的纪律，而不是来自小聪明：像 printZeroPaddedWithLabel 这样的名字，本来就是几件不相干的活儿被捆在一起的警告信号。为了平衡这一点，作者插入了一条克制的原则：在确定需要之前，不要把通用性建进去，否则你就会把日子花在写你永远用不上的框架上，而不是干活。

收束：函数的种类，然后是回顾。最后一个概念性的动作，把为副作用而存在的函数，与产生值的函数区分开，并在后者里区分出纯函数。这个论证讲的是合适，而不是美德：因为 zeroPad 交回一个字符串，它能服务打印版本永远服务不了的用途——比如对齐一张数字表。这值得细读，因为本章并不是在谴责副作用。console.log 没有纯的版本，而它显然很有价值；有些操作靠副作用来做就是更有效率。它的主张是：你应该知道自己写的是哪一种函数。本章随后以常规的方式收尾，是对函数和作用域的小结，以及一组习题。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 3 章的核心概念

词法作用域

一个块能看到哪些绑定，由它在程序文本里所处的位置决定，而不是由谁来调用它决定。 每个块创建一个新的作用域；其中的参数和绑定保持局部，而 var 落在最近的函数作用域或全局作用域里。

适用处： var 无视块作用域；let/const 则不然。 var 是块作用域的例外。

闭包

一个被返回的函数，保留着创建它的那次调用的那些特定的局部绑定。

适用处： 它看到的是创建时的环境，而不是调用时的环境。

调用栈

每个待返回的调用的返回上下文被堆叠其中的内存，使返回知道该回到哪里。

适用处： 有限的：过深或无限的递归会把栈撑爆。

可选参数

多余的参数被丢弃，缺失的变成 undefined，而 = 提供默认值。

适用处： 参数个数不对时不会报告任何错误。

纯函数

一种产生值的函数，没有副作用，也不依赖其他代码的副作用，所以同样的参数总给出同样的结果。

适用处： 并不总能做到，也并不总是值得追求；console.log 不可能是纯的，而且有些操作靠副作用更有效率。

单一概念提取

不是把重复的几行整体提出来，而是抽出一个清晰的想法，比如 zeroPad，并给它一个显而易见的名字。

适用处： 当存在一个可复用的概念时适用；名字不能像 printZeroPaddedWithLabel 那样把几件任务混在一起。

第 4 章是怎样展开的AI 辅助

本章开头不是语法，而是一种需要。雅克想记一份日志，每一天同时记两样东西——他做了些什么的列表，以及那天夜里他有没有变成松鼠。作者的第一个观察是，没有任何孤零零的数字、字符串或布尔值装得下这个：原子值对描述真实的信息来说太单薄了。所以本章的主题是以一种需求、而不是一份特性清单的形式宣布的——这门语言需要某种把值捆在一起的办法，松鼠的问题才能被写下来，更不用说被回答。

展开：数组和对象原来是同一回事

由这个需要，本章搭起它的两种结构，而关键的一步是消去它们之间表面的区分。数组不被呈现为一个独立的值类别，而是专门用于序列的对象，所给的证明是一行代码：typeof [] 的求值结果是 “object”。按这种读法，索引不过是碰巧是数字的属性名。把这一点定下来后，属性和方法自然随之而来，然后是更难的想法：身份。因为属性抓住的是地址而不是包含一个值，名字持有的是引用，所以复制名字并不复制数据。作者用三个绑定演示——两个指向同一个对象，第三个指向另一个初始内容相同的独立对象。设 object1.value = 15，经第二个绑定读回来是 15，经第三个仍是 10，这说明这里的“相同”指的是指向同一个对象，而不只是看上去相像。沿途还挡住了两种误读：const 锁定的是名字所指向的是哪个对象，而不是这个对象持有什么，所以它的属性仍可随意改写；而字符串、数字和布尔值确实带着 length 这样的内置属性和大量方法——不行的是添加你自己的属性，它会被悄悄忽略，而不是报错。

转折：把数据塑形，直到统计变得容易

本章随后从描述结构转向使用一个结构，松鼠日志就在这里见到回报。每一天是一对是/否的回答，作者把它读成一个两位的二进制数，并直接拿来当数组的索引——于是这两个条件的每一种组合，恰好落进四个槽中的一个，phi 系数就成了普通的查表。公式被逐行翻译到那张四槽的表上；在 [76, 9, 4, 1] 上运行得出约 0.069，吃披萨与变身之间的联系可以忽略。作者对这种形状的代价很坦率：行总数和列总数没有存储，所以必须靠把表里的字段相加重新算出来。回报在同一件工具被用到一个合成事件上时到来——一个“花生牙齿”条目，加在恰好是吃了花生并且没刷牙的那些日子上。相关性回来是 1，完全一致，而这就把原因钉在了这个组合上，而不是任何单独的因素上。

收束：从一个故事到一套通用工具

松鼠的故事解决之后，本章拓宽成一次巡礼，看这门语言的其余部分为处理这类数据提供了什么：数组方法，字符串属性，剩余参数与展开，Math 命名空间，解构，以及可选链。关于 Math 的讨论悄悄重述了本章的核心机制——内置的辅助函数以单个对象的属性、而不是以各自独立的顶层名字存在，这使共享的顶层不被挤满，也让你自己的 max 能与内置的那个共存。收尾的话题 JSON，是身份那一课以实用约束的形式回来：因为属性抓住的是地址，内存里的结构其实是一张地址的网，不能原样交给文件或另一台机器。JSON.stringify 和 JSON.parse 把值压平成一个编码字符串，再把它读回来，限度在 JSON 的范围内——只有简单的数据表达式，属性名用双引号，没有函数调用、绑定或注释。于是本章结束于它开始的地方：值被持有的方式所带来的后果。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 4 章的核心概念

数组

用方括号写出的、从零开始索引的有序值列表。

适用处： 其实只是一个专门用于数字命名的属性的对象。

属性

值上一个有名字的槽，用点号或方括号访问。

适用处： null 和 undefined 没有属性；点记法要求名字像绑定名。

方法

值是函数的属性，在它所属的值上被调用。

适用处： 它怎样拿到自己的值，要到第6章才解释。

可变性

对象的内容可以随时间改变；数字、字符串和布尔值则不能。

适用处： const 固定的是绑定，而不是对象的内容。

身份

两个对象引用只有指向同一个对象时才相等。

适用处： 没有内置的按内容进行的深度比较。

相关性

一个从 -1 到 1 的数，说明两个被测量的变量一起变动得有多强。

适用处： 对两个布尔变量，它由一张四格频数表算出。

第 5 章是怎样展开的AI 辅助

开篇：为抽象辩护。本章以霍尔（Hoare）一段关于简单与简单的外表的题词开头，随后提出一个刻意挑衅的比较。导言里的两个程序都把 1 到 10 加起来：一个自成一体的六行循环，和一行代码 console.log(sum(range(1, 10)))，它倚仗两个外部函数。把 sum 和 range 的定义也算上，第二个其实是更大的程序——可作者论证它更可能是正确的，因为它是用一套与问题相符的词汇来表述的。“对一个数的范围求和，讲的不是循环和计数器。它讲的是范围和求和。”那些附带的细节并没有消失；它们迁移进了表达更简单想法的小函数里，因而更容易写对。豌豆汤的类比把这个道理放到了代码之外：一份一步一步的菜谱（“把它切成块。用刀！”），对比一份简练的、假定你懂得泡、炖、切碎这类词的菜谱。后者的代价是词汇量稍大一点；回报是易读。这一节以本章真正的论点收尾——能察觉到自己正在一个过低的抽象层次上工作，是一项技能。

展开：从普通函数到高阶函数。普通函数能构建抽象，但“有时它们不够用”。演练的例子是“把某件事做 N 次”：repeatLog 把动作写死了，于是动作被提升为参数，得到 repeat(n, action)。既然函数只是值，函数体就可以作为箭头函数内联写出，文中指出，这读起来像一个循环体碰巧住在调用括号里的 for 循环。随后正式给出定义——接收或返回其他函数的函数是高阶的——接着是对它们能做什么的一个快速分类：创建函数（greaterThan），包装并修改函数（noisy，记录参数和返回值），甚至发明控制流（unless）。内置的 forEach 被拿来证明这门语言本身已经是这样工作的。

转折：抽象遇上真实的数据。在理论上把案子辩完之后，本章转向高阶函数“大放光彩”的地方——数据处理——并引入 SCRIPTS 数据集，里面有 140 种 Unicode 书写系统，每种带着名字、字符范围、方向、起源年份，以及存活/历史的标志。三种核心操作随后各被手写定义，再交还给标准库：filter（建一个新数组而不是修改，并被指出是纯的）、map（长度相同，形式新）、reduce（最棘手的，把一个数组折叠成一个值，方便的是起始值可以省略）。reduce 立刻被派上不平凡的用场——characterCount 靠在归约函数的参数列表里做解构，把一种文字的各个范围加总，第二个 reduce 则找出汉字是最大的文字，这引出一小段关于汉字统一的岔题，它“至今仍让一些人非常愤怒”。

一段公允的插曲：关于可组合性。作者没有把这项技术吹过头，而是把查找最大文字改写成一个普通的循环，并承认它“也没差多少”——只多了四行，而且仍然易读。他论证说，优势出现在组合之下：SCRIPTS.filter(s => s.living).map(s => s.year) 喂给 average，读起来是一条流水线，而与之等价的单个循环，则把正在计算的东西弄模糊了，也使把 average 提取出来变得别扭，因为中间结果不是自洽的值。诚实也延伸到性能上：流水线分配中间数组，而循环只是在加数字，所以对要处理许多次的巨大数组来说，不那么抽象的风格也许值得换那份速度。

应用与收束。最后的项目——检测一段文本用了哪些文字——迫使它绕道穿过一个真正的险处：characterScript（用 some）把一个码映射到一种文字，但要从 JavaScript 字符串里取出码，就意味着要直面 UTF-16。作者公开批评它，称它“如今一般被认为是个坏主意”，“几乎像是有意设计来招惹错误的”，并苦笑着指出，emoji 终于把这份痛苦分摊得公平了。length 和方括号索引看到的是码元；charCodeAt 给出半个马 emoji，而 codePointAt 给出真正的码；对字符串用 for/of 产出真正的字符。把这一点解决之后，countBy（建立在 find 之上）给字符分组，而 textScripts 把 countBy、filter、reduce、map 和 join 串成百分比——本章的整套工具被组合在一个函数里。小结重述了那个核心意象：高阶函数用“空缺”来给计算建模，由调用者用函数值去填，并盘点了 forEach、filter、map、reduce、some 和 find。随后四道习题要求读者自己重建这套机制——用 reduce 和 concat 压平，写一个带测试/更新/主体参数的 loop 函数，把 every 实现两次（一次用循环，一次借助 some），以及计算一段文本的主要书写方向，它重新组合了本章的 characterScript 和 countBy。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 5 章的核心概念

抽象

一套有名字的操作构成的词汇，使你能谈论一个问题而不必带上附带的步骤。

适用处： 只有当这些名字表达的是比整个程序更简单的概念时才有用；抽象得太早或太低，只会添噪音。

高阶函数

接收其他函数作为参数、或返回它们的函数。

适用处： 在 JavaScript 里并无异乎寻常之处，因为函数是普通的值；这个术语借自数学。

码元

JavaScript 字符串里的一个 16 位片段；有些字符需要两个。

适用处： length 和方括号数的是码元，而不是字符；for/of 和 codePointAt 才能触及真正的字符。

纯函数

返回一个新结果、而不修改传给它的东西的函数。

适用处： filter 是纯的；它建一个新数组，而不是从原数组里删东西。

第 6 章是怎样展开的AI 辅助

开篇：为边界辩护。本章不是以语法开头，而是以对整个事业的辩护开头。作者伸手去拿一件家用电器——一台搅拌机，它把材料科学和电气工程藏在一个光滑的壳底下，只给用户几个旋钮——来确立本章的组织性主张：一个被划分成边界严格的对象类型的程序，能让它的各部分不缠在一起，这样任何一块都可以被修复或复用，而不打扰其余的部分。这个论证随后落在读者已经信任的东西上：JavaScript 自己的数组和字符串，就是这一模式的现成证明——内部藏在一个小小的接口背后，而这种隐藏，恰是它们能完好无损地从一个程序走到另一个程序的原因。动机就位之后，本章点明它的工作单位——抽象数据类型，一种暴露有限行为、而让内部保持封装的接口——然后才开始交出机制。

第一段展开：方法、this 与原型。机制按依赖的顺序到来。方法最先，并带来本章第一个真正的微妙之处：一个普通函数得到它自己的 this，在调用的那一刻、由函数是怎样被调用的来绑定，而不是由它的文本恰好坐在哪里来绑定。其后果是那个经典的伤口——把一个方法当作回调递出去，它就丢了写在它旁边的那个对象。箭头函数恰恰被作为补救引入，因为它们不声明自己的 this，而一直看着外围方法的对象，这就是为什么传给 find 的箭头回调仍然表现正常。原型随后作为共享的机制登场。一个对象链接到一个原型，对象自己缺的属性会沿着这条链去找，直到链的尽头；因为自有属性先被查询，在一个实例上赋值就会创建一个自有属性，把原型的那一份遮住。本章用兔子把这条规则变成设计规则：一只“原型兔”持有每只兔子共享的说话行为，而一只被赋予了自己那一副牙齿的杀手兔，只改变它自己——新造出来的兔子和原型仍然报告默认值。共享的默认值与每个实例的差异并存，而原因是查找的顺序。

转入记法的转折，以及从同一条规则里引出的警告。类语法是作为方便、而不是革命登场的，本章在这一点上很谨慎：class 产出一个构造函数，外加它背后共享的原型，这种记法直到 2015 年才到来，而一个用 new 调用的普通函数，也干同样的活。原型仍是底层。围绕这种记法，本章收集了实用的家什——私有的 # 属性、覆盖、getter、setter、静态成员和多态。然后是本章最锐利的反转，而这是对读者自己信心的反转：让共享变得优雅的同一套原型查找，使一个普通对象不能安全地充当查找表。年龄的例子把一个真实的人报告为未知，却愉快地声称“知道” toString，因为命中来自 Object.prototype，而根本不是来自数据。给出的补救——一个真正的 Map、一个没有原型的对象，或一次显式的自有属性检查——不如那个教训有趣：方便与 bug，可以是从两个角度看的同一个特性。

第二个转折：符号，以及它们解锁了什么。符号是通过一个冲突、而不是一条定义引入的。一条用米来度量长度的路线，不可能同时遵守数组式的 length 含义，所以没有任何建立在字符串名字上的方案，能同时服务两个接口；符号作为唯一的值而存在，却仍能充当属性名，让一个协议占一个与任何东西都不冲突的槽。这是本章后半部分摆动所围绕的铰链，因为它解释了为什么迭代挂在 Symbol.iterator 上，而不是一个普通的词。可迭代/迭代器接口随后先用手来教——从字符串上取下 Symbol.iterator，调用得到的迭代器，直到它报告自己完成——然后才被正式地建起来：一个独立的迭代器类，追踪自己沿着链表走了多远，这就是让自定义的 List 与 for/of 和展开语法合作所需要的全部。值得提一句，以防一种自然的矫枉过正：只有 Symbol.iterator 是符号，而 next、value 和 done 仍是普通字符串。符号只花在确有可能冲突的地方。

收束：继承，带着保留。继承排在最后，而且带着限定。extends、super 和 instanceof 被完整地呈现，包括一个由前面一切推出来的机械要点：子类实例所继承的状态，要等到超类的构造函数运行过才存在，所以 super 必须排在最前——在 length-list 的构造函数里写 this.length，会在私有的 #length 字段仍未填好时触发类自己的 getter。随后本章拒绝以庆祝收尾。颠倒面向对象美德的惯常排序，作者论证说，继承比封装和多态更应受到怀疑，各以它对耦合的作用来评判：后两者让各部分彼此保持不知情，而从一个类继承，往往逼你比单纯使用它更深地去理解它的内部。继承作为派生现有类型的变体的一种紧凑办法，得到了它应得的认可——但它把代码绑在一起，而不是拉开，而对原型、类、封装和多态的小结，就收在这个刻意令人不舒服的音符上。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 6 章的核心概念

抽象数据类型

一段子程序，其复杂的内部保持隐藏，只提供一小组方法和属性供使用。

适用处： 执着于把单个对象当作单位，可能会误导，因为有用的功能往往横跨几个相互合作的类。

接口

外部代码被允许对一个值执行的操作的集合；其余一切都是内部的。

适用处： 两个接口可能想要同一个属性名，而字符串解决不了这个问题。

原型

另一个对象所链接的对象，于是缺失属性的查找会落到它那里去。

适用处： 链在一个没有原型的对象处终止，而自有属性会遮住原型的属性。

类

把一个构造函数与共享方法打包在一起的声明，定义一类对象的形状。

适用处： 构造函数必须用 new 调用；class 直到 2015 年才被加入，任何函数都可以充当构造函数。

多态

按预期接口来写代码，使任何支持该接口的值都能插进去。 按某个接口写的代码，能与任何实现了该接口的对象一起工作。

适用处： 只有当值真正支持整个预期接口——比如 length 加上带编号的属性——时才行得通。 要求这些对象确实提供了约定的接口。

符号

一个可用作属性名的唯一值，使各个接口永远不会在名字上冲突。

适用处： 那个描述性的字符串只是为了辨认；几个符号可以共用一个名字。

第 7 章是怎样展开的AI 辅助

开篇：先有世界，再有工人。本章宣告自己是对理论的一次中断——一个“项目”章，要点是读一个真实的程序，而不是吸收新语法——并把目标定为建造一台自动机：玩具村庄里一个送信的机器人。迪杰斯特拉那段关于潜艇和游泳的题词，定下一种消胀的调子：别问这东西是否智能，要问它是否把活干了。第一个具体的动作，是造世界，而不是造机器人。Meadowfield 被给成一个由 14 条道路字符串组成的扁平数组，文中随即嫌它用起来别扭，由 buildGraph 把它转换成一张从每个地点到其可达邻居的映射。这次小小的重构确立了本章的工作方法：在解决任何事之前，先把数据重塑成问题真正需要的形式。

展开：伪装成建模步骤的设计论证。手里有了地图，本章陈述任务——取包裹、送包裹、每一步决定往哪儿走——然后停下来，写出它最有主见的一段。读者为机器人、包裹和地点写类的那个“第一冲动”被点名并被断然否决：听上去像对象，并不让某样东西成为对象，而条件反射式地写类，会得出彼此纠缠的可变状态之网。取而代之的是一份最小的状态描述——机器人的位置，加上一份未送达包裹的列表——装进 VillageState，它的 move 方法先验证道路，再用 map 带着手上的包裹一起走、用 filter 丢掉已送达的，返回一个新状态，而不是修改旧的。一个简短的演练证明了这一点：移动之后，next 显示送达已完成，而 first 仍描述原来的情形。本章随后退一步，把这推广成一节关于持久数据的内容，引入 Object.freeze，同时坦率承认作者通常只是请人别去修改东西。给出的理由明确是关于人的局限：稳定的值让你能孤立地推理操作，而“对我们能构建什么样的系统，最重要的限制是我们能理解多少”——不过也承认，在一门不帮忙的语言里，用持久结构来设计更难。

转折：三个机器人，一个比一个聪明。模拟那一节把机器人定义成一个从状态（外加记忆）到方向（外加新记忆）的函数，由 runRobot 循环驱动，没有包裹时停止。本章随后有意地升级。先是 randomRobot，被说成“可能奏效的最笨的策略”——它乱逛，靠纯粹的概率，终究会完成，耗时约 63 个回合。然后是 routeRobot，它借自真实的邮件投递：一条存在记忆里的、固定的 13 站环线，每回合消耗一个元素，保证最多 26 个回合内完成。每个机器人都是靠点出前一个的弱点来引入的，所以这个递进读起来像诊断，而不是一份清单。

寻路作为智识上的回报。沿固定路线走被斥为不智能——它无视真正要做的工作——这催生了本章唯一一段真正算法性的内容。寻路被框成一个搜索问题：解可以被检查，却不能被直接算出，所以必须生成候选，并通过只从 A 出发、永不重访一个地点来修剪搜索空间。findRoute 借助一份工作列表实现了广度优先搜索，文中仔细地解释了顺序为什么要紧：一到某个地点就立刻去探索它，会在考虑较短的替代路线之前，就连锁地陷进很深的路径。给出的意象，是一张路线之网均匀地向外爬，直到有一根线碰到目标。一条说明指出，代码从不处理工作列表耗尽的情形，因为村庄的图是连通的。goalOrientedRobot 随后把它接进来：取第一个未送达的包裹，若还没取到就朝它寻路，否则朝它的地址寻路——大约 16 个回合，比路线机器人好，但文中承认，仍不是最优。

收束：把活儿交出去。本章没有去填平那道缺口，而是把它转成习题。“度量一个机器人”要求写一个 compareRobots 函数，让两个机器人各跑 100 个相同的任务——回应那个公平性的担忧：任何单次运行都可能只是运气好。“机器人的效率”邀请读者找出 goalOrientedRobot 做的那些“显而易见的蠢事”并超过它，用比较工具来验证。“持久集合”绕回本章的哲学线索，要求写一个 PGroup 类，它的 add 和 delete 返回新实例，并带一个共享的 PGroup.empty 起始值——并以一个问题收尾，那其实是对本章全部论证的一次理解检查：为什么一个空实例就够了？所以本章结束时没有一个完工的机器人，而是一个未完工的，被有意留作读者的问题。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 7 章的核心概念

图

由线连起来的点；这里是由道路连起来的村庄地点。

适用处： 第7章假定这张图是连通的，所以搜索永不失败。

持久数据

永不改变的值；更新产生全新的值。

适用处： JavaScript 不强制这一点，所以它需要自律，设计起来也更难。

复杂性

你还能把自己的系统多少装在脑子里。

适用处： 小系统可以承受可变状态；抱负受限于理解。

广度优先搜索

从起点向外生长各条路线，使找到的第一条路线就是最短的。

适用处： 需要一份工作列表，并跳过已到过的地点；依赖一张连通的图。

第 8 章是怎样展开的AI 辅助

开篇：找出真正的罪魁。本章开头不是一项语言特性，而是一个关于人的主张。计算机程序里的缺陷通常是程序员自己造成的——要么是对程序该做什么的思路混乱，要么是对一个其实正确的想法的草率抄写。从这里起，作者巡视了 JavaScript 的各项保障，发现它们很单薄。像 true * “monkey” 这样的表达式根本不招来任何抱怨；它悄悄地产出 NaN，而这个值随后沿着后面的计算往前走，直到碰上应付不了它的代码。其后果就是本章的组织性难题：因为语言拒绝反对，可见的症状浮现在离真正的错误很远的地方。严格模式被引入，作为对这份宽松的部分收紧，可选的类型标注（借助 TypeScript 之类的系统）则是进一步的、外部的纪律——但两者都没有补上缺口。隐含的论证是，如果语言不保护你，你就必须自己建起保护。

展开：程序员自己的保障。本章的中段按形式化程度递增的顺序，把这些保护组装起来。自动化测试最先——一种在几秒钟里、而不是手工地重新检查预期行为的办法。然后是有纪律的调试，通过一个演练的例子呈现：一个行为不对的数字转字符串函数，在每一轮里把 n 记下来，会显出 13、1.3、0.13 这个序列，从而把故障钉在一个永远产生不出整数的除法上。从这一插曲推广出的要点是方法性的而不是技术性的：调试就是对失败形成一个理论，并拿观察去检验它，而不是随意改代码，直到症状消失。测试和日志都是为这同一种检验理论服务的工具。本章随后转向传达失败——先是通过特殊的返回值，再是通过异常，而比较的结果偏向异常，出于一个具体的结构性原因。抛出的异常会展开调用栈，一个个丢掉待返回的调用，直到碰到一个外围的 try/catch，这意味着中间的函数完全不需要传递错误的代码。询问方向的例子把这一点说得具体：内层函数在输入无效时抛出，外围的 look 函数对这件事可能发生完全不知情，而外层的处理程序把它报告出来。

转折：处理不等于安全。本章随后让它自己的建议变得复杂，这是它最锐利的一招。因为那一跳可能把一个函数丢在它的副作用进行到一半的地方，它所修改的状态就可能被留在不一致的状态——转账的例子先扣了钱，才去查第二个账户，所以那一刻抛出的异常会让这笔钱直接消失。捕获异常并不能撤销已经发生的事；要保持状态连贯，要么仔细安排副作用的顺序，要么在 finally 块里修复它们，不论控制权以什么方式离开 try，finally 都会运行。紧接着是第二个麻烦：一网打尽的捕获。一个为某个预期的失败而写的 catch，也会吞掉不相干的失败。作者用一个 try 里拼错的函数名来演示这一点——由此产生的未定义绑定错误被当作用户输入有误，于是重试的循环永远转下去，而本可以指认那个笔误的消息永远到不了开发者那里。于是有了那条规则：不要不加区分地捕获，除非是有意地转送或报告失败。

化解：按类型认出，并大声地失败。补救是收窄处理程序。作者没有去匹配错误消息的文本——那是写给人读的字符串，所以任何改写或翻译都会悄悄弄坏逻辑——而是定义了一个空的 Error 子类，用 instanceof 检验传来的异常，凡不匹配的就重新抛出。这种认出必须可靠，恰恰因为重新抛出就取决于它。本章用断言结束这条线索：一个取第一个元素的辅助函数，在数组为空时抛出，而不是返回 undefined，使误用在错误旁边引爆，而不是向后渗漏。随附的告诫与技巧同样要紧——断言是为程序员犯的错、为这个函数本就没被设计去应付的用法而设的，不是为你在运行时预期会出现的情形，那些属于普通的处理；什么都检查，只会让代码杂乱。本章以一份汇集它各件工具的小结收尾：测试、特殊返回值、异常，和 finally。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 8 章的核心概念

严格模式

一种更严格的 JavaScript 方言，用 “use strict” 开启，它会报错，而不是悄悄发明全局变量。

适用处： 当拼错的绑定在作用域里已经存在时，它帮不上忙；类和模块自动是严格的。

自动化测试

写一个其工作是检查另一个程序的程序，这样你就能在几秒钟里重新验证行为。

适用处： 只覆盖你写过测试的那些情形，而与许多外部事物交互的代码很难搭建。

异常

一个被抛出的值，它跳出当前函数及其调用者，直到某个 try/catch 块把它捕获。

适用处： JavaScript 不能有选择地捕获；展开还可能跳过副作用，而 finally 块必须修复它们。

调用栈

待返回的函数调用链；异常会展开它，在往下走的路上丢掉各个调用上下文。

适用处： 未被捕获地到达栈底，处理就留给了环境，而这在浏览器和 Node.js 之间有所不同。

自定义错误类

Error 的一个空子类，它唯一的任务是给异常一个可辨认的类型。

适用处： 只有当调用者需要把这个失败与其他失败区分开时才有用；它自己不增加任何行为。

断言

程序内部的一次检查，当代码被用在它本不该被使用的方式上时，大声失败。

适用处： 用于程序员的错误，而不是预期的运行时情形；为每个错误输入都写，会让代码嘈杂。

第 9 章是怎样展开的AI 辅助

开篇：一次让步变成了论证。本章不是以推销正则表达式开头，而是以承认它们难看开头。作者重复了那个耳熟的笑话：用正则表达式解决一个问题，会留下两个问题——原来那个，加上你刚写下的那个读不懂的模式。这次让步是开篇这一招的铰链。认下了审美上的反对意见之后，作者把问题挪了位置：决定一件工具会不会变得无处不在的，不是优雅，而是合用和历史的运气。正则表达式占着一个真实的生态位——描述文本的形状——并且它们被焊进了 JavaScript 本身，所以学会那套晦涩记法的代价只付一次，却永久收回。主张不是“这很美”，而是“这会让你的效率可衡量地提高”，这为随后很长一段技术内容发了通行证。

展开：一块一块搭起记法。从这里起，本章稳步累积词汇，大致按可组合性的顺序。先是构造模式的两种办法——斜杠之间的字面量，或 RegExp 构造函数——然后是 test，用来问最简单的问题。然后是字符集和简写，本章在这里埋下一粒以后要收割的种子：\w 及其同类是在一个更以英语为中心的时代定义的，所以 é 和 β 根本不算“单词字符”，而 /\p{L}/u 却能正确匹配希腊字母 α。作者对此持平：Unicode 属性组更啰嗦，需要 u 标志，而当数字是要送去给 Number 时，\d 仍是更好的选择——但在英语之外的文本里，说“字母”的可靠办法是属性组。重复运算符（+、*、?、{n,m}）接着来，然后是分组，然后是带着按索引的分组结果的提取工具 exec 和 String.match，然后是让分组派上用场的 Date 例子，然后是边界标记（^、$、\b）和前瞻，最后是用 | 表示的选择。

转折：从记法到机器。本章的转折是关于匹配引擎的那一节，它改变了所提供的理解的种类。到此为止，读者一直在收集符号；现在他们被展示了什么在运行。这个模型是一种带记忆的搜索：引擎从最左边的位置开始，在每个选择点记下自己当时所在的位置，这样失败的分支可以被放弃、另一个分支可以被尝试。被追踪的例子，是拿 “103” 去匹配一个数字模式——引擎进入二进制分支，撞上 3 而失败，退回去试十六进制，最后在十进制分支上成功。这一课很精确，值得抓牢：所报告的匹配，反映的是各分支被尝试的顺序，而不是对各种可能的穷尽调查。第一条可行的路线获胜，而不是最好的或最长的那一条。

实际的后果。回溯的图景随后被兑现成规则。第一条也是最重要的一条：贪婪的重复运算符尽可能多地抓，只有当模式的其余部分失败时才交出字符，所以留存下来的匹配可能远远伸过你原本想让它停下的地方。加上 ? 就颠倒了尝试的次序——从小处开始，只在压力下才增长——而注释剥离器把这里的利害说得具体：/\/\*[^]*?\*\//g 把 “1 /* a */+/* b */ 1” 变成 “1 + 1”，而贪婪的版本从第一个 /* 一路跑到最后一个 */，把两段注释之间的代码吃了。注意这不是什么：? 并不决定匹配是否存在，只决定在几种可能的匹配里选哪一种——而这正是它危险的原因，因为一个过大的匹配会悄悄地败坏结果，而不是大声地失败。作者的建议是，把非贪婪当作默认。接下来还有两个陷阱。由你没写的字符串拼出来的模式，必须先转义：像 “dea+hl[]rd” 这样的用户名直接交给 RegExp，会被当作运算符来读，而把它送过 replace(/[\\[.+*?(){|^$]/g, “\\$&”) 才让它重新成为字面文本。以及，全局或粘性的表达式把它的下一个起始位置存在自己身上，所以在多次 exec 调用之间共享同一个 /\d/g 对象，会在第一个字符串里找到 “1”，然后在第二个字符串上返回 null，因为遗留的 lastIndex 让搜索开始得太靠后。g 标志并没有被谴责——replace 需要它，有意设置位置也用它——警告专门针对的是在多次 exec 调用之间共享这样的对象。

收束：一个应用，和最后一个标志。本章结束时，让累积起来的机制去干真正的活。matchAll 提供了更干净的、不用循环的办法来遍历每一个匹配；search 和 lastIndex 补全了接口。然后 INI 文件解析器作为综合的例子登场：一种面向行的格式被逐行处理，表达式都带着完整的锚点，这样一个模式就不会悄悄匹配到一行里本不该接受的片段。收尾的一笔回到字符类的讨论中断的地方——u 选项，需要它是为了让由两个码元组成的字符被当作单个单位，而不是悄悄被劈开。于是本章回到它开始的地方，回到这套记法那个以英语为中心的 20 世纪 90 年代的默认值，与人们实际处理的文本之间的缺口，而如今手里有了合上这道缺口的工具。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 9 章的核心概念

正则表达式

一种小型的模式语言，作为一种对象类型嵌在 JavaScript 里，用来描述字符串里文本的形状。

适用处： JavaScript 的版本在处理非英语字符上历来很简陋，所以 \w 和 \b 会误判 é 这样的字母。

回溯

当一个分支或重复失败时，引擎回到一个记下的位置，试另一条路。

适用处： 像 /([01]+)+b/ 这种能用许多种方式匹配同一输入的模式，会使每个字符的工作量翻倍。

分组

括号把模式的一部分变成运算符眼中的单个元素，并为 exec 或 replace 捕获那段文本。

适用处： ?: 关闭捕获；一个用 + 重复的分组只保留它最后一次的匹配。

贪婪重复

重复运算符先尽可能多地匹配，再回溯；加上 ? 则让它们改为从小处开始。

适用处： 只影响在几种可能的匹配里选哪一种，不影响匹配究竟存不存在。

lastIndex

正则对象上的一个属性，说明下一次 exec 匹配从哪里开始，每次成功匹配后自动更新。

适用处： 只在有 g 或 y 选项时生效，而且只通过 exec 方法。

码元

构成 JavaScript 字符串的 16 位片段；一个可见字符可能占两个。

适用处： 除非启用 u 选项，否则 . 或 {} 这样的运算符作用于码元。

第 10 章是怎样展开的AI 辅助

第10章开头不是模块，而是对它们所解决的问题的一次诊断。特夫（Tef）的题词——“写易于删除的代码，而不是易于扩展的代码”——定下怀疑的调子，头几段描述程序如何有机地生长：随着需要出现，功能被一件件拴上去，而本可让结构保持整洁的维护工作，只会在以后回报给别人，所以被跳过。随之而来的有两个后果。一个纠缠的系统抗拒局部理解，逼你把整个东西装在脑子里；而为在别处复用而提取任何有用的一块，可能比重写它还难。为此给出的意象是“一大团泥球”，扯一块，整团都散了。补救随后被精确地定义：一个模块既声明它提供什么（它的接口，类似第6章的对象接口），也声明它依赖什么（它的依赖）。显式的依赖使自动加载成为可能，并把泥巴变成乐高——用定义明确的连接件拼接的零件。

从这里起，本章轮流变得带历史感和技术性。最初的 JavaScript 根本没有模块：一切共享同一个全局作用域，这积极地招来意外的纠缠和名字冲突。ECMAScript 2015 把程序分成脚本（旧的行为）和模块，后者得到它们自己的作用域，外加 import 和 export。一个小小的星期名模块演示了机制——一个私有的 names 常量，旁边是两个导出的函数——而周围的讨论走过各种变体：用花括号导入，靠 as 改名，不用花括号导入的 default 导出，以及用 import * 把所有导出绑到一个对象上。有两条约束被强调，因为它们把 ES 模块与后来的东西区分开：模块名在不同平台上的解析方式不同（浏览器里是网址，Node 里是文件），而且 import/export 声明必须位于模块的外层主体，因为它们是在模块加载时、而不是其代码运行时解析的。

本章随后从模块拓宽到包，动因是一个具体的烦恼：把第9章的 parseINI 拷进第二个项目，意味着 bug 要修两遍。包是一块可分发的代码——一个或多个模块、声明过的依赖、文档——而分发需要基础设施，在 JavaScript 里这就是 NPM，既是一个注册中心，也是一个命令行工具。这里的口吻是坦率而不是推销：三百多万个包里，“很大一部分是垃圾”，但几乎任何有用的东西都在那里。一小段岔题讲了许可——你默认拥有自己的代码；NPM 上的大多数代码带着宽松的许可，社区更喜欢要求更少的那一种——然后是回报：import {parse} from “ini” 取代了我们自己写的解析器。

向后的转折随 CommonJS 而来。因为 2015 年之前就已经在建大型系统，社区用语言本身即兴搭出了模块系统——最先是立即调用的函数表达式，把一个接口对象赋给一个全局变量，这带来了隔离，却仍然不声明依赖。CommonJS 用 require 和 exports 做得更好，由一个引入 ordinal 和 date-names 两个包的 formatDate 模块来说明。本章随后掀开引擎盖，定义了一个简化的 require，它读一个文件，用 Function 把它包起来，缓存结果，并把 require 和 exports 作为参数传进去——顺带指出 Function 既有趣又危险，而 readFile 只是个假装，因为文件访问是与环境相关的。关键的对比是，require 是在模块运行时发出的一次普通函数调用，所以它能出现在函数里面，也能接受算出来的名字，而导入则是事先解析的。结论是务实的：这次过渡缓慢而粗糙，CommonJS 仍会冒出来，但没有理由再用那种风格写新代码。关于构建和打包的一小节延伸了“不太算 JavaScript 的代码”这个主题——从 TypeScript 之类的方言编译，打包工具把你精心拆开的文件重新合起来（因为网络往返很贵），以及压缩工具把剩下的缩小。作者拒绝点名具体的工具，因为流行哪一个一直在变。

最后一个实质性的小节，从机制转向判断。好的设计是主观的，涉及取舍，要靠读许多程序来学——但本章坚持，你绝不该把一团令人痛苦的乱麻当作不可避免的东西接受。随后是几条原则，各自从已在上演的 INI 和寻路世界中举例：有现成约定的地方就遵循它（ini 模仿 JSON 的 parse/stringify）；让模块专注于计算值，而不是执行副作用，因为一个坚持要从磁盘读取的解析器，在浏览器里没用，在内容来自别处时也没用；偏爱函数而不是有状态的对象，偏爱数组而不是自定义类型，因为把数据包在专门的类型里，会逼周围所有的代码都去了解它。dijkstrajs 的例子把可组合性这一点说得很尖锐：它的带权边格式与第7章的图不同，所以用它需要一个转换循环——于是有了“采用别人已经在用的数据结构”这条建议。收尾的一个让步软化了这条处方：当你仍在探索一个问题时，别让组织分了你的心；等某样东西感觉稳固了再整理。小结重述了接口、依赖、如今“不安地共存”的两套模块系统，以及 NPM，而习题把读者送回第7章——把机器人项目分解成模块，写一个依赖 ./graph.js 的 roads.js，并弄清手写的 require 靠在运行模块之前先缓存 exports 对象，怎样容忍一种有限形式的循环依赖。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 10 章的核心概念

模块

一个程序部件，既声明它的公开接口，也声明它所依赖的其他部件。

适用处： 只有当依赖是在模块自己里声明、而不只是由全局名字暗示时才有帮助。

接口

模块被有意暴露给外部的那一部分，其余部分保持私有。 模块中允许其他模块看到并使用的那一部分。

适用处： 单有接口只是故事的一半；没有声明的依赖，模块系统是不完整的。 只涵盖被导出的东西；内部的代码保持隐藏。

依赖

一个模块使用另一个模块的功能的关系，被显式地陈述。

适用处： 主要在机器可读时有用，这样加载器就能自动解析并加载它们。

一大团泥球

一个没有结构的大程序，其中抽出一块就把一切都拽了出来。

适用处： 这描述的是结构上的失败，而不单单是程序的规模。

包

一块自成一体、你可以发布、别人可以安装的代码。

适用处： 一个包可以容纳许多模块；质量参差不齐。

循环依赖

两个模块各自需要对方，直接地或通过一条链。

适用处： 只有当两个模块在加载期间都不去碰对方的接口时才可容忍。

第 11 章是怎样展开的AI 辅助

开篇：一个被摆成两个坏选项之间的选择的问题。本章开头不是语法，而是一个时序的谜题。如果一个程序一个接一个地发出两个网络请求，总的等待至少是两次响应时间之和——数据包在路上跑时，处理器闲着。出路只有两条：开第二个线程，或让请求不阻塞地开始。作者指出，对带线程的代码做推理出了名地困难，而这恰恰是 JavaScript 平台转而走了异步这条路的原因。同步与异步的对比，于是被框成一个有明说动机的设计决定，而不是一种中立的分类。随后的一切，都是为让所选的这条路写起来能忍受而作的努力。

展开：回调，以及它们造成的伤害。提供的第一件工具是普通的回调——异步函数不能立刻交回一个结果，所以它接受一个稍后调用的函数。作者随后显示这种风格为什么有传染性。因为内层函数不能返回它的结果，建在它上面的任何东西也不能；每个调用者也都得变成异步，并带上自己的一个回调。compareFiles 的例子把代价摆出来：一个读文件的回调嵌套在另一个里面，每多一步就买下又一级缩进。失败的处境更糟，因为没有东西自动地转送它们，每一层都得手动转交错误。Promise 就是为修补这恰好两处伤而来。函数又能返回有意义的东西了——作者把同样的活儿重建成一条 then 调用链，randomFile 解析文本、挑一个条目、读那个文件，整条链作为单个 Promise 交回。而失败现在自己上路了：因为每个 then 或 catch 都产生一个新的 Promise，这条链就成了一条流水线，一个被拒绝的值沿着它跳过各个值处理函数，直到有一个 catch 接住它，随后那个处理函数的返回值就作为一个普通值继续往下走。于是一个处理函数可以覆盖许多步。

转折：读起来像我们出发时那种同步代码的记法。Promise 仍然把一种别扭的形状强加给本质上是顺序的工作，而卡拉的口令破解器就是展品。你没法在 for 循环里等待一个 Promise，所以 Promise 版本必须改写成一个递归函数——尽管这个任务本质上是线性的，总是等一次尝试结束才开始下一次。async/await 的版本不过是一对嵌套的循环，带着普通的 try/catch。作者把这呈现为叠在同一套机制之上的一种更易读的记法，而不是对它的替代；但书说得明白：底下你仍然需要理解 Promise。这是本章的铰链，也是预先挡掉一种常见误读的地方：async 函数返回 Promise、也 await Promise，所以那套机制从未真正离开。

收束：掀开引擎盖，以及藏在底下的险处。交出便利的表面之后，本章转向产生它的东西。生成器在 yield 处暂停，并带着局部状态原封不动地恢复——作者把先前光为保存位置就需要一个独立对象的 Group 迭代器，改写成一个短短的生成器，遍历成员并逐个产出。async 函数随后被揭示为一种特殊的生成器，一种返回 Promise 的生成器。卡拉的活儿提供了实用的音域：扫描本地网络，然后通过 Promise.all 和一个 async 的播放循环驱动九块 LED 显示牌。最后一招是个警告。单个事件循环一次在空栈上把一个回调运行到完，这就是为什么回调的异常没有外围的 try 去捕获它——调度它的代码早已结束。而因为每个 await 都是一次真正的暂停，其间别的排队代码会运行，所以跨过这个间隙去修改共享绑定的代码，会把自己弄坏：在作者的例子里，每个 += 都从空字符串重新开始，于是输出塌成一行，只点出最慢的那个文件。本章以这一课的两半收尾——构建新值，而不是修改共享的值；但也从 await 是显式写出来的这一事实里得到一点安慰，所以别的代码得以闯入的间隙，至少在页面上是看得见的。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 11 章的核心概念

异步性

一种模型：启动一个缓慢的动作并不使程序停下；结果准备好时，你稍后会被告知。

适用处： 它缓解了非线性的控制流，却使直线式的代码更别扭。

回调

异步操作完成时调用的一个额外的函数参数。

适用处： 随着动作被串起来，嵌套和错误报告变得笨重。

Promise

一个代表可能稍后才到的值的对象；then 登记拿到它之后要做什么。

适用处： 串联仍需要冗长的接线，而 async 函数缓解了这一点。

拒绝

Promise 的失败状态，带着一个原因，沿着链往下传播，直到某个 catch 处理函数接住它。

适用处： 未被处理的拒绝，会被环境报告为错误。

async 函数

一个标了 async 的函数，它返回一个 Promise，并且可以 await Promise，使异步代码读起来像同步代码。

适用处： 你仍需理解 Promise，因为你会直接与它们打交道。

生成器

一个用 function* 声明的函数，它返回一个迭代器，并在每个 yield 处把自己冻结。

适用处： yield 只能直接用在生成器函数体里，不能用在嵌套的函数里；它只保存局部环境和 yield 的位置。

第 12 章是怎样展开的AI 辅助

本章开头先把围绕语言实现的神秘感戳破。阿贝尔森（Abelson）和萨斯曼（Sussman）的一段题词提醒我们，求值器“不过是另一个程序”，作者随后附上一段个人的话：那些看似聪明得不可能的发明，往往在你读一读、试一试之后，原来平平无奇。由这个前提而来的是这个项目——Egg，一门小小的语言，却强大到足以表达任何计算，并通过函数支持抽象。

展开从语法和解析开始。Egg 彻底统一：一切都是表达式——一个绑定的名字、一个数字、一个字符串，或一次应用——而应用不仅用于函数调用，也用于 if 和 while 这样的构造，这意味着 JavaScript 的运算符成了普通的绑定，并且需要一个 do 形式来表示顺序。解析器的输出是一棵由带 “value”、“word” 和 “apply” 标签的对象构成的语法树。作者明确把它与前面某章里面向行的配置解析器对比：表达式递归地嵌套，所以解析器也必须是递归的。parseExpression 匹配三种原子形式之一，否则抛出 SyntaxError，并交给 parseApply，后者要么原样返回表达式，要么消耗一个带括号的参数列表，对每个参数回头调用 parseExpression，然后对自己递归，以允许 multiplier(2)(1) 这样的链式调用。一个包装函数 parse 检查在那唯一的顶层表达式之后没有别的东西。作者承认解析器的弱点——糟糕的错误消息，没有行号和列号的追踪——但认为它够用了。

转折随求值器而来，本章的要点在这里落地：运行一个程序所需的代码少得惊人。evaluate 按表达式类型分支——字面量产出它的值，单词在一个作用域对象里被查找，否则引发 ReferenceError，而应用要么分派给一个特殊形式，要么对运算符和参数求值，再调用得到的 JavaScript 函数。作者强调，解析器和求值器彼此镜像，因为两者都镜像着语言，把它们分开带来了清晰和灵活。特殊形式随后补上缺失的力量：if（一个表达式，比起 JavaScript 的 if 更接近 ?:，只把 false 当作假）、while、do 和 define。关键的解释是为什么 if 不能是普通函数——函数的参数都在调用之前被求值，而 if 只该求值一个分支。随后是环境：true 和 false 作为普通绑定，用 Function 在循环里合成的算术和比较运算符，一个 print 包装，以及一个用原型链表示嵌套作用域的 run 辅助函数。前面几章见过的 1 到 10 求和程序，现在在 Egg 里跑起来了，承认比它的 JavaScript 等价物更难看，却是由不到 150 行代码产出的。加上 fun，它把最后一个参数当作函数体、其余当作参数名，并在一个全新的局部作用域里求值函数体，语言就完整了，用 plusOne 和一个递归的 pow 来演示。

收尾的几节拓宽了框架。“编译”把所造的东西——直接作用于解析树的解释器——与预先做工作的编译器区分开来，后者比如把绑定解析到固定的位置，并提示说，把 Egg 翻译成 JavaScript 再调用 Function 会既快又简单，作为一道可选的习题给出。“作弊”随后承认了显而易见的事：Egg 的 if 和 while 是 JavaScript 的薄薄包装，它的值就是普通的 JavaScript 值；桥接到机器码要多费些力气，但原理相似。作者最后一招，是在教学之外为整个事业辩护——小语言能干真正的活，从手搓的正则表达式求值器，到被编译成解析器的语法记法——并走到领域特定语言这个概念，它之所以能胜过通用语言，恰恰因为它只描述自己那个狭窄的领域。四道习题收束本章，各自扩展这个实现：添加数组函数，解释为什么 fun 已经产出闭包，让 skipSpace 把 # 注释当作空白，以及添加一个 set 形式，它沿原型链走，去更新外层的绑定，而不是遮住它们。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 12 章的核心概念

程序

在 Egg 里，整个程序就是一个单独的表达式，这就是为什么 parse 要检查没有剩下任何东西。

适用处： 对 Egg 统一的语法成立，对有语句和块的语言不成立。

表达式

Egg 里的一切都是表达式：一个名字、一个数字、一个字符串，或一次应用。

适用处： Egg 没有语句，也没有块结构，因此才有 do 形式。

语法树

解析器产出的嵌套对象，表达式像树的分枝那样包含其他表达式。

适用处： 这棵树不记录行号或列号，所以错误报告仍然粗糙。

特殊形式

一个绑定到函数的单词，它接收未求值的参数表达式外加作用域，所以能选择求值什么。

适用处： 恰在对所有参数急切求值会出错时才需要，如 if 和 while。

作用域

一个把绑定名映射到值的普通对象；嵌套的作用域用原型链构建。

适用处： 一旦需要更新外层的绑定，把作用域表示成普通对象就变得别扭。

领域特定语言

一门只为一个狭窄领域设计的小语言，使它能比通用语言更直接地说那些事。

适用处： 只有领域狭窄时才值得；一门玩具式的通用语言，比起 JavaScript 毫无增益。

第 13 章是怎样展开的AI 辅助

开篇：一段框定的题词，和一个关于乱的警告。本章以蒂姆·伯纳斯-李（Tim Berners-Lee）那句把 Web 说成“一个共同的信息空间”的话开头，定下理想主义的调子——普遍性，可以指向任何东西的链接。马里金·哈弗贝克随即把那份理想主义落在务实的必要上：没有浏览器，JavaScript 就无足轻重，所以接下来的几章必须去讲它们。不过，开篇真正的论证动作，是引入本章的统领性张力：Web 技术是以去中心化的、临时凑出的方式演化的，厂商发明特性，这些特性有时被别人抄走，很晚才被标准化。这被称作“既是福也是祸”——缺乏中心控制是赋能的，却造出一个“算不上内部一致的光辉典范”的平台。随后的一切，都是为解释这是怎么发生的而组织的。

展开，第一部分：自底向上搭起这一摞。正文随后分层推进，每一层都搁在前一层上。先是网络的历史——20世纪50年代计算机之间的电缆，80年代的全球互联网——以及那个关键的洞见：沿着导线射出比特毫无意义，除非两端就编码达成一致。这引出协议的概念，用 HTTP 和它的 GET /index.html HTTP/1.1 请求行来说明，然后是它底下的 TCP，通过端口、监听的服务器、连接的客户端，以及“双向管道”的比喻来解释。要点被明说为抽象：TCP 藏起了原始发送数据的凌乱。在此之上是 Web 本身——被小心地与整个互联网区分开来——然后是被分解成协议、服务器和路径的 URL，然后是 IP 地址和域名，以一次具体的走查结束：你键入 eloquentjavascript.net/13_browser.html 时，浏览器实际上做了什么。

展开，第二部分：从传输到文档再到代码。本章接着从管道转向内容。HTML 是用一份完整的示例文档引入的，然后被剖析：doctype，head 与 body，带开始和结束标签的元素，href 这样的属性，<meta> 这样的空标签，以及作为 HTML 对应于 JavaScript 反斜杠转义的实体（<、&、"）。这里一个值得注意的小动作，是对 HTML 容错的演示——同一份文档去掉 <html>、<head>、<body>、结束的 </p> 标签和属性的引号，被显示出解析结果完全相同——这既说明了浏览器被标准化了的宽容，也让作者能为他在后面例子里要用的简写辩护（同时警告读者别模仿这些省略）。关于 HTML 与 JavaScript 的一节随后把这两条线接起来：带内联代码的 <script>，指向外部文件的 <script src=...>，忘了 </script> 的险处，用于 ES 模块的 type=“module”，以及 onclick 这样的事件属性及其嵌套引号的问题。

转折：从能力到约束。“在沙箱里”标志着方向的改变。在本章里一直展示浏览器里的 JavaScript 能够触及什么之后，作者停下来解释它有意触及不了什么。推理从读者自己的处境出发——你每次浏览，都在运行陌生人写的代码——并得出结论：Web 的吸引力，取决于不必信任你访问的页面。于是有了沙箱化，并给了它一个令人难忘的意象：罩着粗钢条笼子的沙盒。这一节对困难是诚实的，而不是得意的：难处在于给程序留出足够有用的空间，因为真正有价值的能力（与其他服务器交谈、读剪贴板）正是能造成隐私侵犯的那些能力。它收在一个持续的循环上——漏洞被发现，漏洞被修补，新的漏洞——带着一个有所指的希望：这些发现被公开，而不是被机构或罪犯悄悄利用。

收束：历史，和一个带保留的圆满结局。最后一节回到开头宣布的去中心化主题，这回被讲成叙事：Mosaic，然后是 Netscape，然后是 Internet Explorer，每一个占主导的厂商都觉得自己“有权单方面发明新特性”，造成了浏览器大战和 2003 年前后那种满是 bug 的不兼容。Firefox 的挑战，Chrome 的到来，Safari 的崛起，把一个垄断变成了四个彼此竞争、对标准更讲纪律的玩家，最终是微软用 Edge 取代了 Internet Explorer——到这时，读者被告知，“就当自己走运吧”。但本章没有给出一个干净的化解：随着 Firefox 萎缩、Edge 在 2018 年成了一个以 Chrome 内核做的包装，今天这份受欢迎的统一，也许不过是一次新的单一厂商的支配，这回是谷歌的。最后一段直白地合上了圈——这“一长串的历史事件与意外”就是我们拥有的平台——并把接力棒交给将要为它写程序的各章。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 13 章的核心概念

网络协议

在网络上通信的一种约定的方式，使双方都知道比特的含义。

适用处： 只描述约定；大多数协议建立在其他协议之上，而不直接碰原始的线路。

HTTP

浏览器向服务器索取一个有名字的资源（如页面或图片）所用的协议。

适用处： 只涵盖请求和打包资源；它依赖 TCP 来做有序的交付。

TCP

一种协议，把原始的射出比特，变成一个监听的服务器与一个连接的客户端之间的有序的双向管道。

适用处： 每个监听者需要一个端口号；它可靠地交付字节，却对其含义只字不提。

URL

Web 上一个文档的名字，由协议、服务器和路径构成。

适用处： 命名一个资源；解析服务器那一部分，仍需要把域名翻译成 IP 地址。

HTML

网页的文档格式：文本加上赋予它结构的标签。

适用处： 被容错地解析，所以缺失的标签会被补上——但 doctype 和字符集仍应写出来。

沙箱化

把一个下载来的程序隔离起来，使它能作用于它的页面，却不能作用于你的文件或机器。

适用处： 硬性的限度是有用与安全之间的权衡；新的逃逸漏洞不断被发现、被修补。

第 14 章是怎样展开的AI 辅助

本章一开头就引入浏览器对一个已加载页面的表示：服务器发来的 HTML 被解析成一棵由有类型的节点构成的实时的树，而这棵树——DOM——才是 JavaScript 实际操纵的东西。作者的第一个动作是一条说明，而不是欢呼。这个接口从 JavaScript 里用起来别扭，因为它从来不是专为 JavaScript 设计的；它被规定为跨语言工作，而代价马上就在像一个节点的孩子这样基本的东西上显出来：它们以 NodeList 的形式到来，长得像数组，却不提供 slice、map 或其他任何数组方法。作者承认，与语言无关的标准往往值回它们的价格，却不肯被说服相信这里是如此。这定下了本章的调子：DOM 是你必须打交道的东西，而学它的一部分，就是学它会在哪里绊你一跤。

从这里起，本章展开找节点这件实务。沿着一条固定的孩子链走到一个元素，被显示是脆弱的，因为这样一条路径把关于文档确切形状的假设写死了。演示小得令人难忘：一个看上去有三个孩子——一个标题、两个段落——的 body，其实有七个，因为标签之间的空白也算文本节点。穿过那棵树的任何一条按索引的路线，都离断掉只差一个多余的换行。补救是改为搜索：按标签、按 id、按类，或按 CSS 选择器。确立了怎样到达节点之后，本章转向改变它们，靠节点方法和 style 属性，然后发出它最锐利的性能警告。因为浏览器通常推迟计算尺寸和位置，索取像 offsetHeight 这样的值，会逼这件工作立刻发生——而此后对文档的任何改变，都会把这个结果丢掉。所以交替读和写的代码，让浏览器一遍又一遍地重算布局。作者给两个程序计时，各自搭出一行 2000 像素宽的 X 字符：每加一个字符就测量一次的，花约 32 毫秒，而只测一个字符、其余靠计算的，花约 1 毫秒。这些是单次示范运行的数字，但比例才是要点。

本章靠后的几节在转向之前，磨尖了两个细节。第一，querySelectorAll 返回的集合是一份冻结的快照——与 getElementsByTagName 对比，后者的结果随文档的变化不断更新——却仍然不是真正的数组；Array.from 才既产出一个真正的数组，也产出一份可靠的副本。作者还演示了选择器能表达多少，用一个计数函数，其中 “p”、“.animal”、“p .animal” 和 “p > .animal” 各匹配不同数量的元素，最后一个只限于段落的直接孩子。第二，本章讲了 CSS 的 position 取值，因为在元素仍是静态定位时，给 top 和 left 赋数字一无所成：relative 把它从本该坐的地方挪开，absolute 把它从文档流里拿出来，并从最近的非静态祖先度量，没有祖先时则从文档度量。

转折，也是收束，是从操纵到运动。本章在这里作出它第二个机制性的论证：JavaScript 还在运行时，什么都不会被重绘，也不会处理任何点击，所以一个移动元素的循环，根本不会显示中间的帧。动画必须让出——requestAnimationFrame 把控制权交回去，浏览器就能绘制，然后在下一次重绘之前再叫你一次。演练的例子是一张给了相对定位的猫的图片，它的 top 和 left 在每一帧都被改写，水平偏移取自缩放 200 倍的余弦，垂直偏移取自缩放 20 倍的正弦，于是猫描出一个宽远大于高的椭圆——并且加了“px”，因为光秃秃的数字对样式系统毫无意义。最后的改进是最容易被漏掉的：因为回调不保证按固定的节奏到来，角度是由实际经过了多少时间推出来的，而不是每次调用走固定的一步。一个晚到的帧于是让猫走得更远，而不是让它变慢，动画的速度不再取决于浏览器碰巧多久叫你一次。本章于是结束于它开始的地方，即 DOM 呈现自己的方式与它必须实际被使用的方式之间的缺口——只不过这一回，这一课讲的是时间，而不是树。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 14 章的核心概念

文档对象模型

浏览器对一个已解析的 HTML 页面的对象表示，每个盒子/标签一个对象。

适用处： 它是一个跨语言的、面向 HTML 和 XML 的接口，不是 JavaScript 原生的 API。

树

一种有分支、无环、有一个明确根的结构，如 DOM 或语法树。

适用处： 要求无环和单一的根；document.documentElement 是 DOM 的根。

实时节点集合

像 childNodes 或 getElementsByTagName 的结果这样的集合，会随文档的变化自己更新。

适用处： 要一份稳固的快照，用 Array.from；NodeList 没有 slice 和 map。

布局

每个元素计算出来的尺寸和位置，浏览器把它推迟到需要时。

适用处： 读取 offsetHeight 或 getBoundingClientRect 会强制进行一次布局计算。

层叠样式表

一组组规则，其声明相互合并，由优先级和次序决定谁胜出。

适用处： 次序只在优先级相等的规则之间起决定作用；内联的 style 属性总是胜出。

定位

position 样式属性决定一个元素是留在正常流里（static/relative），还是被拽出流外（absolute），使 top 和 left 能挪动它。

适用处： 绝对的偏移从最近的外围非静态祖先度量，若不存在则从文档度量。

第 15 章是怎样展开的AI 辅助

第15章开头不是一个 API，而是一个姿态的问题：一个程序该怎样得知某件事发生了？作者先摆出天真的替代方案——一个反复检查输入的程序——并显示它为什么行不通。轮询逼程序员记得足够频繁地去看，而一次按键可能在两次检查之间的空隙里到来又消失；更糟的是，任何冗长的计算都成了负担，因为它运行的时候，没有东西在检查。所以本章的开篇一招，是主张通知胜过检查：让浏览器来告诉你。这个框架挣得了第一个机制 addEventListener，本章也立刻在这里推了一个偏好。登记的监听器可以在一个元素上不限量地叠加，而 onclick 是单个属性，所以只容许一个处理函数。这也是通向移除的自然门径，这就是为什么“只做一次”的按钮要登记一个有名字的函数——取消登记意味着交回同一个函数值，这是匿名函数提供不了的。

它如何展开

从登记起，本章顺着一个事件的解剖向外搭建。处理函数收到一个携带着发生了什么的细节的事件对象，从这里起，文字引入传播模型，那是前半部分的概念中心。一个事件在它发生的最内层节点上触发，然后穿过每一个祖先，向外传到文档根，最具体的处理函数最先运行。随之而来有两个后果，而本章两个都倚重：外层元素上的一个处理函数，可以服务嵌套在里面的一切，因为事件的 target 报告究竟是哪个内层节点引发了这件事；而处理函数可以用 stopPropagation 叫停那趟向外的旅程。与此相配的，是浏览器自己的默认行为这件单独的事——跟随一个链接，按键时滚动——由 preventDefault 压制，而文字把它与传播分开，而不是把两者混为一谈。

随后对事件类型的巡礼，是本章变得具体的地方，也是它发出最锐利告诫的地方。按键事件被讲了，随后又被部分撇清：它们是发现一个人正在输入什么文本的糟糕工具，因为 Android 的屏幕键盘根本不触发，而面向大字符集的输入法软件，会把好几次按键折成一个字符。补救是监听 input 事件，读取字段的当前值。指针和触摸事件也受同样的现实主义支配。那条靠鼠标拖动的可调整大小的栏，是一个完全合格的演示，却在触摸屏上干脆不工作，触摸屏没有按钮，还可能同时报告好几根手指——所以触摸交互需要它自己的处理，而不是被假定为白送。滚动、焦点和加载事件补全了这次巡礼，各自带着传播和时序上的怪癖。

它在哪里转折

转折来在本章不再描述单个事件、转而问它们全体有什么共同之处的时候：同一个事件循环。所有被安排的工作共享单一的队列，一次运行一块，而处理函数只在没有别的东西在运行时才运行。作者早已确立，交互只通过事件发生；把这两个事实合起来，就得出本章主要的性能论断——一个过长的处理函数或一个忙着的循环，会拖住排在它后面的一切，所以点击和按键在它结束之前都感觉迟钝。这重新框定了整个前半部分：处理函数不只是回调，它们是共享一条时间线的房客。

接着是两个逃生口。Web worker 在它自己的时间线上运行脚本的一份独立副本，本章把它们呈现为在构造上就绕开了共享状态的惯常险处：worker 看不到父级的任何变量，通信只经由 postMessage，只有能用 JSON 表示的值才能越过边界，而接收方得到的是副本，而不是原件。演示被有意写得很小——一个把收到的每个数字平方后回复的 worker，父级在 Worker 对象上监听。第二个逃生口是定时器。超时可以被取消，而这种取消为防抖的模式担保：对成串到来的事件，处理函数自己几乎什么也不该做，只清除待处理的超时、再设一个新的，这样真正的工作，只在这一串事件停顿之后才发生。文本框的例子把这一点说成了字面——每次 input 重置一个 500 毫秒的计时器，消息只在打字停下之后才记录——而作者指出，取消一个从未存在或已经触发过的计时器是无害的，这恰是代码如此之短的原因。还提到一种变体：不是等待停顿，而是在事件持续到来的同时，按间隔作出响应。

它如何收尾

结尾对这本书来说是常规的，与刚才描述的弧线一致。本章把材料汇成一份事件处理的小结——登记、事件对象、传播、默认动作、所巡礼的事件类型，以及 worker 和定时器这些循环层面的关切——然后交给读者习题，去亲手练这些机制。整体的形状是一个单一的论证，而不是一份目录：通知胜过轮询，所以登记处理函数；处理函数住在一个共享的循环里，所以要让它们轻量；而当工作确实不可能轻量时，把它挪出主时间线，或放到一个定时器后面。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 15 章的核心概念

事件处理函数

你为某个有名字的事件登记的函数，使浏览器在那个事件发生于被登记对象的上下文里时调用它。 登记在 DOM 元素上的函数，在某个特定类型的事件发生并传播时运行。

适用处： 只在事件发生于它所登记的那个对象的上下文里时才运行；移除它需要同一个函数值。 大多数事件在某个特定元素上触发，然后传播到祖先；传播和默认动作都可以被叫停。

轮询

自己反复检查一个队列或状态来察觉输入，而不是被通知。

适用处： 这牺牲响应性，因为从按键到你检查之间的任何延迟都感觉迟钝；大多数程序员避开它。

事件传播

一个事件从它发生的节点向外传到它的父级和文档根，最具体的处理函数最先运行。

适用处： focus、blur 和 load 事件不传播；stopPropagation 叫停向外的行程。

默认动作

浏览器对一个事件自己内置的响应，比如跟随链接或滚动。

适用处： preventDefault 对大多数默认行为有效，但对滚动事件或某些浏览器快捷键无效。

事件循环

那条单一的队列，一次运行一块被安排的工作，所以处理函数要等运行中的脚本结束。

适用处： 冗长或为数众多的处理函数会拖延所有的交互；web worker 就是为繁重的后台工作而存在的。

Worker

一个独立的 JavaScript 进程，与主脚本不共享任何数据，只通过消息交谈。

适用处： 只有能用 JSON 表示的值才能越过；接收方得到的是副本，而不是原来的值。

第 16 章是怎样展开的AI 辅助

开篇：一个被描述成数据的游戏。本章开头不是让任何东西动起来的代码，而是一个表示的问题。一个关卡以普通字符串的形式到来——一张字符网格，每个符号都有含义——而第一件活儿，是把那段文本变成程序能对其作推理的对象。解析这一步把符号分成两类：背景方块，是世界里固定的特征（空地、墙、熔岩），和角色，那些会动、因此需要自己带位置和尺寸的对象的东西。由此而来的是配套的部件：一个持有背景网格和起始角色的 Level，一个把关卡与当前角色和状态打包在一起的 State，以及一个用于位置和速度算术的小小的 Vec 类。角色类——Player、Lava、Coin——各自知道自己的类型，以及怎样从一个网格字符创建出来。此时还没有任何东西在动；本章有意先搭词汇。

第一段展开：把绘图藏起来。在任何物理之前，本章先插入一层间接。渲染被整个推到一个固定的显示接口后面，交给游戏的是显示的构造函数——而不是一个实例。具体的实现 DOMDisplay，是以它碰巧用的机制命名的：背景网格变成一张表，每个角色变成一个绝对定位的、有颜色的方框。绘图代码本身简单得几乎令人难为情，而这正是要点：因为游戏逻辑从不直接调用任何绘图例程，整个渲染器日后可以换成别的东西——比如 canvas——而不用碰游戏。这是一个早早提出的架构主张，使此后建起来的一切都被迫遵守它。

转折：运动容易，碰到东西才难。本章随后点出真正的困难。移动一个角色，不过是把一个速度加到一个位置上；难的是决定当一个角色来到它不该在的地方时会发生什么。墙必须挡住运动，碰到的金币必须被收集，碰到的熔岩必须让关卡失败——而作者明说，一般性地回答这个问题，就意味着写一个物理引擎。所以本章不再追求一般性，而采用一个坦白说很谦逊的方案：一个 touches 函数，只问一个矩形是否与 1×1 方格网格里某种特定的背景类型重叠，外加角色之间简单的矩形重叠。每个角色得到自己的 update（它自己怎么动）和 collide（玩家碰到它时，它对状态做什么）。这是本章从结构转向行为的转轴，值得读成一次有意识的收窄抱负，而不是一个解决办法。

那个粗糙的补救，以及对它的诚实。碰撞规则本身直白得几乎令人吃惊：算出将会到达的新位置，如果它与墙重叠，就把这次移动整个丢掉。作者并不假装这是正确的。丢掉这次移动，会把角色停在离接触还差一点的某处，因为代码从不计算接触实际发生在哪里——所以总有一道缝隙。缝隙之所以看不见，是因为动画是以很小的增量推进的；剩下的距离不过是像素的几分之一。把时间步调大，同样的代码就会在玩家仍离地面很远时取消这次移动，让他悬在半空。这是本章关于批判地读一份教程的最清楚的一课：一项技术可以是在某个假设下够用，而不是正确，而这里的假设就是步子小。它还纠正了一种自然的误读——取消一次被挡住的移动，并不意味着玩家会恰好紧贴着墙停下。

化解：一条轴一条轴地来，然后是循环。碰撞规则的直白，逼出对玩家移动的一次改进。水平与垂直的运动被分别测试、分别接受，使一个被挡住的方向只取消它自己。站在地板上挡住垂直运动，但因为各轴是独立的，玩家仍能沿着地面往旁边跑——恰是平台游戏所需的行为。回报出现在跳跃里：当玩家向下运动、而碰撞检查失败时，被撞到的东西一定是地板，所以如果那一刻按着上箭头，这次碰撞就被重新解读为一个向上的冲量，而不是一次停止。重力每帧施加，而按键状态被追踪成一个当前按住的键的集合，而不是离散的事件，因为要紧的是一个键此刻是不是按着。本章以组装驱动帧的机制收尾：runAnimation 推进时间，runLevel 包进一个 Promise，使它在关卡结束时解析，runGame 把各关卡串起来并发放生命——一层整洁的最后收尾，把所有累积起来的部件变成可玩的东西。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 16 章的核心概念

接口

所有会动的元素在相同的属性和方法上达成一致，使游戏能统一地对待它们。

适用处： 只有共享的部分（size、pos、type、update）是统一的；每个角色的行为因类而异。

持久数据

更新游戏产生一个新的状态对象，而不是改变旧的。

适用处： 适用于 State 和角色，不适用于 DOM 元素，后者是被修改并替换的。

领域特定语言

关卡被写成字符网格，一种小巧的、人可编辑的地图记法。

适用处： 之所以行得通，只因为一切起初都可以对齐到网格；实际位置日后可以是小数。

碰撞检测

在接受一次移动之前，检查一个矩形是否与墙/熔岩的网格方块或另一个角色重叠。

适用处： 只针对 1x1 网格上的矩形；取消运动，而不是找出确切的接触点。

Promise

runLevel 返回一个 Promise，解析为关卡的结束状态，使 runGame 能按次序 await 各个关卡。

适用处： 在这里它只发出关卡完成的信号，而不是逐帧的进展。

时间步

自上一帧以来经过的秒数，设了上限，使隐藏的标签页不会让游戏疯狂地前进。

适用处： 必须保持很小，否则这套简单的碰撞办法会让玩家悬在空中。

第 17 章是怎样展开的AI 辅助

它开头框定的是一个选择，而不是一项技术。在任何绘图发生之前，本章把三个选项并排摆出：给普通 DOM 元素加样式、SVG，以及 <canvas> 元素。最要紧的那个区分在这里被引入，并撑起第17章——SVG 保留你所创建的形状的描述，所以它们日后可以被移动或改变大小，而 canvas 只保留被涂上去的像素。canvas 上没有任何东西记得自己是一个形状。这一个事实被呈现为一次取舍，而不是一个裁决：你得到的是即刻的像素，放弃的是可编辑性。

随后它一个原语一个原语地展开 2D 绘图上下文，每一步都确立一种思维习惯。先是填充和描边，并随之而来本章第二个结构性想法：外观是上下文上的状态，事先赋给 fillStyle 和 lineWidth 这样的属性，而不是作为参数传给绘图调用。证明刻意写得朴素——由完全相同的 strokeRect 调用画出的两个方块看上去不同，因为 lineWidth 在两次之间被改过。路径随之而来，并把同样的逻辑延伸：没有可持有的路径值，只有累积在上下文里的副作用，所以一个形状就是你的调用的次序。一个填充的三角形只需要两次显式的 lineTo 调用，因为 fill 会替你把图形合上。从这里起，材料变宽——曲线，弧，一张其扇形角度由每个选项在回答中所占的份额算出来的饼图，文字，图片，以及精灵动画，在那里，每个新姿势之前的 clearRect，使开头的那个主张变得具体：要移动画出来的东西，你得先擦掉再重画。

转折随变换而来，它们的行为与此前的一切都不同。scale、rotate 和 translate 叠加在已经生效的任何变换之上，所以次序要紧，而其效果比设置它的函数活得更久。水平翻转的辅助函数，是你必须对次序和抵消作推理的演示：把坐标轴移到镜像线上，乘以 -1，再移回去。本章由此引出的是一条纪律——任何改变坐标的函数，都该先 save、后 restore，使这个改变不泄漏进以后的绘图里。递归的分形树是这条纪律见到回报的地方：每个分枝先保存，平移并旋转，递归，然后恢复，让兄弟分枝从干净的坐标起步。

累积起来的原语随后被派去干一件实质性的活。CanvasDisplay 取代了前面那个平台游戏的 DOM 显示，而它恰恰是由上面确立的那些约束造出来的。因为只存在像素，没有用来更新单个元素的把手，所以 syncState 每次都重新计算关卡的哪一部分可见——视口，被钳制得永远不会显示关卡之外的空间——并从头重绘背景和角色。精灵图提供图块和玩家的各种姿势，翻转的辅助函数把玩家转过身。不停的重绘，甚至吸收了一张只加载了一半的精灵图：头几帧可能渲染得不对，下一次刷新就纠正了它们。

它以倒转开头的比较收尾，并拒绝给这三种技术排名。基于 DOM 的图形，不论 HTML 还是 SVG，都保有一个数据结构，适合那种小部分经常变化、或单个形状需要自己的鼠标处理函数的图画；而只是重绘像素的 canvas，对海量的微小图形和像素级的效果更便宜。本章小心地点出了使这个问题消解的条件——游戏自己的显示没有文字，没有鼠标交互，元素也很少，所以三种里的任何一种都够用。随后是对 2D 接口的小结和习题。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 17 章的核心概念

canvas 元素

一个 DOM 元素，里头装着你用代码往里画的图；它只保存像素，不保存形状。

适用处： 要移动一个画出来的形状，就得先清掉再重画。

可缩放矢量图形

一种描述形状的 XML 标记方言，其元素留在 DOM 里，日后可以被移动或重新设置样式。

适用处： 第17章只是略述 SVG，并没有完整讲解。

绘图上下文

getContext 返回的对象，它的方法和属性就是真正的绘图接口。

适用处： 样式存在上下文里，而不是放在方法的参数里。

路径

由连续的方法调用一点点搭起来的一串线段，而不是存成一个值。

适用处： 路径必须先闭合，才能被填充。

变换叠加

scale、rotate 和 translate 各自都相对于已经生效的变换起作用，所以次序一变，结果就变。

适用处： 用 save/restore 或 resetTransform，别让变换泄漏出去。

位图图形

以像素数据、而不是以逻辑上的形状描述给出的图片。

适用处： 与第17章别处用的矢量绘图形成对照。

第 18 章是怎样展开的AI 辅助

开篇：页面底下的协议。本章开头远在 JavaScript 的层次之下，把一个 HTTP 请求和一个 HTTP 响应一块一块地拆开——方法、路径、头、状态码、正文。这个缓慢开头的回报，是一个关于含义、而不是关于语法的论点：方法声明意图，而 GET 尤其是一项承诺：服务器上的东西不会因此改变。作者把这一点立在可观察的客户端行为上，而不是为约定而约定。浏览器会不请自来地发出 GET 请求，预取它猜你想要的页面；它绝不会无端发出一个 POST。所以带副作用的 GET，会被软件代你悄悄触发那些副作用。从这个语义的地基出发，本章朝界面设计往外迈了一小步：既然方法已经带着含义，你就可以用资源加方法来搭一个界面，而不是去包装远程过程调用——向 /users/larry 发一个携带 JSON 用户文档的 PUT，而不是调用 addUser。地址指名事物，方法指名操作，而 HTTP 现成的机制（首推缓存）继续起作用。这个论断被小心地划了界：两种风格都能用，只是这一种暴露了你本来就在用的协议的更多部分。

展开：JavaScript 如何抵达线路。协议立住之后，本章转向浏览器代码接触它的三种办法。先是表单，而讲法对数据究竟走哪条路写得很具体：同一组字段，依 method 属性被送上两条不同的路——GET 时作为查询字符串附在 URL 后面，POST 时放进请求正文——两种情形都做百分号转义，好让别扭的字符能熬过这趟旅程。然后是 fetch，本章在这里种下它最尖锐的一处纠正。把一个没有出错就兑现的 promise 读成成功的信号，是很诱人的，但只要服务器作了回答，promise 就会兑现，404 和 500 也包括在内；状态码在 Response 上，要由你自己去查。拒绝只留给完全没有回答的情形——网络断了，主机名解析不了。随后是沙箱和跨域规则，再是 HTTPS，从网络本身的形状来论证：一个普通请求要穿过咖啡馆的 Wi-Fi、公司和国家的基础设施，每一跳都可能被读取或篡改，而 HTTPS 先验证证书、再加密，同时挫败冒充和窃听。作者在这里的措辞刻意保持有条件——运转正常时。伪造和被盗的证书、有漏洞的实现，从前都曾打破过它，所以诚实的读法是：HTTPS 抬高了攻击的成本，而不是取消了攻击。

转折：字段是对象，而不只是信封。本章随后从传输转向 DOM，这是它真正的重新框定。表单字段是普通的 DOM 节点，而本章把这个事实给你的把手一一列出：表单的 elements 集合既能按位置、也能按字段名取索引，每个字段带着一个指回上层的 form 属性，值可读可写，焦点可以挪，字段可以禁用，而浏览器内建的导航可以在 “submit” 处理函数里取消。结果是，字段不再只是向服务器运送数据的机制，而成了可能永远不提交任何东西的应用的构件。这一段的其余部分逐个走过各类型——文本字段上的选择 API，input 与 change 事件的区别，复选框和单选组，select 元素，最后是文件字段。读文件给出了本章最后一个机制层面的论证：磁盘访问慢，所以阻塞式的读取会冻结页面，浏览器于是返回一个在后台加载的 FileReader，内容就绪时触发一个 “load” 事件，其间别的一切照常运转。

收束：活得比页面更久的状态，然后是小结和习题。本章收尾，是把服务器整个去掉。它先诚实地掂量了另一条路——把数据留在服务器端，意味着账号和认证，大量额外的工作——然后表明，对一个小应用来说，浏览器本身就是足够的存储。演示是一个刻意粗糙的记笔记应用，它把整个状态序列化成 JSON，存在 localStorage 里的键 “Notes” 之下，刷新之后依然在。限制是说出来的，而不是含糊带过：存储按域划分，大小有上限，只存字符串。sessionStorage 作为寿命更短的兄弟出场。小结和习题收了本章，它走过的是一条连续的弧线——从线路上的字节，经过浏览器通向它们的三种接口，进入表示字段的 DOM 对象，再从另一头出来，到一个根本不需要线路的应用。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 18 章的核心概念

HTTP

浏览器和服务器用来搬运文档的请求与应答的约定。

适用处： 以 1.1 版作说明；2 版共用这些概念，但更复杂。

Fetch

浏览器里发出 HTTP 请求的 JavaScript 接口，返回一个 Response 的 promise。

适用处： 遇到错误状态码也会兑现；只有网络故障或服务器未知时才会拒绝。

URL 编码

把查询字符串里的字符转义成一个百分号加两位十六进制数字。

适用处： 用于查询字符串；JavaScript 提供 encodeURIComponent 和 decodeURIComponent。

沙箱化

浏览器会阻止页面脚本请求别的域，除非服务器同意。 浏览器只有在用户于文件字段里选中一个本地文件之后，才让脚本读取它。

适用处： 由 Access-Control-Allow-Origin 头按每个响应解除。 只适用于用户选中的文件；内容经 FileReader 异步到达。

默认动作

表单提交时内建的导航，可以在“submit”处理函数里取消。

适用处： 对 submit 事件对象调用 preventDefault 来阻止。

事件处理函数

登记在字段上的一个函数，用户改动或在其中输入时运行。

适用处： “change”只在字段被改动后失去焦点时触发；要对每次按键作出响应，用“input”。

第 19 章是怎样展开的AI 辅助

开篇：在任何代码之前先陈述的一个设计问题。本章开头不是编辑器，而是状态该住在哪里的问题。作者提出另一种办法——让界面的每一块自己保管一份数据——并展示它为什么行不通：如果当前的颜色住在颜色选取器自己的字段里，那个选取器就得更新自己，并且通知颜色出现的其他每一个地方，于是每一部分都得知道其他所有部分。此后统领一切的答案，是一个单一的状态对象，装着图片、当前的工具和颜色，而每一次改动都被汇入一个 update 函数。界面的各部分成为形状统一的组件——一个 dom 属性加一个 syncState 方法——所以它们只读自己关心的字段，也从不直接改动状态；它们把改动作为动作来宣告。这个小小的契约才是本章真正的主题，而编辑器是为检验它而造的东西。

展开：从值到像素到指针，一层层搭起来。架构定下之后，本章按依赖的次序把各部分装配起来。先是 Picture 类，刻意做成不可变的：绘制返回一张新图片，而不是去编辑旧的。然后是 canvas 组件，它的活是那层别扭的翻译——把原始的指针事件变成像素坐标，并跟踪一次拖拽。然后是控件：工具和颜色的选取器，以及工具本身。不可变性的决定在这里看得见地得到回报，而矩形工具就是演示。因为拖拽开始时的那张图片仍然是一个完好的值，每次指针移动都可以从那个原始的出发重新算出整个矩形，而不是画到当前的状态上。这恰恰就是为什么，当你把指针往起点拖回去时，预览可以重新缩小——如果先前的移动已经覆盖了像素，这种行为就不可能。

转折：从绘制到浏览器的边缘。本章随后向外转，从内部的逻辑转到平台。保存一张图片和加载一张现成的，都迫使它绕道 canvas 的 API，因为把一幅图画到 canvas 上，是拿到它各个像素的唯一路径：加载函数把图像放到 canvas 上，用 getImageData 取出原始字节——每个像素四个数——再把每个颜色三元组重新装配成一个十六进制字符串。务实的限制出现在这里（图像被限制在 100 乘 100，透明通道干脆丢掉），提醒你这个项目是个教学制品，不是产品。撤销随之而来，它是本章对先前一个决定最漂亮的回报。既然旧图片是未被触碰的值，保留它们几乎不花什么，所以每次改动之前，先把上一张图片压进一个历史数组。一个时间戳把这件事把住：一次快照最多一秒落一回，所以一笔长长的画刷笔画被合并成一个撤销步骤，而不是几百个——而撤销会把那个时间戳重置为零，保证紧接着的下一次改动一定被记录。对照一个常见的假定，值得说明：并不是每一次点击都成为它自己的撤销步骤。

收束：反思，然后是习题。startPixelEditor 用合理的默认值把各块拴在一起，而本章在退后一步中收尾。作者对浏览器技术的裁决是，它既强大又荒唐——而弄懂它为什么古怪，胜过对它生气。这个推理是历史性的，而不是技术性的：平台是在社会约束之下演进的，一个上百万网站已经依赖的功能，是撤不掉的。于是缺陷靠把新元素和新 API 堆在旧的上面来绕过，而这恰恰就是结果看上去不连贯的原因。常被忽略的实际推论是，那些别扭的部分不能简单地换成设计得更好的；它们只能被长出去、越过。习题随后把编辑器交回读者，让他们去扩展。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 19 章的核心概念

组件

一个拥有一块 DOM 的对象，暴露一个 dom 属性和一个 syncState 方法。

适用处： 只持有它需要的那份状态；除非交给它一个 dispatch 函数，否则无法派发。

不可变性

把图片当作一个被替换、而不是原地编辑的值。

适用处： 批量编辑仍需要一个会拷贝像素数组的 draw 方法。

动作

一个描述状态更新的普通对象，交给一个中央函数。

适用处： 在这里，它只是通过对象展开去覆盖上一个状态的若干属性。

原始值的不可变性

由于每张图片都是一个永不改变的值，保留旧的副本用于撤销既便宜又安全。

适用处： 适用于这里的图片值；周围的应用状态仍然在每个动作上被整体替换。

撤销历史

一个装着先前图片的 done 数组，加一个 doneAt 时间戳，所以只记录相隔一秒的改动。

适用处： 只存相隔至少 1000 毫秒的快照，所以快速的笔画被合并成一个撤销步骤。

位图图形

从 canvas 读出一幅图像的原始像素字节，每个像素四个数，来重建一个 Picture。

适用处： 透明度被忽略，图像被限制在 100 乘 100 像素。

第 20 章是怎样展开的AI 辅助

开篇：先于 API 的一个论证。本章不以安装说明或一段代码示例开头；它以一个辩护开头。一门浏览器的语言，为什么要去跑一个服务器？作者的回答有悖直觉：JavaScript 是个好的候选，恰恰因为它贫乏。它是少数几门出厂时没有任何内建设施来读输入或写输出的语言之一，而这个空缺意味着，没有任何根深蒂固的 I/O 惯例让一个新的运行时去与之争论。Node 可以把它自己相当古怪的网络和文件系统模型嫁接到这门语言上，而不与已有的任何东西相撞。与此配对的是统领此后一切的第二个前提：一个在读写完成之前停下来的程序，这期间无法为任何别人服务，而这种停顿是用户看得见的。所以 Node 把 I/O 默认做成异步的，靠回调、事件或 promise 稍后报告结果，而不是去阻塞那唯一的一条执行线。这两个论断——一张白纸，以及拒绝等待——是本章承重的假设，其余的材料都是它们的后果。

展开：平台，一块一块地装配起来。确立了这门语言合适之后，作者转向 Node 实际递给你的东西，而答案的形状是“模块，加上非常少的一组全局量”。document 和 prompt 之类的浏览器固有设施干脆缺席；你需要什么，就明确地去要。确实存在的那一小撮全局量，用 process.argv 来举例：它把命令行作为字符串交给你，真正的参数从下标 2 起——这是你的脚本与操作系统之间一个小而具体的接触点。从这里起，本章向外铺开：先是模块的故事（CommonJS 及其 require，对 ES 模块），然后是 NPM 和语义化版本，然后是自带的各个模块：管文件的 node:fs，管服务的 node:http，两者底下的流这个抽象，以及给更喜欢 promise 而不是回调的代码用的 node:fs/promises。HTTP 的引入被刻意写得很平淡：一个服务器本质上就是一个关于请求对象和响应对象的回调，每有一个客户端连上来就重新调用一次，大约八行就足以在 localhost:8000 上回答浏览器，给出一个回显所请求 URL 的页面。这种积累不是装饰——每一块，都是文件服务器日后会需要的一个部件。

转折：从一堆零件到一个必须正确的东西。本章的枢纽是文件服务器，语气在那里从“有什么”转为“什么会出错”。第一个担忧是安全。一个对 /../secret_file 的请求，否则就会爬出被提供服务的目录，而修法是个次序问题：先把请求的路径解析成一个完整的绝对路径，然后检查结果是否仍以基目录开头，不是就抛出。这道守卫作用于解析后的路径，而不是原始文本——在解析之前检查字符串，恰恰是这个设计避开的错误。第二个担忧是决定如何做出，而答案是，服务器的大部分判断是靠代码、而不是靠逻辑来承载的。文件不存在，会让 stat 抛出一个 code 为 ENOENT 的错误；GET 处理函数捕获这个特定的情形，别的则重新抛出，其余情况回答 404。GET 本身把前面的部件组合起来——用 stat 来分类，对目录用 readdir，对文件用 createReadStream 加一次 MIME 查找。PUT 和 DELETE 回答 204，这个状态码被选中，因为它传达成功，而不再多说什么。

收束：幂等，一次手跑的演示，和一个谦逊的小结。最被力争的那个决定放在最后。删除一个已经不在的文件，返回成功，而不是错误，因为请求者的目的——文件不在那里——已经成立，所以没有什么可以报告为失败。回报是幂等：重复同一个 DELETE，留下的结果与只发一次相同。（这值得牢牢记住，因为在这里回答 404 的本能很强，也是错的。）作者用一段简短的 curl 会话验证整个装配——GET 失败，PUT 创建，GET 取回，DELETE 让文件再次缺席——而值得留意的是它是什么：一次快速的手跑演练，而不是一套系统的测试。本章随后把镜头拉回到这个东西的规模来收尾。Node 是一个在浏览器之外运行 JavaScript 的紧凑系统，除非你选择退出，它的 I/O 就是异步的，并且有基于 promise 的文件访问可用；它紧凑的证明，就是文件服务器实际需要的东西是多么少。有一句提醒挺过了结尾：因为 ^2.3.0 接受直到、但不含 3.0.0 的一切，把语义化版本读成一种保证是很诱人的。它是 NPM 请作者遵循的一种约定，而没有任何东西强制他们这样做。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 20 章的核心概念

异步性

让程序同时与许多设备对话，而不是等每一次读或写完成。

适用处： 当你只是现在就需要一个值时帮不上忙；为此有同步的 Sync 变体。

模块

一个具名的代码单元，你必须明确地去要，因为 Node 让很少的绑定成为全局的。

适用处： .js 文件默认用 require；.mjs 文件用 import 和 export，不能两者并用。

包

一个发布出来的、带版本的 JavaScript 包，从 NPM 安装到本地的 node_modules 目录里。

适用处： 默认按项目安装，而不是装在一个中央的系统位置。

语义化版本

一种三个数字的版本方案：第一个数字在破坏性改动时变，中间那个在增加功能时变。

适用处： 只是 NPM 要求的一种约定；它不保证作者遵守。

回调

交给一个操作的函数，让它日后报告错误或结果。

适用处： 做错误处理时冗长又容易出错；promise 的变体在 node:fs/promises 里。

流

一个你一块一块往里写、或通过 data 和 end 事件从中读的对象。

适用处： 可读流用事件处理函数、而不是返回值，所以数据以 Buffer 块的形式到来。

第 21 章是怎样展开的AI 辅助

开篇：一个逼出架构的问题。本章先点出项目的名字——一个让成员提议讲座并对其评论的技能分享站——然后立刻把这个欢快的前提转成了一个技术约束。这个站点必须显示实时更新：一个人发一场讲座，其他每个人的屏幕都该不经刷新就变。但作者推理了为什么那个显而易见的办法不可用。普通的 HTTP 一个请求只给一次回复，浏览器传统上不接受传入的连接，而家用路由器无论如何也会把它们挡住。所以服务器无法自己伸手出去；唯一可用的信道，是客户端自己打开并保持存活的那一条。这是本章的枢纽，而且被放在任何代码之前：客户端先问，服务器只是把它的回答往后拖。一段简短的旁白为这类工作选 Node 辩护——一个繁忙的长轮询服务器可能同时扛着成千上万个在等待的请求和它们的 TCP 连接，而 Node 能承载这么多，却不必每个连接配一条线程。

展开：把缓存头弯成一种通知协议。从这个前提出发，文本转向 HTTP 接口，它以一个按标题寻址的 /talks 资源为中心。聪明之处在于，作者没有发明新机制；他把两个现成的拿来改作他用。服务器保持一个版本号，把它作为响应的 ETag 发出，并保持一个 waiting 数组。一个把同一个标签放进 If-None-Match 送回来、并带着一个 Prefer: wait 提示的客户端，不会被立刻回答——它的请求被停放起来。任何新的提交都会让版本号增加，而每一个停放着的请求被一次性用新数据回答。演练把这一切说得具体、而不抽象：伊曼一提交一场关于极限下坡独轮车的讲座，法特玛那个悬着的请求就在那一刻被回答，法特玛的屏幕自己更新了。值得牢牢记住，这既意味着什么、又不意味着什么。服务器从不无端地推；推送总是以一个客户端请求开始，它唯一的回复被推迟到有消息、或定时器触发为止——这恰恰就是为什么客户端必须在一个循环里不停地重新询问。作者也直白地指出，这个接口完全没有访问控制：它演示的是通知的把戏，而不是一个可部署的服务。

转折：从协议到客户端，从优雅到代价。后半转向浏览器。在这里，语气从协议设计变成了直截了当的构造：渲染函数通过小小的 elt 辅助函数，为一场讲座、它的评论、和提交讲座的表单构建 DOM；pollTalks 跑长轮询的循环；而 SkillShareApp 和 runApp 把状态、dispatch 和重绘接在一起。后半的两个设计决定，承载着本章真正的教训。第一个是刻意的稳健：当一个请求失败，pollTalks 不会死——它在一个由定时器兑现的 promise 上暂停，然后重试，所以一个消失了又回来的网络，会让这个循环从中断的地方接着走，更新恢复，不需要刷新页面。

第二个是一个刻意的缺陷，而本章并不隐瞒它。只要任何东西变了，这个组件就把一切重绘——每一场讲座的节点都被从头重建，旧的被丢弃。作者随后用一个实验、而不是一个论证，来展示这要付出什么代价：在一个窗口里，开始往某场讲座的评论框里打字，再从另一个窗口给同一场讲座加一条评论，写了一半的文字就没了，因为它只活在刚被扔掉的那个元素里。这个 bug 之所以容易被漏掉，与这个设计之所以诱人是同一个原因——替换的节点看上去与它们所替换的一模一样，所以这次调包通常不被察觉。以浪费的工作和丢失的输入为代价换来的简单，被当作一次真正的取舍摆出来，而不是一个该为之羞愧的错误。

收束：把未了的头交给读者。本章收在它的两条未解的线索所在之处，以习题的形式。一条要求做磁盘持久化，让提议的讲座在服务器重启后依然存在，而不只是活在内存里。另一条要求读者修好刚才演示的焦点与文字丢失——这意味着要直面这种“一切重绘”的策略。所以收尾与开篇呼应：文本开头是从网络实际的运转方式推出一个约束，而结尾则是留下读者，去付那个简单设计所欠下的账。

关键论点，以及支撑它们的原文

它是怎样运作的

本章论证所依靠的 3 个机制。

常见误读

第 21 章的核心概念

长轮询

客户端保持一个请求打开，服务器把回复往后拖，直到有消息或时间用完。 反复向服务器索取新数据；在这里，每个请求可能被保持打开，直到各场讲座有了变化。

适用处： 需要一个请求超时来避免死连接，还有许多打开的 TCP 连接；WebSocket 是更丰富、但更棘手的替代。 需要 ETag 和服务器端的等待支持，否则就退化成忙请求。

HTTP

一个请求/响应协议，它的方法和头在这里被用作客户端与服务器之间的接口。

适用处： 一个请求得到一个响应，所以它自己无法向客户端推送数据。

路由器

一个把请求的方法和路径模式匹配到某个处理函数、并把抽取出来的路径部分交给它的组件。

适用处： 这里为说明而手写；生产里由 NPM 包来做，而未匹配的请求落到静态文件服务上。

动作

对用户想做什么的一个朴素描述，被派发出去，而不是让界面去改动状态或直接调用网络。

适用处： 这里状态更新和服务器请求都发生在同一个 handleAction 函数里，因为更新很简单。

文档对象模型

客户端用 elt 辅助函数构建的、用来显示讲座和评论的元素对象树。

适用处： 手工搭建的 DOM 代码，对复杂的界面会变得一团糟；模板或 JSX 需要额外的构建工具。

async 函数

一个可以 await 请求和超时的函数，让那个无尽的轮询循环变得可读。

适用处： 只在工作基于 promise 的地方有帮助；它不会让循环结束。