【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也有很多属性。

装饰器的执行步骤如下:
计算各个装饰器的值,按照从左到右,从上到下的顺序。
调用方法装饰器。
调用类装饰器。
装饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。

你可能感兴趣的:(ECMAScript6,es6,javascript,前端)