Mental Models

Read this code: 阅读此代码：

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

What are the values of a and b after it runs? Work it out in your head before reading further.
运行后 a 和 b 的值是多少？在继续阅读之前先在脑海中计算一下。

If you’ve been writing JavaScript for a while, you might object: “This snippet is much simpler than the code I’m writing every day. What’s the point?”
如果你已经写了一段时间的 JavaScript，你可能会反对：“这个代码片段比我每天写的代码简单得多。这有什么意义？”

The goal of this exercise isn’t to introduce you to variables. We assume you’re already familiar with them. Instead, it is to make you notice and reflect on your mental model.
这个练习的目标不是向你介绍变量。我们假设你已经熟悉它们了。相反，它是为了让你注意并反思你的心理模型。

What’s a Mental Model? 什么是心理模型？

Read the code above again with an intention to really be sure what the result is. (We’ll see why this intention is important a bit later.)
再次阅读上面的代码，目的是要真正确定结果是什么。（稍后我们会看到这个意图为什么重要。）

While you’re reading it for the second time, pay close attention to what’s happening in your head, step by step. You might notice a monologue like this:
当你第二次阅读它时，密切注意你脑海中发生的事情，一步一步地。你可能会注意到这样的独白：

• let a = 10;
  • Declare a variable called a. Set it to 10.
    声明一个名为 a 的变量。将其设置为 10 。
• let b = a;
  • Declare a variable called b. Set it to a.
    声明一个名为 b 的变量。将其设置为 a 。
  • Wait, what’s a again? Ah, it was 10. So b is 10 too.
    等等， a 是什么来着？啊，是 10 。所以 b 也是 10 。
• a = 0;
  • Set the a variable to 0.
    将 a 变量设置为 0 。
• So a is 0 now, and b is 10. That’s our answer.
  所以 a 现在是 0 ，而 b 是 10 。这就是我们的答案。

Maybe your monologue is a bit different. Maybe you say “assign” instead of “set,” or maybe you read it in a slightly different order. Maybe you arrived at a different result. Pay attention to how exactly it was different. Note how even this monologue doesn’t capture what’s really happening in your head. You might say “set b to a,” but what does it even mean to set a variable?
也许你的独白有点不同。也许你说“赋值”而不是“设置”，或者你以稍微不同的顺序阅读。也许你得出了不同的结果。注意它到底是如何不同的。注意即使这个独白也没有捕捉到你脑海中真正发生的事情。你可能会说“将 b 设置为 a ”，但设置一个变量到底是什么意思呢？

You might find that for every familiar fundamental programming concept (like a variable) and operations on it (like setting its value), there is a set of deep-rooted analogies that you associated with it. Some of them may come from the real world. Others may be repurposed from other fields you learned first, like numbers from math. These analogies might overlap and even contradict each other, but they still help you make sense of what’s happening in the code.
你可能会发现，对于每一个熟悉的基本编程概念（如变量）及其操作（如设置其值），都有一套你与之相关的深层类比。有些可能来自现实世界。其他可能是从你先学的其他领域（如数学中的数字）中重新利用的。这些类比可能会重叠，甚至相互矛盾，但它们仍然帮助你理解代码中发生的事情。

For example, many people first learned about variables as “boxes”—containers that hold your stuff. Even if you don’t vividly imagine boxes anymore when you see a variable, they might still behave “boxily” in your imagination.
例如，许多人最初将变量理解为“盒子”——装你东西的容器。即使你在看到变量时不再生动地想象盒子，它们在你的想象中可能仍然表现得像“盒子”。

These approximations of how something works in your head are known as “mental models.” It may be hard if you’ve been programming for a long time, but try to notice and introspect your mental models. They’re probably a combination of visual, spatial, and mechanical mental shortcuts. These intuitions (like “boxiness” of variables) influence how we read code our whole lives.
这些在你脑海中对某物如何工作的近似被称为“心理模型”。如果你编程时间很长，这可能很难，但试着注意并反思你的心理模型。它们可能是视觉、空间和机械心理捷径的组合。这些直觉（如变量的“盒子性”）影响我们一生如何阅读代码。

Unfortunately, sometimes our mental models are wrong. Maybe a tutorial we read early on sacrificed accuracy in order to make a concept easier to explain. Maybe, when we started learning JavaScript, we incorrectly “brought over” an expected behavior from a language we learned earlier. Maybe we inferred a mental model from some piece of code but never really verified it was accurate.
不幸的是，有时我们的心理模型是错误的。也许我们早期阅读的教程为了更容易解释一个概念而牺牲了准确性。也许，当我们开始学习 JavaScript 时，我们错误地“带来了”我们早先学习的一种语言的预期行为。也许我们从某段代码中推断出了一个心理模型，但从未真正验证它是否准确。

Identifying and fixing these problems is what Just JavaScript is all about. We will gradually build (or possibly rebuild) your mental model of JavaScript to be accurate and useful. A good mental model will give you confidence in your own code, and it will let you understand (and fix) code that someone else wrote.
识别和修复这些问题正是 Just JavaScript 的全部内容。我们将逐步建立（或可能重建）你对 JavaScript 的心理模型，使其准确且有用。一个好的心理模型会让你对自己的代码充满信心，并且能够理解（和修复）别人写的代码。

(By the way, a being 0 and b being 10 is the correct answer.)
顺便说一下， a 是 0 和 b 是 10 是正确答案。

Coding, Fast and Slow 编码，快与慢

“Thinking, Fast and Slow” is a book by Daniel Kahneman that explores the two different “systems” humans use when thinking.
《思考，快与慢》是丹尼尔·卡尼曼的一本书，探讨了人类思考时使用的两种不同“系统”。

Whenever we can, we rely on the “fast” system, which is good at pattern matching and “gut reactions.” We share this system (which is necessary for survival!) with many animals, and it gives us amazing powers like the ability to walk without falling over. But it’s not good at planning.
每当我们可以时，我们依赖“快”系统，它擅长模式匹配和“直觉反应”。我们与许多动物共享这个系统（它对生存是必要的！），它赋予我们惊人的能力，比如走路而不摔倒。但它不擅长计划。

Uniquely, thanks to the development of the frontal lobe, humans also possess a “slow” thinking system. This “slow” system is responsible for complex step-by-step reasoning. It lets us plan future events, engage in arguments, or follow mathematical proofs.
独特的是，由于额叶的发展，人类还拥有一个“慢”思维系统。这个“慢”系统负责复杂的逐步推理。它让我们能够计划未来事件、参与辩论或跟随数学证明。

Because using the “slow” system is so mentally draining, we tend to default to the “fast” one—even when dealing with intellectual tasks like coding.
因为使用“慢”系统是如此令人精神疲惫，我们往往会默认使用“快”系统——即使在处理像编程这样的智力任务时也是如此。

Imagine that you’re in the middle of a lot of work, and you want to quickly identify what this function does. Take a glance at it:
想象一下，你正忙于大量工作，想快速识别这个函数的作用。看一眼它：

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

You’ve probably noticed that:
你可能已经注意到：

• This function duplicates a spreadsheet.
  此功能会复制一个电子表格。
• It throws an error if the original spreadsheet isn’t saved.
  如果原始电子表格未保存，它会抛出错误。
• It prepends “Copy of” to the new spreadsheet’s title.
  它会在新电子表格的标题前加上“复制的”。

What you might not have noticed (great job if you did!) is that this function also accidentally changes the title of the original spreadsheet. Missing bugs like this is something that happens to every programmer, every day.
你可能没有注意到（如果你注意到了，做得很好！）的是，这个功能还意外地更改了原始电子表格的标题。像这样遗漏的错误是每个程序员每天都会遇到的事情。

Now that you know a bug exists, will you read the code differently? If you used the “fast” thinking system at first, you might switch to the more laborious “slow” system when you realize there’s a bug in the code.
既然你知道存在一个错误，你会以不同的方式阅读代码吗？如果你一开始使用的是“快速”思维系统，当你意识到代码中有错误时，你可能会切换到更费力的“慢速”系统。

When we use the “fast” system, we guess what the code does based on its overall structure, naming conventions and comments. Using the “slow” system, we retrace what the code does step by step—a tiring and time-consuming process.
当我们使用“快速”系统时，我们根据代码的整体结构、命名约定和注释来猜测代码的作用。使用“慢速”系统时，我们一步步地追踪代码的作用——这是一个令人疲惫且耗时的过程。

This is why having an accurate mental model is so important. Simulating a computer in your head is hard, and when you have to fall back to the “slow” thinking system, your mental model is all you can rely on. With the wrong mental model, you’ll fundamentally misunderstand what to expect from your code, and all your effort will be wasted.
这就是为什么拥有一个准确的心理模型如此重要。在脑海中模拟计算机是很难的，当你不得不依赖“慢速”思维系统时，你只能依靠你的心理模型。错误的心理模型会让你从根本上误解代码的预期结果，所有的努力都会白费。

Don’t worry if you can’t find the bug at all—it just means you’ll get the most out of this course! Over the next modules, we’ll rebuild our mental model of JavaScript together, so that you can catch bugs like this immediately.
如果你根本找不到错误，不要担心——这只是意味着你将从这门课程中获得最大的收益！在接下来的模块中，我们将一起重建 JavaScript 的心理模型，这样你就可以立即捕捉到这样的错误。

In the next module, we’ll start building mental models for some of the most fundamental JavaScript concepts—values and expressions.
在下一个模块中，我们将开始为一些最基本的 JavaScript 概念——值和表达式——构建心理模型。