JS ES6之async函数和Class | 青训营笔记

LuciaZzzz
639 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第13天

async函数

在ES2017中引入了async函数，它能够使异步操作变为更加简便，其实本质是generator函数的语法糖。 async函数就是把generator里的 * 星号 替换成async，将 yield 替换成await。

async的优点

  1. 内置执行器，Generator函数的执行必须要执行器，因此需要co模块，而async函数和普通函数一样，只需要一行就可以执行。
  2. 更好的语义
  3. 更广的适用性
  4. 返回值是Promise对象。可以直接用then方法指定下一步的操作。 以下是例子：
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

使用注意点

  1. await后面的Promise对象运行结果可能是rejected，因此最好把await放在try catch中。
  2. 多个await命令后面的异步操作，如果不存在继发关系，最好让他们同时触发。
  3. await命令只能用在async函数中，否则会报错。
  4. async函数可以保留运行堆栈。

Class

ES6为了和传统语言的写法更加接近，引入了Class的概念，可以通过class来定义类。 他可以看作是一个语法糖，class的写法只是让对象原型的写法看起来更加清晰，看起来更加面向对象的语法。 例如：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

类里面有一个constructor的构造方法，this代表实例对象。 在使用的时候也是直接对类使用new命令，和构造函数一致。

注意点

  1. 类和模块的内部默认就是严格模式，因此不需要使用use strict来指定严格模式。
  2. 不逊在变量提升。
  3. 如果某个方法前加了一个 * 星号，就表明该方法是一个generator函数。
  4. 如果内部有 this， 则默认指向类的实例。

Class的继承

class可以通过关键字 extends继承：

class Point {
}

class ColorPoint extends Point {
}

ES6规定，必须在constructor方法中调用super（），super表示父类的构造函数，用来新建一个父类的实例对象。

原生构造函数的继承

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。

  • Boolean()
  • Number()
  • String()
  • Array()
  • Date()
  • Function()
  • RegExp()
  • Error()
  • Object()

ES6允许继承原生构造函数定义子类。extends不仅可以用来继承类，还可以继承原生的构造函数。

avatar
文章
阅读
粉丝