现代 JavaScript 参考(8)

JavaScript 是一个基于原型 的语言(然而Java 是基于类别 的语言)。 ES6 引入了 JavaScript 类，它们是用于基于原型的继承的语法糖，而 不是 一种新的基于类继承的模型().

如果您熟悉其他语言的类，那么 类 (class) 这个词的确容易理解出错。 如果真的有此困扰，请避免在这样的认知下思考 JavaScript 类的行为，并将其视为完全不同的新概念。

由于本文档不是从根本上教你 JavaScript 语言，我会相信你知道什么是原型，以及它们的行为。 如果没有，请参阅示例代码下面列出的扩展阅读，以方便你去理解这些概念：

简单的示例

ES6 之前，原型語法:

var Person = function(name, age) { this.name = name; this.age = age; } Person.prototype.stringSentence = function() { return "Hello, my name is " + this.name + " and I'm " + this.age; }

使用 ES6 类(class)* 语法:

class Person { constructor(name, age) { this.name = name; this.age = age; } stringSentence() { return "Hello, my name is " + this.name + " and I'm " + this.age; } } const myPerson = new Person("Manu", 23); console.log(myPerson.age) // 23 console.log(myPerson.stringSentence()) // "Hello, my name is Manu and I'm 23 扩展阅读

更好的理解原型：

更好的理解类：

Extends 和 super 关键字

extends 关键字用于类声明或类表达式中，以创建一个类，该类是另一个类的子类()。 子类继承超类的所有属性，另外可以添加新属性或修改继承的属性。

super 关键字用于调用对象的父对象的函数，包括其构造函数。

super 关键字必须在构造函数中使用 this 关键字之前使用。

调用 super() 调用父类构造函数。 如果要将类的构造函数中的一些参数传递给其父构造函数，则可以使用 super(arguments) 来调用它。

如果父类有一个 X 的方法（甚至静态），可以使用 super.X() 在子类中调用。

简单的代码示例 class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width; } getHelloPhrase() { return `Hi, I am a ${this.name}`; } } class Square extends Polygon { constructor(length) { // 这里，它调用父类的构造函数的 length, // 提供给 Polygon 的 width 和 height。 super(length, length); // 注意: 在派生的类中, 在你可以使用 'this' 之前, 必须先调用 super() 。 // 忽略这个, 这将导致引用错误。 this.name = 'Square'; this.length = length; } getCustomHelloPhrase() { const polygonPhrase = super.getHelloPhrase(); // 通过 super.X() 语法访问父级方法 return `${polygonPhrase} with a length of ${this.length}`; } get area() { return this.height * this.width; } } const mySquare = new Square(10); console.log(mySquare.area) // 100 console.log(mySquare.getHelloPhrase()) // 'Hi, I am a Square' -- Square 继承自 Polygon 并可以访问其方法 console.log(mySquare.getCustomHelloPhrase()) // 'Hi, I am a Square with a length of 10'

注意 : 如果我们在 Square 类中调用 super() 之前尝试使用 this，将引发一个引用错误：

class Square extends Polygon { constructor(length) { this.height; // 引用错误, 必须首先调用 super() ! // 这里，它调用父类的构造函数的 length, // 提供给 Polygon 的 width 和 height。 super(length, length); // 注意: 在派生的类中, 在你可以使用 'this' 之前, 必须先调用 super() 。 // 忽略这个, 这将导致引用错误。 this.name = 'Square'; } } 扩展阅读

异步和等待(Async Await)

除 之外，还有一种新的语法可能会遇到，那就是异步的 async / await。

async / await 函数的目的是简化同步使用 promise 的行为，并对一组 promises 执行一些处理。正如 promises 类似于结构化的回调，async / await 类似于组合生成器(combining generators) 和 promises。异步函数 总是 返回一个 Promise。 ()

注意： 您必须了解什么是 promises 以及它们是如何工作的，然后再尝试了解 async / await ，因为它们依赖于 promises 。
注意2： [await 必须在async函数中使用](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial- c7ec10518dd9#f3f0)，这意味着你不能程式码的顶部使用 await，因为它并不在异步函数之内。

简单的代码示例 async function getGithubUser(username) { // async 关键字允许在函数中使用 await ，意味着函数返回一个 promise const response = await fetch(`https://api.github.com/users/${username}`); // 执行在这里暂停，直到fetch返回的 Promise 被 resolved return response.json(); } getGithubUser('mbeaudru') .then(user => console.log(user)) // 记录用户响应 - 不能使用 await 语法，因为此代码不在 async 函数中 .catch(err => console.log(err)); // 如果在我们的异步函数中抛出一个错误，我们将在这里捕获它 用示例代码说明

Async / Await 是建立在 promises 概念之上的，但它们允许更强制的代码风格。