JavaScript 的层次

最近，我正在写一个课程计划，打算教一小群学生如何使用 Gatsby 展示数据。我的目标是把各个主题分解开来，并解答所有学员可能会问到的底层问题。在这个过程中，我注意到 JavaScript 的生态系统层层叠叠！弄清楚每个功能背后的技术对于调试和知识增长非常有帮助。所以，事不宜迟，我来给你讲解 JavaScript 的层层奥秘！

Javascript……或者是 ECMAScript？ES6？发生什么事了？！

JavaScript 是你的基础语言。然而，它基于 ECMAScript，而 ECMAScript 是脚本语言的标准。ECMAScript 和编程语言一样，有不同版本。了解 ECMAScript 规范变更时会发生什么情况非常重要。

某种程度上，ECMAScript 会告诉你 JavaScript能做什么。它实际做什么则取决于解释它的 JavaScript 引擎。JavaScript 引擎存在于浏览器中。浏览器需要支持该标准，你才能使用这些新功能。

目前，被广泛支持的 ECMAScript 版本是 ES6。ES6 标志着标准的重大变化，引入了let和等概念const。

character.map(function ( [first, last] ) {
    return first + last
});

解构赋值是 ES6 中引入的功能之一

如果您希望使用新引入的功能，了解 ECMAScript 在 Javascript 生态系统中的位置会特别有用。

Node -v 是我的 Javascript 版本，不是吗？

前端开发中比较容易让人困惑的一点与 Node 有关。在本地开发时，你的电脑很可能指向一个 Node 版本。Node 实际上捆绑了两个不同的组件：Node.js 运行时和 npm 包管理器。因此，你可能只使用其中之一，也可能同时使用，或者两者都不使用。

您可以使用 npm 安装外部项目依赖项。但这不一定意味着您正在使用 Node.js 运行时。

如前所述，JavaScript 由浏览器解释执行。Node.js 运行时是解释器和环境的组合，允许你将 JavaScript 用作通用编程语言，即在浏览器之外使用。它实际上基于 Chrome 使用的 JavaScript 解释器。然而，这意味着如果你正在构建类似 React 的应用程序，Node.js 运行时不会对你产生任何影响。你真正感兴趣的是不同的浏览器如何解释你的代码。

JSX

因此，代码的解释方式和支持的功能是多层次的。然而，这只是影响代码实际语法的方式之一。现代 JavaScript 的复杂性之一是核心框架的使用。React 是一个特别流行的框架。在 React 中，您可以使用 JSX。JSX 是一种 JavaScript 语法，允许您在 React 组件中直接使用 HTML 标签。这意味着您将使用 JavaScript 语言和 HTML 文件中常见的标记的组合。

const IndexPage = () => (
    <Layout>
        <div>Your code is going to go here!</div>
    </Layout>
)

JSX 的语法规则和特性与 JavaScript 语言不同。关于函数作用域圆括号和方括号的规范可能看起来不太熟悉。了解 JSX 强制执行的规则将有助于你理解为什么它与你的 JavaScript 知识存在冲突。

框架

JavaScript 的另一层特性是特定于你所使用的框架的功能。例如，在 React 中，你可能会处理 props 的传递。Props 是框架的一个概念。

function Introduction(props) {
  return <h1>Welcome, {props.name}</h1>
}

框架...在框架上？！？！

现代 JavaScript 的复杂性之一是核心框架的使用……听起来很熟悉？这意味着你拥有像 Gatsby 这样的基于 React 的框架。理解 Gatsby 的功能以及 React 提供的功能可能是一个挑战。虽然这不太可能影响你的语法，但会在各种情况下影响你的行为。例如，Gatsby 将 GraphQL 查询的结果直接传递给你的组件 props。尝试在 React 中这样做，你就会想知道你哪里出了问题。

哇

借助各种工具，编写 JavaScript 应用程序可以变得异常轻松。然而，当你接触到更复杂的功能并深入研究代码时，很容易迷失方向。了解堆栈的哪一层会给你带来问题，或者哪一层可能会提供更简单的解决方案，将非常有帮助。