【Just JavaScript #01】前言 && 心智模型 Mental Model

这个系列叫《Just Javascript》，是 React 开发团队的成员 Dan Abramov 的一套试验性课程。目前仅在官网上通过邮件订阅的方式，向读者每周免费推送。后期可能会收费。

我阅读了前几期，觉得是个对 Javascript 入门者十分友好且有趣的阅读性课程。所以打算把它们翻译出来，仅供分享参考。如果你喜欢，可以在官网上订阅，并为作者提供读后反馈，更好地支持它走下去。

值得注意的是，因为是「试验性」的，所以语言其实并不严谨。更多地是大白话样地娓娓道来，没有晦涩难懂的底层剖析。所以从知识层面的角度来说，更适合学习了 JavaScript 有一段时间，但始终觉得入门比较困难，或者感觉对基础知识还是不怎么了解的朋友。而从叙述语言的角度上说，轻松易懂，对于 JavaScript 老手也是一个相当于「贴心小提示」的良好阅读材料，不仅如此，也可以查漏补缺，巩固基础。

除此之外，整个系列核心在于作者本人提出的一套「心智模型（mental model）」，它通过各种借喻和图画帮助我们更好地直观理解 JavaScript 中的各种概念。作者以「小王子」的故事为开头，构建了一个 JavaScript 宇宙，在这个系列中，你将在作者的带领下，一起用心智模型构建起这个宇宙。而且，更有价值的是，这套心智模型不同于传统课程上的各种复杂概念，相反，它很清晰、直观、易懂。在一开始接触到的模型哪怕到了后期学习，也十分通用。很难出现诸如「特例」的情况。

课程名叫《Just Javascript》，我把它译作「不就是个JS」。

大家好啊

我是 Dan Abramov。

在我写 JavaScript 的前几年，我感觉自己像个诈骗犯。

即使我能用框架来搭网站，也觉得少了些什么。因为我对基础知识了解不够，我对 JavaScript 的工作面试会感到恐惧。

市面上已有的一些课程总觉得哪里不对劲。

有一些课程是视觉化的，容易跟得上，但缺少了很多重要的细枝末节。另一些虽然更透彻，但因为它们既乏味又无聊，我很难不看着看着就睡着了。

这些课程对我来说都不起作用。

如果有一门在线课程可以更好地帮助你理解 JavaScript，并且它不需要艰难爬坡式的学习，岂不美哉？

《Just JavaScript（不就是个JS）》来了。

我真希望我也曾上过这个课呀。

如果你已经了解过 JS 的基础知识，那么《不就是个JS》将使你更有信心地了解作为一名开发者所需要具备的知识。

《不就是个JS》中，我精炼了一套关于 JavaScript 如何工作的心智模型。并且与 Maggie Appleton 进行了合作。她的视觉故事讲述技巧将帮助我们进一步理解，并且为我们提供一套框架供参考，给这些心智模型提供清晰的说明。

我们还想澄清一下。

《不就是个JS》还只是一项进行中的工作，它的展现形式是一系列的免费电子邮件。

随着课程的开展，这些电子邮件将演变为深入的、交互式的、有趣的多媒体课程，来解释用 JavaScript 编程的强大心智模型。

并且你还可以帮忙……

我将免费发送《不就是个JS》的草稿到你的收件箱。

没有编辑。

没有修饰。

这更像是我们一起喝杯咖啡时进行的对话。

通过订阅更新，我会将你添加到我的电子邮件列表中，并陆续发送描述我的 JavaScript 心智模型的电子邮件。这最终将是付费课程，但是你可以随时退订。

目前，它是完全免费的。

我所要求仅仅是你可以回复邮件并分享你的观点和经验。

让我知道这些模特是否会引起你的共鸣。告诉我你如何看待这套课程。

请不要分享。

这些想法是原始且脆弱的，目前我还没有准备好广泛分享它们。

订阅网站：https://justjavascript.com/

译者：抱歉，Dan。我还是分享了。

我想和你联系。

当你通过电子邮件收到我的草稿时，请点击「回复」按钮，告诉我你是否喜欢它们，讨厌它们，或者它们是否只让你无感。

你将激励我完成这个项目！！

干杯， Dan

第一章 心智模型（Mental Model）

看看这段代码：

let a = 10;
let b = a;
a = 0;

a 和 b 运行后的值是多少？再往下读之前，在脑中思考一下。

如果你已经熟悉 JavaScript 一阵子了，你可能会拒绝思考：「这段代码比我每天都写的简单多了。意义何在？」

这个联系的目的不是向你介绍变量。我们假设你已经熟悉它们了。相反，这是让你注意并反思你的心智模型。

什么是心智模型？

再读读上面的代码，以真正确定结果是什么。（我们将会知道为什么这很重要。）

当你第二次读时，一步步地注意你脑中发生了什么。你可能会听到这样的独白：

• let a = 10;
  • 声明一个变量为 a，把它设为 10。
• let b = a;
  • 声明一个变量为 b，把它设为 a。
  • 等等，a 是多少来着？啊，是 10。所以 b 也是 10 了。
• a = 0;
  • 把 a 设为 0。
• 所以现在 a 为 0，b 为 10。这就是我们的答案。

可能你的独白微微不同：你可能会说「赋予」而不是「设为」，或者你可能逻辑顺序不一样。也有可能你的答案不一样。请注意一下究竟是怎么不一样的。即使是独白，也无法捕捉到您脑海中真正发生的事情。你可能会说「把 b 设为 a」，但是「设」一个变量究竟是什么意思？

你可能发现对每个基本的编程概念（比如变量）和基于此的操作（比如赋值）都有一套深根于你脑子中的类比。有一些或许来自于现实，有一些或许演化于你之前学过的其他领域，比如数学中的数字。这些类比可能会重叠并相互矛盾，但它们还是可以帮你理解代码中发生了什么。

比如，很多人一开始学到的变量是「盒子」，里面可以放东西。即便你看到一个变量时，不会栩栩如生地想象出盒子，变量在你的想象中的表现或许也是盒子式的。这些在你脑中对于事物运作方式的抽象被称作「心智模型」。如果你已经编程很多年，或许已经很难注意到了，但是还是试着去留神并内省一下你的心智模型吧。它们可能是一连串视觉、空间、机理思维捷径的组合。

这些直觉（比如变量的盒子化）影响了我们这一生阅读代码的方式。但有时，我们的心智模型是错误的。也许我们早前读过的一篇教程为了便于解释，牺牲掉了正确性；也许我们错误地把对一门特定语言的特性的直觉转移到了另一门语言上（比如 this）；也许我们从一些代码里推演出了一套心智模型却从未验证过其准确性。

指出并纠正这些问题就是《不就是个JS》的内容。我们会渐渐建立起（或者重建起）属于你的 JavaScript 的准确而有用的心智模型。一个好的心智模型会帮你更快地找出并修复 bug，更好地理解他人的代码，并且更自信于你的代码。

（顺便一提，a 为 0、b 为 10 是正确答案。）

快编慢码（Coding, Fast and Slow）

《快思慢想》（Thinking, Fast and Slow）是 Daniel Kahneman 的一部闻名的非虚构类文学作品。这本书的主旨是人类思考时会用两套不同的「系统」。

一旦可以，我们就会依赖于「快」系统。我们这套系统和很多动物一样，它给了我们像一直走路而不摔倒这种神奇的能力。这种「快」系统善于模式匹配（对于生存来说很有必要）和「本能反应」。但不善于筹划。

独特的是，由于额叶的发展，人类也拥有「慢」思维系统。 这种「慢」系统负责复杂的逐步推理。它使我们能够规划未来的事件、进行争论、遵循数学证明。

由于使用「慢」系统非常费力，因此即使在处理诸如编程之类的智力任务时，我们也倾向于默认使用「快」系统。

设想你正在进行大量的工作，并且你想要快速判断一个函数是干嘛的。比如：

function duplicateSpreadsheet(original) {
  if (original.hasPendingChanges) {
    throw new Error('You need to save the file before you can duplicate it.');
  }
  let copy = {
    created: Date.now(),
    author: original.author,
    cells: original.cells,
    metadata: original.metadata,
  };
  copy.metadata.title = 'Copy of ' + original.metadata.title;
  return copy;
}

你或许已经注意到：

• 这个函数用来复制电子表格。
• 如果未保存原始电子表格，则会引发错误。
• 它将 Copy of 作为新电子表格的标题的前缀。

你或许不会注意到的（如果注意到了那很好）是这个函数同样会不慎修改原电子表格的标题。

每个程序员每天都会漏掉像这样的 bug。但既然你知道一个 bug 存在，你会找到它吗？如果你一直以来都在用「快」模式读代码，可能你需要切换到费力的「慢」模式才能找到它。

在「快」模式下，我们基于命名、注释、整体结构来猜想一段代码的用途。在「慢」模式下，我们一步步地追溯代码的运作方式。

这就是为什么拥有一个正确的心智模型很重要。很难在脑中模拟一台计算机，如果用了错误的心智模型则更是徒劳无功。

如果你没法找到 bug，也不要担心。这表示你会从这门课程中受益更多！下期，我们会一起重建 JavaScript 的心智模型，这样以来你每天都可以一眼就能看到这种 bug 了。

下期，我们会为几种基础的 JavaScript 概念重建心智模型——值和变量。