每个开发人员都必须了解这 7 个 JavaScript 概念。

我设定了 2022 年的目标，要掌握基础知识。

还记得小时候在沙滩上堆沙堡的场景吗？结果几个小时后回来，发现整个城堡都被冲走了？问题出在地基上。沙子粘不住太久，尤其是在加水的情况下。这正是现在大多数开发人员试图做的事情，有时我也会感到愧疚……学习一个又一个框架，不断地在薄弱的地基上添加新的东西。但是，无论城堡有多高，如果地基是用沙子建造的，它们几秒钟内就会被冲走。

无论我们看到多少新的 JavaScript 框架，其基础部分仍然是通过 HTTP 传送到浏览器的 JavaScript 包。

1. 范围

作用域指的是变量访问。代码运行时我可以访问哪些变量？在 JavaScript 中，默认情况下，你始终处于根作用域，即窗口作用域。作用域只是一个带有边界的框，用于限制变量、函数和对象。这些边界对变量进行限制，并决定你是否有权访问该变量。它限制了变量在代码其他部分可见或可用的范围。你必须清楚地理解这个概念，因为它有助于你分离代码中的逻辑，并提高可读性。作用域可以通过两种方式定义——

• 本地范围允许访问边界内（框内）的所有内容
• 全局作用域指的是边界之外（盒子之外）的一切。全局作用域无法访问局部作用域中定义的变量，因为它与外界隔绝，除非你将其返回。

示例：下面的代码会报错，因为“name”是在 showName() 函数的边界（局部作用域）内定义的。你无法在函数外部访问此变量。

现在，看一下下面给出的代码，看看如何访问在本地范围内定义的变量“name”。

2. IIFE（立即调用函数表达式）

顾名思义，IIFE 是 JavaScript 中的一个函数，一旦定义就会立即调用并执行。IIFE 中声明的变量无法被外部访问，这样可以避免全局作用域被污染。因此，使用 IIFE 的主要原因是立即执行代码并确保数据隐私。

3. 提升

很多开发人员在不了解 JavaScript 中变量提升的概念时，会得到意想不到的结果。在 JavaScript 中，你可以在函数定义之前调用它，而不会出现“Uncaught ReferenceError”错误。这背后的原因是变量提升，即 JavaScript 解释器在代码执行之前始终将变量和函数声明移动到当前作用域（函数作用域或全局作用域）的顶部。让我们通过一个例子来理解这一点。

示例：看一下下面的代码。

现在，如果我们在声明函数之前调用它（使用提升），会发生什么？

上面的代码没有报错，控制台里输出了“A-oo-oo-oo-ooo! Woo-oo-oo-ooo!”。这就是 JavaScript 中的提升。

4. 结束

闭包只是一个函数内部的函数，可以访问外部函数变量。现在，这个定义听起来很简单，但真正的魔力在于作用域。内部函数（闭包）可以访问其作用域中定义的变量（大括号之间定义的变量）、其父函数作用域中的变量以及全局变量。现在需要记住，外部函数无法访问内部函数变量（我们已经在作用域概念中讨论过这一点）。总结一下：闭包可以简单地定义为“函数运行，函数执行。它永远不会再次执行，但它会记住对这些变量的引用，因此子作用域始终可以访问父作用域。”

5.回调

在 JavaScript 中，回调函数只是一个函数，它作为参数传递给另一个函数，并在另一个函数内部调用或执行。回调函数需要等待另一个函数执行完毕或返回一个值，这就构成了函数链（当 X 完成时，Y 才会执行，如此循环往复）。这就是为什么回调函数通常用于 JavaScript 的异步操作中，以提供同步功能。

6. 承诺

我们理解回调的概念，但是如果您的代码中回调内又包含回调，并且这种循环往复，会发生什么情况呢？这种回调的递归结构被称为“回调地狱”，Promise 可以帮助解决此类问题。当我们需要执行两个或多个连续操作（或链式回调）时，Promise 在异步 JavaScript 操作中非常有用，其中每个后续函数都会在前一个函数完成时启动。Promise 是一个对象，它可能在未来某个时间产生一个值，这个值要么是已解析的值，要么是未解析（被拒绝）的原因。根据developer.mozilla_的说法，“Promise 是一个表示异步操作最终完成或失败的对象。本质上，Promise 是一个返回的对象，您可以将回调附加到该对象，而不是将回调传递给函数。”Promise 解决了“回调地狱”的问题，它只不过是一个回调的递归结构（回调内的回调，回调内的回调等等）。

承诺可能有三种状态……

• 已完成：操作成功完成时。
• 拒绝：操作失败。
• 待定：初始状态，既未完成也未拒绝。

7. 异步与等待

停下来等待，直到问题得到解决。Async & await 只是 Promises 上的语法糖，与 Promises 类似，它也提供了一种更同步地维护异步操作的方法。因此，JavaScript 中异步操作可以在各种版本中处理……

• ES5 -> 回调
• ES6 -> 承诺
• ES7 -> 异步 & 等待

您可以使用 Async/Await 执行 Rest API 请求，在数据推送到视图之前，确保其完全加载。对于 Node.js 和浏览器程序员来说，async/await 是一项重大的语法改进。它可以帮助开发人员在 JavaScript 中实现函数式编程，并提高代码的可读性。

示例：查看下面的代码。

为了通知 JS 我们正在处理 Promise，我们需要将“await”函数包装在“async”函数中。在上面的例子中，我们等待两件事：响应和帖子。在将响应转换为 JSON 格式之前，我们需要确保已经获取了响应，否则我们最终可能会转换一个尚未获取的响应，这很可能会引发错误。

希望以上内容能对你有所帮助。这引出了一个问题：

对于任何 Javascript 开发人员来说，还有哪些概念是必须了解的？