编程的心智模型

一个案例

阅读代码：

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

最终a,b的值分别是什么，在进行后续的阅读之前先在大脑中思考这个执行的过程。

如果你已经写过一段时间的js，那么一定会质疑这样的代码比日常所写的要简单的多，这段代码想考察或者说明什么问题呢？

这次的练习不是为了介绍变量本身，我们也确信大部分人都对变量特别熟悉，但重要的是我希望通过这样的过程看到你对变量的认知，你的心智模型是怎样的。

什么是心智模型

就是你如何分析这段代码的执行过程的，来确保你给的结果是正确的。

它的正确的执行过程是这样的：

备注：所以，最终的结果，a变为0，b变为10 。

也许你的思路（描述用语）不是这样的，比如不是“设置”，又或者不是这样的结果。那么我们真的对一些基础的词是理解深刻（正确）的么？比如赋值，比如申明变量。你可能会发现，对于每个熟悉的基本编程概念(如变量)和对其进行的操作(如设置其值)，都有一组与之相关的根深蒂固的类比。其中一些可能来自现实世界。其他的可能会从你最初学习的其他领域中被重新利用，比如数学中的数字。这些类比可能相互重叠，甚至相互矛盾，但它们仍然可以帮助您理解代码中发生的事情。

例如，许多人最初知道变量是“盒子”，你可以把东西放进里面。即使当你看到一个变量时，你不再生动地想象盒子，它们可能仍然在你的想象中表现为“盒子”。这些近似的东西是如何在你的头脑中工作被称为“心理模型”。如果你已经编程很长时间了，这可能很难，但是试着去注意和反省你的思维模式。它们可能是视觉、空间和机械思维捷径的组合。

这些直觉(比如变量的容器特征)影响着我们一生阅读代码的方式。但有时，我们的思维模式是错误的。也许我们之前阅读的教程为了便于解释而牺牲了正确性。也许我们错误地把对某种特定语言的理解，像this，从我们之前学过的另一种语言中转移过来。也许我们从一些代码中推断出一个心智模型，但从未真正验证它是否准确。

识别和解决这些问题就是JavaScript的全部内容。我们将逐步构建(或者可能重建)你的JavaScript心智模型，使其准确和有用。一个好的心智模型可以帮助你更快地发现并修复bug，更好地理解其他人的代码，并对自己编写的代码充满信心。

编码，快与慢

丹尼尔·卡尼曼(Daniel Kahneman)的《思考，快与慢》(Thinking, Fast and Slow)是一本广受欢迎的非虚构类书籍。它的中心论点是人类在思考时使用两种不同的“系统”。

只要有可能，我们就会依赖“快速”系统。我们和许多动物都有这个系统，这给了我们惊人的能力，比如走路时不跌倒。这种“快速”系统擅长模式匹配(生存所必需的!)和“直觉反应”。但它不擅长计划。

独特的是，由于额叶的发展，人类也拥有一个“缓慢”的思维系统。这个“缓慢”的系统负责复杂的逐步推理。它让我们计划未来的事件，参与争论，或者遵循数学证明。

因为使用“慢”系统是如此耗费脑力，我们倾向于默认使用“快”系统——即使在处理像编码这样的脑力任务时也是如此。

想象一下，你有很多工作要做，你想快速识别这个函数的功能。快速浏览一下:

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;
}

你也许会注意到：

您可能没有注意到(如果您注意到了，那就太好了!)，这个函数还意外地更改了原始电子表格的标题。

遗漏这样的bug是每个程序员每天都会遇到的事情。但是现在您知道存在一个错误，您会以不同的方式阅读代码吗?如果您一直在“快速”模式下阅读代码，那么您可能会切换到更费力的“缓慢”模式来查找它。

在“快速”模式中，我们根据命名、注释和它的整体结构来猜测代码做什么。在“慢”模式中，我们一步一步地追溯代码所做的事情。

这就是为什么拥有一个正确的心智模式如此重要。在我们的头脑中模拟一台计算机已经够困难的了——而这种努力被错误的心智模型浪费了。

如果你根本找不到bug也不用担心。这意味着你将从本课程中得到最大的收获!在接下来的模块中，我们将一起重建JavaScript的心智模型，这样您就可以清楚地看到这个bug。

在下一个模块中，我们将开始为一些最基本的JavaScript概念——值和变量——构建心智模型。

原文

原系列文章地址：www.yuque.com/robinson/js…

备注：原文来自react核心作者Dan大佬的javascript系列技术邮件。