【ECMAScript6_6】async 函数、Class、Module、异步遍历器、ArrayBuffer、Decorator装饰器-Toy模板网

这篇具有很好参考价值的文章主要介绍了【ECMAScript6_6】async 函数、Class、Module、异步遍历器、ArrayBuffer、Decorator装饰器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、async 函数
async 函数是什么？一句话，它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。
async函数自带执行器，只要调用了asyncReadFile函数，它就会自动执行，输出最后结果。不像 Generator 函数，需要调用next方法，或者用co模块。

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。
错误处理：如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

2、Class
类的所有方法都定义在类的prototype属性上面。

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

在类的实例上面调用方法，其实就是调用原型上的方法。

>b.constructor === B.prototype.constructor // true

ES2022正式为class添加了私有属性，方法是在属性名之前使用#表示。
ES2022 引入了静态块（static block），主要作用是对静态属性进行初始化。只运行一次。以后，新建类的实例时，这个块就不运行了。
类不存在变量提升。
ES6 为new命令引入了一个new.target属性，该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。
继承：Object.getPrototypeOf()方法可以用来从子类上获取父类。

Object.getPrototypeOf(ColorPoint) === Point  // true

可以使用这个方法判断，一个类是否继承了另一个类。
子类的__proto__属性，表示构造函数的继承，总是指向父类。
子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

extends还可以继承原生构造函数。原生构造函数包括：Boolean()、Number()、String()、Array()、Date()、Function()、RegExp()、Error()、Object()
Mixin 模式的实现 ：Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。使用的时候，只要继承mix类即可。

3、Module
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

4、异步遍历器
新引入的for await…of循环，则是用于遍历异步的 Iterator 接口。

async function f() {
  for await (const x of createAsyncIterable(['a', 'b'])) {
    console.log(x);
  }
}

上面代码中，createAsyncIterable()返回一个拥有异步遍历器接口的对象，for…of循环自动调用这个对象的异步遍历器的next方法，会得到一个 Promise 对象。
await用来处理这个 Promise 对象，一旦resolve，就把得到的值（x）传入for…of的循环体。
异步 Generator 函数的作用，是返回一个异步遍历器对象。在语法上，异步 Generator 函数就是async函数与 Generator 函数的结合。
异步遍历器的设计目的之一，就是 Generator 函数处理同步操作和异步操作时，能够使用同一套接口。
yield*语句也可以跟一个异步遍历器。

5、ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。它们都提供一些方法。
二进制数组并不是真正的数组，而是类似数组的对象。

6、Decorator装饰器
装饰器是一种函数，写成@ + 函数名，可以用来装饰四种类型的值：类、类的属性、类的方法、属性存取器（accessor）
装饰器函数有两个参数。运行时，JavaScript 引擎会提供这两个参数。
value：所要装饰的值，某些情况下可能是undefined（装饰属性时）。
context：上下文信息对象。context也有很多属性。