因此本文将分别解释“词法（lexical）”和“作用域（scope）”这两个概念，然后再解释什么是词法作用域。

让我们开始吧~~

什么是作用域

作用域 表示一个区间，在这个区间内声明的所有内容（比如方法或变量）都可以被该区间内的代码访问到。

注意：

• 作用域（Scope） 指一个范围、区域或空间
• 全局作用域（Global Scope） 指全局空间或一个公共空间
• 局部作用域（Local Scope） 指一个局部空间或一个受限制的空间

举个例子：

// 定义一个全局变量:
const fullName = "Oluwatobi Sofela";

// 定义多层嵌套函数:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

// 打印结果:
console.log(profile()) // 'Oluwatobi Sofela'

点击查看源代码。

在上述示例中，我们定义了一个fullName全局变量，这就意味着在脚本内所有代码都可以访问fullName变量。

我们在sayName()函数内定义了writeName()函数，所以writeName()被sayName()的局部作用域包裹着。

换言之，writeName()只能被sayName()函数内部的代码访问。

请记住，无论writeName()函数何时被调用，编译器都不会直接访问全局作用域下的fullName变量，而是通过作用域链依次查找。

什么是作用域链

作用域链是一个独特空间。当一个变量被调用，那么变量在 被调用 时所在的局部作用域和全局作用域之间，就形成了一个作用域链。

示例

// 定义一个全局作用域变量：
const fullName = "Oluwatobi Sofela";

// 定义多层嵌套函数:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

console.log(profile()) // 'Oluwatobi Sofela'

在上述示例中，fullName 变量在 writeName() 函数作用域中被调用。

因此，从变量的执行作用域到全局作用域之间存在如下作用域链：

writeName() scope ---> sayName() scope ---> profile() scope ---> global scope

换言之，从fullName变量的执行作用域到它的词法作用域（此处指全局作用域）之间有4层作用域。

注意： 在 JavaScript 作用域链中，全局作用域是整个作用域链的终点。

作用域链是如何工作的

JavaScript 的作用域链规定了编译器在查找 被调用变量 的词法作用域时所遵循的查找规则。

考虑如下示例代码：

// 定义一个全局作用域变量：
const fullName = "Oluwatobi Sofela";

// 定义多层嵌套函数：
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

console.log(profile()) // 'Oluwatobi Sofela'

在上述示例中，无论何时调用profile()函数，编译器都会首先调用sayName()函数（profile()函数体内只有一个sayName()函数）。

然后，编译器会调用writeName()函数（sayName()函数体内只有一个writeName()函数）。

最终，writeName()函数会调用并返回fullName变量的值，所以编译器将返回fullName的值。但编译器不会直接从全局作用域中调用fullName。

相反的，编译器必须通过作用域链一步一步的查找fullName的词法作用域。

下面是编译器查找fullName词法作用域的步骤：

1. 首先，编译器会检查writeName()的函数作用域是否定义了fullName变量。未找到，继续向上查找下一个作用域，即sayName()作用域。
2. 第二步，编译器在sayName()的函数作用域中查找，依然没找到，继续向上查找下一个作用域，即profile()作用域。
3. 第三步，编译器在profile()的函数作用域中查找，依然没找到，继续向上查找下一个作用域，即全局作用域。
4. 第四步，编译器查找到了全局作用域。幸运的是，在全局作用域下找到了fullName变量，然后将其值（"Oluwatobi Sofela"）作为返回值返回。

实践一下🤸‍♂️🏋️‍♀️🏊‍

考虑以下代码，并思考：编译器会调用哪一个fullName？

// 在全局作用域中定义fullName:
const fullName = "Oluwatobi Sofela";

// 嵌套函数包含2个fullName变量
function profile() {
  const fullName = "Tobi Sho";
  function sayName() {
    const fullName = "Oluwa Sofe";
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

console.log(profile())

编译器将调用第一个，第二个，还是第三个fullName呢？

注意： 如果你多多练习，就能从这个教程中收获多多。

如果你卡住了，不要气馁。重新温习以上知识，然后在试一次。

如果你已经用尽了全力（不要自欺欺人）但还是不会，那就继续往下看正确答案吧。

你做对了吗

在上面脚本中定义的三个fullName中，编译器将调用并返回定义在sayName()函数中的fullName变量。

sayName()中定义的fullName之所以会被调用，是因为编译器查找作用域链时最先在sayName()的作用域中找到fullName。

因此，当profile()被调用时，返回值是"Oluwa Sofe"。

点击查看源代码

特别强调 3 点：

• 假如编译器没有在任何作用域中找到fullName，那么编译器将返回一个引用错误Uncaught ReferenceError: fullName is not defined。
• 全局作用域是 JavaScript 作用域链的最后一个作用域，即全局作用域是查找的终点。
• 一个内部作用域（子作用域）可以访问它的外部作用域（父级作用域），但是外部作用域不能访问它的子作用域。
  举个例子，在上面代码中，writeName()可以访问它的任何父级作用域（比如sayName()的局部作用域，profile()的局部作用域，或者全局作用域）。
  但是，无论是sayName()和profile()的局部作用域，还是全局作用域，都不能访问writeName()的作用域。

作用域小结

JavaScript 中所有的作用域都是一个可被访问的区间。

因此，如果你女（男）朋友打电话让你去他的私人作用域时，切记他们是在邀请你去他们的私人空间 😜!

你一旦去了，就要问他们最好的词法游戏是什么...

但是词法（lexical）究竟是什么意思？让我们一起往下看。

什么是词法（Lexical）

词法（Lexical） 指的是定义某个事物。

任何创建文字、表达式或变量的声明都叫词法。

比如，拼字游戏就是一种词法活动，因为这个游戏在创造文字。

语言学家的工作也是一种词法事业。

注意： 字典（dictionary）又叫词典（lexicon），也就是说，词典（lexicon）就是一部罗列并定义文字的字典（dictionary）。

现在我们知道了作用域和词法的意思，那就可以讨论 词法作用域 了。

什么是词法作用域（Lexical Scope）

词法作用域（Lexical Scope） 是定义表达式并能被访问的区间。

换言之，一个声明（定义变量、函数等）的词法作用域就是它被定义时所在的作用域。

注意：

• 词法作用域又叫静态作用域。
• 一个声明 被调用时的作用域 不一定是它的词法作用域。相反的，定义时的作用域 才是词法作用域

一个词法作用域的小示例

考虑如下代码：

// 定义一个全局作用域变量：
const myName = "Oluwatobi";

// 在函数体内调用myName变量
function getName() {
  return myName;
}

console.log(getName()) // 'Oluwatobi'

在上述示例中，我们在全局作用域定义了myName变量，并在getName()函数作用域内调用了该变量。

问题： myName变量的词法作用域是什么？全局作用域还是 getName()的局部作用域？

答案： 切记 词法作用域 意味着 定义时的作用域，并不是调用时的作用域 。因此myName变量的词法作用域是全局作用域，因为我们在全局环境下定义了myName变量。

再来一个小例子

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

console.log(getName())  // 'Oluwatobi'

问题： myName变量的词法作用域是什么？

答案： 我们在getName()函数内定义并调用了myName变量。因此，myName的词法作用域是getName()的局部作用域，因为getName()是myName定义时所在的作用域。

词法作用域如何工作

JavaScript 表达式的词法作用域决定了哪些代码可以访问它。

换言之，只有词法作用域内的代码才可以访问该作用域内部的代码。

考虑如下代码：

// 定义一个函数：
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// 再定义一个函数：
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// 调用 displayFullName():
console.log(displayFullName());

// 返回值：
Uncaught ReferenceError: lastName is not defined

上述代码中，调用displayFullName()时报错Uncaught ReferenceError。这是因为只有词法作用域内的代码才能访问该作用域的代码。

因此，不管是displayFullName()函数，还是它内部的代码都不能访问lastName变量，因为lastName定义在不同的作用域中。

换言之，lastName的词法作用域和displayFullName()不相同。

lastName的词法作用域是showLastName()函数作用域，而displayFullName()的词法作用域是全局作用域。

现在，考虑另一段代码：

// 定义一个函数：
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// 再定义一个函数：
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// 调用 displayFullName():
console.log(displayFullName());

// 返回值：
"Oluwatobi Sofela"

在上述代码中，displayFullName()成功返回"Oluwatobi Sofela"，因为displayFullName()和showLastName()在相同的词法作用域中。

换言之，displayFullName()可以调用showLastName()，因为这两个函数都定义在全局作用域中。

注意：

• 上述 2 个示例中，displayFullName()不能访问showLastName()中lastName变量。但displayFullName()可以调用showLastName()，而showLastName()返回了lastName变量的值。
• 词法作用域的替换方案是动态作用域，但是除了在极少的开发语言（比如 bash 脚本）中使用外，很少使用它。

总结

只要你一听到词法，就要联想到是定义某个事物。

因此，一辆车、一个变量、一部手机、一个函数、一件泳衣等，这些事物的词法作用域指的就是定义他们时所在的区间。

写在最后

这篇文章不仅讨论了在 JavaScript 中什么是词法作用域，还探讨了为什么它是一个很重要的编程概念。感谢你阅读本文！

原文：Lexical Scope in JavaScript – What Exactly Is Scope in JS，作者：Oluwatobi Sofela

最近我发了一条推特，描述了这个问题，我被大家的反馈震惊到了。所以我决定写一篇关于 Promise 的教程。

我看过很多关于 Promise 的文章，但大部分教程都没有通过类比的方式解释清楚 Promise 到底是什么。初学者搞不懂 Promise 的根本原因是他们不知道 Promise 是做什么的，以及如何在简单和复杂的场景中使用它。

因此在这篇教程中，我将通过一个小故事来解释什么是 Promise、Promise 是如何工作的。同时我也会通过一些代码示例来说明在 JavaScript 中如何使用 Promise。

什么是 Promise

想象一下，你准备面试某个公司的前端工程师。

你走进面试会场，当面试马上要开始时你发现简历忘带了，这时你怎么办？

你没有气馁。因为你很幸运，你有一个室友。

你马上给室友打电话寻求帮助，恳求室友帮你找到简历。你的室友承诺他一旦找到就立马回你消息。

假设简历被找到，室友给你回复信息：

“太好了，我找到你的简历了！”

但是如果室友没有找到，他就要回复一条失败的信息，并解释他为什么没有找到简历。比如，他可能给正在面试的你发如下信息：

“对不起，我没有找到你的简历，因为你的保险柜钥匙丢了。”

与此同时，面试还要继续。但面试官并没有拿到真实的简历，而是得到一个正在找简历的承诺，同时面试官把该简历的状态设置成进行中（PENDING）。

你回答了所有问题。但不幸的是，能否得到这个工作还要依赖你简历的最终状态（FINAL STATUS）。

你的室友终于回消息了。正如我们前面讨论过的，如果他没有找到简历，他就需要发一个失败的信息并解释为什么没有找到。

如果是这种情况，面试结束，你被 拒绝（Rejected） 了。

如果室友找到了简历，他会很高兴的告诉你他找到了，而你将继续面试，并 获得（FULFILL） 这份工作。

如何把上述过程翻译成 JS 代码

室友承诺找简历并回复信息的过程等同于我们在 JavaScript 中定义一个 Promise。定义 Promise 并不能直接或立即获得返回值，而是返回一个 Promise 对象。这个 Promise 对象在一段时间后会接收返回值。

Promise 对象是异步的，这就意味着程序需要花点时间才能获得结果。这和找简历是一样的，都需要花点时间去找。

基于这个原因，在找的这个时间里，面试官并不是什么都没做，而是基于简历一会儿就找到的承诺，他们依然开始面试候选人。在这个场景里，我们用简历一会儿就找到的承诺替换了真实的简历。

同理，JS 引擎也并不是等着什么也不做，而是继续执行后续代码，并将返回的Promise对象状态设置为 Pending。

回复信息包含是否找到简历的状态信息。对于Promise对象来说，回复信息被称作返回值。

如果回复信息是 “success”，我们将录取候选人。如果是 “failure”，我们不录取该候选人。

在 Promise 中，我们通过回调函数处理Promise的返回值。这些处理函数定义在then()方法中。

为了指定如何调用回调函数，需要使用以下两个方法：

• resolve(value): 表明 Promise 任务成功，调用then()的成功回调函数。
• reject(error): 表明 Promise 任务失败，调用then()的错误回调函数。

如果 Promise 成功，则调用成功回调，如果失败，调用失败回调。

在异步任务完成之前，Promise 只是一个占位符。当你定义了一个 Promise，你并不会立即获得返回值，而是获得一个 Promise 对象。

如何在 JavaScript 中使用 Promise

你可以通过Promise类定义一个 Promise 对象。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 3000);
});

console.log(myPromise);

在控制台运行将返回一个Promise对象：

除了通过构造函数声明一个 Promise 对象外，还可以使用 Promise 内置的 API 进行声明：

const anotherPromise = Promise.resolve("this is the eventual value the promise will return")

console.log(anotherPromise);

示例 1 中的 Promise 等待 3s 后获取到成功返回的信息：this is the eventual...，而示例 2 中将立即获取到成功返回的信息。

JavaScript Promise 中的错误处理

Promise 对象也能被rejected。大多数时候，rejected 的发生是因为执行异步任务的时候抛出了错误，此时就会调用reject()方法。

下面的示例展示了一个 Promise 对象是如何执行 reject 方法的:

const myPromise = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('a is found!'): reject('sorry, no a');
  }, 3000);
}); 

你能想到 Promise 被 rejected 的原因吗？如果你的答案是：a的值是 false，那么恭喜你答对了。

在示例 3 中，代码执行 3s 后将调用 reject 方法，因为(a)?表达式的值是 false，所以触发reject方法。

Promise 的链式调用

当 Promise 返回了某个值，通常你都会对返回值进行处理。

比如，你发送了一个网络请求，你期望获取数据并展示在页面上。

你可以定义两个回调函数，当 Promise 返回成功或失败时进行回调。这两个回调函数定义在then()内：

const anotherPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 3000);
});

// CONTINUATION
anotherPromise
.then(value => { console.log(value) }) 

示例 4 的代码在 3s 后返回成功信息：

原则上你可以无限链式调用，调用链会依次执行，而且前一个 then 的返回值作为参数传入后一个 then。

const anotherPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('this is the eventual value the promise will return');
  }, 3000);
});

anotherPromise
.then(fulfillFn, rejectFn)
.then(fulfilFn, rejectFn)
.then(value => { console.log(value) })

但我们还是遗漏了重要的内容。

要时刻记住，then()方法必须有两个回调函数：第一个参数是成功回调，第二个参数是错误回调。

在示例 4 和示例 5 中都没有传入第二个回调函数。因此，如果代码报错，就没有错误回调捕获错误信息。

如果你执意要在then()中只定义一个回调函数（即成功回调），那么你就需要在 Promise 调用链的末端调用catch()方法捕获任何可能的报错信息。

如何在 JS 中使用catch()方法

在 Promise 调用链上，无论哪个环节报错，catch()方法都会被调用。

const myPromise = new Promise((resolve, reject) => {
  let a = false;
  setTimeout(() => {
    return (a) ? resolve('a is found!'): reject('sorry, no a');
  }, 3000);
}); 

myPromise
.then(value => { console.log(value) })
.catch(err => { console.log(err) });

因为myPromise最终状态是 rejected，then()方法中的成功回调被忽略。而catch()方法中的错误回调被执行，并在控制台打印如下错误信息：

写在最后

JavaScript 中的 Promise 是一个运行异步任务的强大功能。大部分情况下，在前端面试时，面试官都会问一些关于 Promise 的问题。

在这片文章中，我已经解释了 Promise 的简单应用场景，也通过示例的方式展示了基本用法。

希望你能从文章中获取有用的知识。如果你喜欢编程教程，点击查看我的博客。我会经常发布一些有关软件开发的文章。

再次感谢您的阅读，再会。

P/S： 如果你也在学习 JavaScript，我也创建了一个电子书，上面有 50 个关于 js 的主题，而且都是我亲自手绘的哦~~点此查看。

原文：What is a Promise? JavaScript Promises for Beginners，作者：Kingsley Ubah