[Just JavaScript] 01. 思维模型 React核心成员Dan Abramov的JavaScript教程中文翻译版

2020-03-23 15:18:38

还记得你初学JavaScript时,是如何理解变量的吗?本教程将从心理学入手,教你重新认识JavaScript,培养正确高效的思维模式。来自React核心团队成员和Redux作者Dan Abramov的全新JavaScript教程《Just JavaScript》第一节——思维模型中文翻译版。

请阅读以下代码:

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

当代码运行后,a和b的值各是多少?请在阅读前在脑海中思考这个问题。

如果你已经编写了一段时间的JavaScript,您可能会反对:“上面的代码片段比我们编写的代码简单得多,思考这个问题有什么意义呢?”

这个练习的麦金地不是向你介绍变量。我们假设你已经熟悉变量了。相反,它会让你注意到并反思你的思维模式。

iPhone中的拟物化图标,通过类比让用户与手机的交互符合人类对事物的认知

·什么是思维模型

请再次阅读上面的代码,再次确定结果是什么?(我们将在晚些时候解释为什么要这样做)

当你第二次阅读的时候,请感受你脑子里发生的事情,一步一步。

你的独白可能会是这样:

let a = 10;

声明一个名为a的变量,将它的值设置为10。

let b = a;

声明一个名为b的变量,将它的值设置为a。

等等,a是什么呀?对,a的值为10,所以b也是10.

a = 0;

在将名为a的变量设置为0.

所以现在,a的值是0,b的值是10。这就是我们的答案。

也许你的独白有点不同。也许你说的是“分配”而不是“设置”,或者你读的顺序略有不同。也许你得到了不同的结果。注意它到底有多不同。注意,即使是这段独白,也无法捕捉到你脑海中真正发生的事情。你可能会说“把b设置为a”,但是设置一个变量意味着什么呢?

你可能会发现,对于每个熟悉的基本编程概念(如变量)及其操作(比如设置其值),都有一组与之关联的根深蒂固的类比。

其中一些可能来自现实世界,其他的可能会来自你之前学过的其他领域,比如数学中的数字。这些类比可能会重叠,甚至相互矛盾,但它们仍然可以帮助您理解代码中发生的事情。

例如,许多人第一次知道变量是“盒子”,你可以把东西放进去。即使现在当你看到一个变量时,你不再生动地想像盒子,它们仍然可能在你的想象中表现出“方形”。这种通过类比认知事物的方式被称为“思维模型”。如果你已经编程很长时间了,生动地想像可能已经不复存在,但是请尝试去留意和复现你的思维模型。它们可能是视觉、空间和机械思维捷径的组合。

类比产生的直觉(比如将变量比作“盒子”)影响着我们如何阅读代码。但是有时,我们的思维模式也是错误的。也许我们读过的一个教程,为了便于读者理解,而牺牲了语言的严谨性。也许我们错误地认为正在学习的语言,具有之前学过的另一种语言的特征。也许我们从某段代码中产生了一个思维模型,但是从来没有验证过模型的正确性。

识别和解决这些问题就是JavaScript的全部内容。我们将逐步构建(或者,可能的话,重新构建)您的JavaScript思维模型,使之更准确和有用。一个好的思维模型将帮助你更快地发现和修复错误,更好地理解别人的代码,并且对你的代码充满信心。

(顺便说一下,变量a的值是0,变量b的值是10,才是正确答案)


·编码,快与慢

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

你可能已经注意到了:

· 这个函数正在复制表格

· 如果原来表格没有保存,函数会抛出错误

· 它将复制后的表格的重命名为{原标题}的副本

您可能没有注意到的(如果你注意到了,那就太棒了!)这个函数也意外地改变了原始电子表格的标题。

每一个程序员,每天都会遇到这样的错误。但是现在你知道代码存在一个bug,你会以不同方式阅读代码吗?如果您一直“快速”模式下阅读代码,则很可能会切换到更为费劲的“慢速”模式来查找它。

在“快速”模式下,我们根据命名,注释及其总体结构来猜测代码的作用。

在“慢速”模式下,我们能一步步地回溯代码所作的事情。

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

如果你找不到Bug,别担心。这意味着你能从这门课中得到最大的收获!在接下来的模块中,我们将一起重新构建JavaScript的思维模式,以便有一天您可以一目了然地发现这个Bug。

在下一节课程中,我们将从最基本的JavaScript概念 —— 值和变量,重新构建你的思维模型。


原作者:Dan Abramov

原标题:[Just JavaScript] 01. Mental Models

网站: https://overreacted.io

翻译:小宇


下一节:

115210
小宇
ShopXO插件 ▶力扣 ▶Github ▶M站
JustJavaScript
DanAbramov
[Just JavaScript] 03. 变量和值 React核心成员Dan Abramov的JavaScript教程中文翻译版
JavaScript原始值可以改变吗?可以给原始值设置属性吗?变量是值吗?变量和值的联系是什么?让我们连线JavaScript宇宙中的变量和值,重构你对JavaScript变量和值的思维模式。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
https://www.youtube.com/watch?v=otCpCn0l4Wo
https://eggheadio.typeform.com/to/RWJg3m
JustJavaScript
DanAbramov
[Just JavaScript] 02. JavaScript的宇宙 React核心成员Dan Abramov的JavaScript教程中文翻译版
什么是值,JavaScript中哪几种类型,每种类型的用途的是什么?如何通过表达式向JavaScript提问,如何检查值的类型。本节让我们一起探索JavaScript的宇宙。
https://eggheadio.typeform.com/to/PLyTKB
https://www.liquidweb.com/kb/what-is-a-progressive-jpeg