JavaScript 高级编程（一）

原文：zh.annas-archive.org/md5/C01E768309CC6F31A9A1148399C85D90

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

关于

本节简要介绍了作者、本书的内容、开始所需的技术技能，以及完成所有包含的活动和练习所需的硬件和软件。

关于本书

JavaScript 是 Web 技术的核心编程语言，可用于修改 HTML 和 CSS。它经常被缩写为 JS。JavaScript 经常用于大多数 Web 浏览器的用户界面中进行的处理，如 Internet Explorer，Google Chrome 和 Mozilla Firefox。由于其使浏览器能够完成工作的能力，它是当今最广泛使用的客户端脚本语言。

在本书中，您将深入了解 JavaScript。您将学习如何在 ES6 中使用新的 JavaScript 语法在专业环境中编写 JavaScript，如何利用 JavaScript 的异步特性使用回调和承诺，以及如何设置测试套件并测试您的代码。您将了解 JavaScript 的函数式编程风格，并将所学的一切应用于使用各种 JavaScript 框架和库构建简单应用程序的后端和前端开发。

关于作者

Zachary Shute在 RPI 学习计算机和系统工程。他现在是位于加利福尼亚州旧金山的一家机器学习初创公司的首席全栈工程师。对于他的公司 Simple Emotion，他管理和部署 Node.js 服务器，MongoDB 数据库以及 JavaScript 和 HTML 网站。

目标

检查 ES6 中的主要功能，并实现这些功能来构建应用程序
创建承诺和回调处理程序以处理异步进程
使用 Promise 链和 async/await 语法开发异步流
使用 JavaScript 操作 DOM
处理 JavaScript 浏览器事件
探索测试驱动开发，并使用 JavaScript 代码测试框架构建代码测试。
列出函数式编程与其他风格相比的优缺点
使用 Node.js 后端框架和 React 前端框架构建应用程序

受众

本书旨在针对任何希望在专业环境中编写 JavaScript 的人群。我们期望受众在某种程度上使用过 JavaScript，并熟悉基本语法。本书适合技术爱好者，想知道何时使用生成器或如何有效地使用承诺和回调，或者想加深对 JavaScript 的了解和理解 TDD 的初学开发人员。

方法

这本书以易于理解的方式全面解释了技术，同时完美地平衡了理论和练习。每一章都设计为在前一章所学内容的基础上构建。本书包含多个活动，使用真实的商业场景让您练习并应用新技能，使之具有高度相关性。

最低硬件要求

为了获得最佳的学生体验，我们建议以下硬件配置：

处理器：Intel Core i5 或同等处理器
内存：4 GB RAM
存储：35 GB 可用空间
互联网连接

软件要求

您还需要提前安装以下软件：

操作系统：Windows 7 SP1 64 位，Windows 8.1 64 位或 Windows 10 64 位
Google Chrome (www.google.com/chrome/)
Atom IDE (atom.io/)
Babel (www.npmjs.com/package/babel-install)
Node.js 和 Node Package Manager（npm）(nodejs.org/en/)

安装说明可以单独提供给大型培训中心和组织。所有源代码都可以在 GitHub 上公开获取，并在培训材料中得到完全引用。

安装代码包

将课程的代码包复制到C:/Code文件夹中。

额外资源

本书的代码包也托管在 GitHub 上，网址为github.com/TrainingByPackt/Advanced-JavaScript。

我们还有来自丰富书籍和视频目录的其他代码包，可在github.com/PacktPublishing/上找到。去看看吧！

约定

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄都显示为以下方式："JavaScript 中声明变量的三种方式：var、let和const。"

代码块设置如下：

var example; // Declare variable
example = 5; // Assign value
console.log( example ); // Expect output: 5

任何命令行输入或输出都以以下方式编写：

npm install babel --save-dev

新术语和重要单词以粗体显示。您在屏幕上看到的单词，例如菜单或对话框中的单词，会以这种方式出现在文本中："这意味着使用块作用域创建的变量受到**时间死区（TDZ）**的影响。"

安装 Atom IDE

要安装 Atom IDE，请在浏览器中转到atom.io/。
点击下载 Windows 安装程序以下载名为AtomSetup-x64.exe的设置文件。
运行可执行文件。
将atom和apm命令添加到您的路径中。
在桌面和开始菜单上创建快捷方式。

Babel 会安装到每个代码项目的本地。要在 NodeJs 项目中安装 Babel，请完成以下步骤：

打开命令行界面并导航到项目文件夹。
运行命令npm init。
填写所有必填问题。如果您不确定任何提示的含义，可以按“enter”键跳过问题并使用默认值。
运行npm install --save-dev babel-cli命令。
运行命令install --save-dev babel-preset-es2015。
验证package.json中的devDependencies字段是否包含babel-cli和babel-presets-es2015。
创建一个名为.babelrc的文件。
在文本编辑器中打开此文件并添加代码{ "presets": ["es2015"] }。

安装 Node.js 和 npm

要安装 Node.js，请在浏览器中转到nodejs.org/en/。
点击下载 Windows（x64），以下载推荐给大多数用户的 LTS 设置文件，名为node-v10.14.1-x64.msi。
运行可执行文件。
确保在安装过程中选择 npm 软件包管理器捆绑包。
接受许可证和默认安装设置。
重新启动计算机以使更改生效。

第一章：介绍 ECMAScript 6

学习目标

在本章结束时，您将能够：

定义 JavaScript 中的不同作用域并表征变量声明
简化 JavaScript 对象定义
解构对象和数组，并构建类和模块
为了兼容性转译 JavaScript
组合迭代器和生成器

在本章中，您将学习如何使用 ECMAScript 的新语法和概念。

介绍

JavaScript，通常缩写为 JS，是一种旨在允许程序员构建交互式 Web 应用程序的编程语言。JavaScript 是 Web 开发的支柱之一，与 HTML 和 CSS 一起。几乎每个主要的网站，包括 Google、Facebook 和 Netflix，都大量使用 JavaScript。JS 最初是为 Netscape Web 浏览器于 1995 年创建的。JavaScript 的第一个原型是由 Brendan Eich 在短短的 10 天内编写的。自创建以来，JavaScript 已成为当今最常用的编程语言之一。

在本书中，我们将加深您对 JavaScript 核心及其高级功能的理解。我们将涵盖 ECMAScript 标准中引入的新功能，JavaScript 的异步编程特性，DOM 和 HTML 事件与 JavaScript 的交互，JavaScript 的函数式编程范式，测试 JavaScript 代码以及 JavaScript 开发环境。通过本书所获得的知识，您将准备好在专业环境中使用 JavaScript 构建强大的 Web 应用程序。

从 ECMAScript 开始

ECMAScript是由ECMA International标准化的脚本语言规范。它旨在标准化 JavaScript，以允许独立和兼容的实现。ECMAScript 6，或ES6，最初于 2015 年发布，并自那时以来经历了几次次要更新。

注意

您可以参考以下链接了解更多关于 ECMA 规范的信息：developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources。

理解作用域

在计算机科学中，作用域是计算机程序中名称与实体（如变量或函数）的绑定或关联有效的区域。JavaScript 具有以下两种不同类型的作用域：

函数作用域
块作用域

在 ES6 之前，函数作用域是 JavaScript 中唯一的作用域形式；所有变量和函数声明都遵循函数作用域规则。ES6 引入了块作用域，仅由使用新的变量声明关键字let和const声明的变量使用。这些关键字在声明变量部分中有详细讨论。

函数作用域

JavaScript 中的函数作用域是在函数内部创建的。当声明一个函数时，在该函数的主体内部创建一个新的作用域块。在新函数作用域内声明的变量无法从父作用域访问；但是，函数作用域可以访问父作用域中的变量。

要创建具有函数作用域的变量，必须使用var关键字声明变量。例如：

var example = 5;

以下代码段提供了函数作用域的示例：

var example = 5;
function test() {
  var testVariable = 10;
  console.log( example ); // Expect output: 5
  console.log( testVariable ); // Expect output: 10
}
test();
console.log( testVariable ); // Expect reference error

代码段 1.1：函数作用域

父作用域只是函数定义的代码段的作用域。这通常是全局作用域；但是，在某些情况下，在函数内部定义函数可能很有用。在这种情况下，嵌套函数的父作用域将是其定义的函数。在前面的代码段中，函数作用域是在函数 test 内创建的作用域。父作用域是全局作用域，即函数定义的地方。

注意

父作用域是定义函数的代码块。它不是调用函数的代码块。

函数作用域提升

当使用函数作用域创建变量时，其声明会自动提升到作用域的顶部。提升意味着解释器将实体的实例化移动到其声明的作用域顶部，而不管它在作用域块中的定义位置。在 JavaScript 中，使用var声明的函数和变量会被提升；也就是说，函数或变量可以在其声明之前使用。以下代码演示了这一点：

example = 5; // Assign value
console.log( example ); // Expect output: 5
var example; // Declare variable

片段 1.2：函数作用域提升

注意

由于使用var声明的提升变量可以在声明之前使用，因此我们必须小心在变量被赋值之前不要使用该变量。如果在变量被赋值之前访问变量，它将返回undefined，这可能会导致问题，特别是如果变量在全局作用域中使用。

块作用域

在 JavaScript 中，使用花括号（{}）创建一个新的块作用域。一对花括号可以放置在代码的任何位置以定义一个新的作用域块。if 语句、循环、函数和任何其他花括号对都将有自己的块作用域。这包括与关键字（if、for 等）无关的浮动花括号对。以下片段中的代码是块作用域规则的示例：

// Top level scope
function scopeExample() {
  // Scope block 1
  for ( let i = 0; i < 10; i++ ){ /* Scope block 2 */ }
  if ( true ) { /* Scope block 3 */ } else {  /* Scope block 4 */ }
  // Braces without keywords create scope blocks
  { /* Scope block 5 */ } 
  // Scope block 1
}
// Top level scope

片段 1.3：块作用域

使用关键字let和const声明的变量具有块作用域。当使用块作用域声明变量时，它不具有与在函数作用域中创建的变量相同的变量提升。块作用域变量不会被提升到作用域的顶部，因此在声明之前无法访问。这意味着使用块作用域创建的变量受到暂时性死区（TDZ）的影响。TDZ 是指进入作用域和声明变量之间的时间段。它在变量被声明而不是赋值时结束。以下示例演示了 TDZ：

// console.log( example ); // Would throw ReferenceError
let example;
console.log( example ); // Expected output: undefined
example = 5;
console.log( example ); // Expected output: 5

片段 1.4：暂时性死区

注意

如果在暂时性死区内访问变量，则会抛出运行时错误。这很重要，因为它可以使我们的代码更加健壮，减少由于变量声明而产生的语义错误。

要更好地理解作用域块，请参考以下表格：

图 1.1：函数作用域与块作用域

总之，作用域为我们提供了一种在代码块之间分离变量并限制访问的方式。变量标识符名称可以在作用域块之间重复使用。所有创建的新作用域块都可以访问父作用域，或者它们被创建或定义的作用域。JavaScript 有两种作用域。为每个定义的函数创建一个新的函数作用域。变量可以使用var关键字添加到函数作用域，并且这些变量会被提升到作用域的顶部。块作用域是 ES6 的一个新特性。为每组花括号创建一个新的块作用域。使用let和const关键字将变量添加到块作用域。添加的变量不会被提升，并且受到 TDZ 的影响。

练习 1：实现块作用域

要使用变量实现块作用域原则，请执行以下步骤：

创建一个名为fn1的函数（function fn1()）。
记录字符串为scope 1。
创建一个名为scope的变量，其值为 5。
记录名为scope的变量的值。
在函数内部使用花括号（{}）创建一个新的作用域块。
在新的作用域块内，记录名为scope 2的字符串。
在作用域块内创建一个名为scope的新变量，并赋值为different scope。
记录块作用域内变量scope的值（scope 2）。
在步骤 5 中定义的作用域块之外（scope 2），创建一个新的作用域块（使用花括号）。
记录名为scope 3的字符串。
在作用域块（作用域 3）内创建一个同名的变量（称为 scope）并将其赋值为 第三个作用域。
记录新变量的值。
调用 fn1 并观察其输出

代码

index.js：

function fn1(){
 console.log('Scope 1');
 let scope = 5;
 console.log(scope);
 {
   console.log('Scope 2');
   let scope = 'different scope';
   console.log(scope);
 }
  {
   console.log('Scope 3');
   let scope = 'a third scope';
   console.log(scope);
 }
}
fn1();

bit.ly/2RoOotW

代码片段 1.5：块实现输出

结果

图 1.2：作用域输出

您已成功在 JavaScript 中实现了块作用域。

在本节中，我们介绍了 JavaScript 作用域的两种类型，函数作用域和块作用域，以及它们之间的区别。我们演示了如何在每个函数内部创建一个新的函数作用域实例，以及如何在每组花括号内创建块作用域。我们讨论了每种作用域类型的变量声明关键字，var 用于函数作用域，let/const 用于块作用域。最后，我们介绍了函数作用域和块作用域的变量提升的基础知识。

声明变量

基本 JavaScript 使用关键字 var 进行变量声明。ECMAScript 6 引入了两个新关键字来声明变量；它们是 let 和 const。在专业 JavaScript 变量声明的世界中，var 现在是最薄弱的环节。在本主题中，我们将介绍新关键字 let 和 const，并解释它们为什么比 var 更好。

在 JavaScript 中声明变量的三种方式是使用 var、let 和 const。它们的功能略有不同。这三种变量声明关键字之间的关键区别在于它们处理变量重新分配、变量作用域和变量提升的方式。这三个特性可以简要解释如下：

变量重新赋值： 在任何时候改变或重新分配变量的值的能力。

变量作用域： 变量可以被访问的代码范围或区域。

变量提升： 变量实例化和赋值时间与变量声明的关系。有些变量可以在它们被声明之前使用。

var 关键字是在 JavaScript 中用于声明变量的较旧的关键字。所有使用 var 创建的变量都可以重新分配，具有函数作用域，并且具有变量提升。这意味着使用 var 创建的变量被提升到作用域块的顶部，在那里它们被定义并且可以在声明之前访问。以下代码片段演示了这一点，如下所示：

// Referenced before declaration
console.log( example ); // Expect output: undefined
var example = 'example';

代码片段 1.6：使用 var 创建的变量被提升

由关键字 var 创建的变量不是常量，因此可以随意创建、分配和重新分配值。以下代码演示了 var 功能的这一方面：

// Declared and assigned
var example = { prop1: 'test' };
console.log( 'example:', example );
// Expect output: example: {prop1: "test"}
// Value reassigned
example = 5;
console.log( example ); // Expect output: 5

代码片段 1.7：使用 var 创建的变量不是常量

使用 var 创建的变量可以在任何时候重新分配，并且一旦变量被创建，即可在函数中的任何地方访问，甚至是在原始声明点之前。

let 关键字与关键字 var 类似。如预期的那样，关键字 let 允许我们声明一个可以在任何时候重新分配的变量。以下代码中展示了这一点：

// Declared and initialized
let example = { prop1: 'test' };
console.log( 'example:', example );
// Expect output: example: {prop1: 'test"}
// Value reassigned
example = 5;
console.log( example ); // Expect output: 5

代码片段 1.8：使用 let 创建的变量不是常量

let 和 var 之间有两个重要的区别。let 和 var 的区别在于它们的作用域和变量提升属性。使用 let 声明的变量的作用域是块级的；也就是说，它们只在匹配的一对花括号（{}）内的代码块中定义。

使用 let 声明的变量不受变量提升的影响。这意味着在赋值之前访问使用 let 声明的变量将引发运行时错误。正如前面讨论的那样，这就是暂时性死区。以下代码示例说明了这一点：

// Referenced before declaration
console.log( example );
// Expect ReferenceError because example is not defined
let example = 'example';

代码片段 1.9：使用 let 创建的变量不会被提升

最后一个变量声明关键字是const。const关键字具有与let关键字相同的作用域和变量提升规则；使用const声明的变量具有块作用域，并且不会被提升到作用域的顶部。这在以下代码中显示：

// Referenced before declaration
console.log( example );
// Expect ReferenceError because example is not defined
const example = 'example';

片段 1.10：使用 const 创建的变量不会被提升

const和let之间的关键区别在于const表示标识符不会被重新分配。const标识符表示对值的只读引用。换句话说，不能更改const变量中写入的值。如果更改了使用const初始化的变量的值，将抛出TypeError。

即使使用const创建的变量不能被重新分配，这并不意味着它们是不可变的。如果数组或对象存储在使用const声明的变量中，则无法覆盖变量的值。但是，数组内容或对象属性可以更改。可以使用push()、pop()或map()等函数修改数组的内容，并且可以添加、删除或更新对象属性。这在以下代码中显示：

// Declared and initialized
const example = { prop1: 'test' };
// Variable reassigned
example = 5;
// Expect TypeError error because variable was declared with const
// Object property updated
example.prop1 = 5;
// Expect no error because subproperty was modified

片段 1.11：使用 const 创建的变量是常量但不是不可变的

要更详细地了解不同的关键字，请参考以下表格：

图 1.3：var、let 和 const 之间的差异

现在我们了解了var、let和const之间的细微差别，我们可以决定使用哪一个。在专业世界中，我们应该始终使用let和const，因为它们提供了var的所有功能，并允许程序员对变量的范围和用法进行具体和限制性的定义。

总之，var、let和const都有类似的功能。关键区别在于const的性质、作用域和提升。var是函数作用域的，不是常量，并且被提升到作用域块的顶部。let和const都是块作用域的，不会被提升。let不是常量，而const是常量但不可变的。

练习 2：利用变量

为了利用var、const和let变量声明关键字的变量提升和重新分配属性，执行以下步骤：

记录字符串赋值前提升：和hoisted变量的值。
使用关键字var定义一个名为hoisted的变量，并将其赋值为this got hoisted。
记录字符串赋值后提升：和hoisted变量的值。
创建一个 try-catch 块。
在try块内，记录名为notHoisted1的变量的值。
在catch块内，给 catch 块err参数，然后记录字符串带错误的未提升 1：和err.message的值。
在 try-catch 块之后，使用关键字let创建notHoisted1变量，并赋值为5。
记录字符串赋值后 notHoisted1和notHoisted1的值。
创建另一个 try-catch 块。
在try块内，记录notHoisted2变量的值。
在 catch 块内，给 catch 块err参数，然后记录字符串带错误的未提升 2：和err.message的值。
在第二个 try-catch 块之后，使用关键字const创建notHoisted2变量，并赋值[1,2,3]。
记录字符串赋值后 notHoisted2和notHoisted2的值。
定义一个最终的 try catch 块。
在try块内，将notHoisted2重新分配为new value字符串。
在 catch 块内，给 catch 块err参数，然后记录字符串未提升 2 无法更改。
在 try-catch 块之后，将值5推送到notHoisted2中的数组中。
记录字符串notHoisted2 已更新。现在是：和notHoisted2的值。

代码

index.js:

var hoisted = 'this got hoisted';
try{
 console.log(notHoisted1);
} catch(err){}
let notHoisted1 = 5;
try{
 console.log(notHoisted2);
} catch(err){}
const notHoisted2 = [1,2,3];
try{
 notHoisted2 = 'new value';
} catch(err){}
notHoisted2.push(5);

片段 1.12：更新对象的内容

bit.ly/2RDEynv

结果

图 1.4：提升变量

您已成功地利用关键字声明变量。

在本节中，我们讨论了 ES6 中的变量声明以及使用let和const变量声明关键字相对于var变量声明关键字的好处。我们讨论了每个关键字的变量重新赋值属性，变量作用域和变量提升属性。关键字let和const都在块作用域中创建变量，而var在函数作用域中创建变量。使用var和let创建的变量可以随意重新赋值。然而，使用const创建的变量不能被重新赋值。最后，使用关键字var创建的变量被提升到它们被定义的作用域块的顶部。使用let和const创建的变量不会被提升。

引入箭头函数

箭头函数，或Fat 箭头函数，是在 ECMAScript 6 中创建函数的新方法。箭头函数简化了函数语法。它们被称为fat 箭头函数，因为它们用字符=>表示，这样放在一起看起来像一个粗箭头。JavaScript 中的箭头函数经常在回调链，承诺链，数组方法中使用，在任何需要未注册函数的情况下都会很有用。

JavaScript 中箭头函数和普通函数之间的关键区别在于箭头函数是匿名的。箭头函数没有名称，也没有绑定到标识符。这意味着箭头函数是动态创建的，不像普通函数那样有名称。然而，箭头函数可以分配给一个变量以便重用。

创建箭头函数时，我们只需要删除函数关键字，并在函数参数和函数体之间放置一个箭头。箭头函数用以下语法表示：

( arg1, arg2, ..., argn ) => { /* Do function stuff here */ }

片段 1.13：箭头函数语法

从前面的语法中可以看出，箭头函数是 JavaScript 中更简洁的编写函数的方式。它们可以使我们的代码更简洁，更易读。

箭头函数语法也可能有所不同，取决于几个因素。语法可能会略有不同，具体取决于传递给函数的参数数量以及函数体中的代码行数。特殊的语法条件在以下列表中简要概述：

单个输入参数
无输入参数
单行函数体
单个表达式跨多行
对象字面量返回值

练习 3：转换箭头函数

为了演示通过将标准函数转换为箭头函数来简化语法，执行以下步骤：

创建一个接受参数并返回两个参数之和的函数。将函数保存到名为fn1的变量中。
将刚刚创建的函数转换为箭头函数，并保存到另一个名为fn2的变量中。

要转换函数，删除function关键字。接下来，在函数参数和函数体之间放置一个箭头。

调用两个函数并比较输出。

代码

index.js:

const fn1 = function( a, b ) { return a + b; };
const fn2 = ( a, b ) => { return a + b; };
console.log( fn1( 3 ,5 ), fn2( 3, 5 ) );

片段 1.14：调用函数

bit.ly/2M6uKwN

结果

图 1.5：比较函数的输出

您已成功将普通函数转换为箭头函数。

箭头函数语法

如果有多个参数传递给函数，那么我们使用括号来创建函数，括号包围参数就像平常一样。如果我们只有一个参数要传递给函数，我们就不需要在参数周围加括号。

这个规则有一个例外，那就是参数不是简单的标识符。如果我们在函数参数中包含默认值或执行操作，那么我们必须包含括号。例如，如果我们包含默认参数，那么我们将需要在参数周围加上括号。这两条规则如下面的代码所示：

// Single argument arrow function
arg1 => { /* Do function stuff here */ }
// Non simple identifier function argument
( arg1 = 10 ) => { /* Do function stuff here */ }

片段 1.15：单参数箭头函数

如果我们创建一个没有参数的箭头函数，那么我们需要包括括号，但括号将是空的。如下面的代码所示：

// No arguments passed into the function
( ) => { /* Do function stuff here */ }

片段 1.16：无参数

箭头函数的语法也可以有所不同，取决于函数的主体。如预期的那样，如果函数的主体是多行的，那么我们必须用花括号括起来。但是，如果函数的主体是单行的，那么我们不需要在函数的主体周围包含花括号。这如下面的代码所示：

// Multiple line body arrow function
( arg1, arg2 ) => { 
  console.log( `This is arg1: ${arg1}` );
  console.log( `This is arg2: ${arg2}` );
  /* Many more lines of code can go here */
}
// Single line body arrow function
( arg1, arg2 ) => console.log( `This is arg1: ${arg1}` )

片段 1.17：单行体

在使用箭头函数时，如果函数是单行的，我们也可以省略 return 关键字。箭头函数会自动返回该行表达式的解析值。这种语法如下面的代码所示：

// With return keyword - not necessary
( num1, num2 ) => { return ( num1 + num2 ) }
// If called with arguments num1 = 5 and num2 = 5, expected output is 10
// Without return keyword or braces
( num1, num2 ) => num1 + num2
// If called with arguments num1 = 5 and num2 = 5, expected output is 10

片段 1.18：返回值为单行体

由于单行表达式体的箭头函数可以在没有花括号的情况下定义，我们需要特殊的语法来允许我们将单个表达式分成多行。为此，我们可以将多行表达式放在括号中。JavaScript 解释器会看到括号中的行，并将其视为单行代码。这如下面的代码所示：

// Arrow function with a single line body
// Assume numArray is an array of numbers
( numArray ) => numArray.filter( n => n > 5).map( n => n - 1 ).every( n => n < 10 )
// Arrow function with a single line body broken into multiple lines
// Assume numArray is an array of numbers
( numArray ) => (
  numArray.filter( n => n > 5)
          .map( n => n - 1 )
          .every( n => n < 10 )
)

片段 1.19：将单行表达式分成多行

如果我们有一个返回对象字面量的单行箭头函数，我们将需要特殊的语法。在 ES6 中，作用域块、函数主体和对象字面量都是用花括号定义的。由于单行箭头函数不需要花括号，我们必须使用特殊的语法来防止对象字面量的花括号被解释为函数主体花括号或作用域块花括号。为此，我们用括号括起返回的对象字面量。这指示 JavaScript 引擎将括号内的花括号解释为表达式，而不是函数主体或作用域块声明。这如下面的代码所示：

// Arrow function with an object literal in the body
( num1, num2 ) => ( { prop1: num1, prop2: num2 } ) // Returns an object

片段 1.20：对象字面量返回值

在使用箭头函数时，我们必须注意这些函数被调用的作用域。箭头函数遵循 JavaScript 中的正常作用域规则，但this作用域除外。回想一下，在基本的 JavaScript 中，每个函数都被分配一个作用域，即this作用域。箭头函数没有被分配一个this作用域。它们继承其父级的this作用域，并且不能将新的this作用域绑定到它们。这意味着，如预期的那样，箭头函数可以访问父函数的作用域，随后访问该作用域中的变量，但this的作用域不能在箭头函数中改变。使用.apply()、.call()或.bind()函数修改器都不会改变箭头函数的this属性的作用域。如果你处于必须将this绑定到另一个作用域的情况，那么你必须使用普通的 JavaScript 函数。

总之，箭头函数为我们提供了简化匿名函数语法的方法。要编写箭头函数，只需省略 function 关键字，并在参数和函数体之间添加一个箭头。

然后可以应用特殊语法来简化箭头函数。如果函数有一个输入参数，那么我们可以省略括号。如果函数主体是单行的，我们可以省略return关键字和花括号。然而，返回对象字面量的单行函数必须用括号括起来。

我们还可以在函数体周围使用括号，以便将单行函数体分成多行以提高可读性。