英文 | https://www.javascripttutorial.net

翻译 | 杨小爱

在今天的教程中，我们将一起来学习如何使用 JavaScript 类表达式来声明新类。

JavaScript 类表达式简介

与函数类似，类也有表达式形式。类表达式为我们提供了另一种定义新类的方法。

类表达式不需要类关键字后的标识符。我们可以在变量声明中使用类表达式并将其作为参数传递给函数。

例如，下面定义了一个类表达式：

let Person = class {    constructor(name) {        this.name = name;    }    getName() {        return this.name;    }}

这个程序是怎么运作的。

表达式的左侧是 Person 变量。它被分配给一个类表达式。

类表达式以关键字 class 开头，后跟类定义。

类表达式可能有名称，也可能没有。在这个例子中，我们有一个未命名的类表达式。

如果一个类表达式有一个名字，它的名字可以是类体的本地名字。

下面创建一个 Person 类表达式的实例。它的语法与类声明相同。

let person = new Person('John Doe');

和类声明一样，类表达式的类型也是一个函数：

console.log(typeof Person); // function

与函数表达式类似，类表达式不会被提升。这意味着我们不能在定义类表达式之前创建类的实例。

一等公民

JavaScript 类是一等公民。这意味着我们可以将一个类传递给一个函数，从一个函数中返回它，并将它分配给一个变量。

请参见以下示例：

function factory(aClass) {    return new aClass();}
let greeting = factory(class {    sayHi() { console.log('Hi'); }});
greeting.sayHi(); // 'Hi'

这个程序是怎么运行的。

首先，定义一个以类表达式为参数并返回类实例的 factory() 函数：

function factory(aClass) {    return new aClass();}

其次，将一个未命名的类表达式传递给 factory() 函数并将其结果分配给 greeting 变量：

let greeting = factory(class {    sayHi() { console.log('Hi'); }});

类表达式有一个名为 sayHi() 的方法。问候变量是类表达式的一个实例。

第三，在 greeting 对象上调用 sayHi() 方法：

greeting.sayHi(); // 'Hi

Singleton

单例是一种将类的实例化限制为单个实例的设计模式。它确保在整个系统中只能创建一个类的一个实例。

类表达式可用于通过立即调用类构造函数来创建单例。

为此，我们将 new 运算符与类表达式一起使用，并在类声明的末尾包含括号，如以下示例所示：

let app = new class {    constructor(name) {        this.name = name;    }    start() {        console.log(`Starting the ${this.name}...`);    }}('Awesome App');
app.start(); // Starting the Awesome App...

这个是程序怎么运行的。

以下是一个未命名的类表达式：

new class {    constructor(name) {        this.name = name;    }    start() {        console.log(`Starting the ${this.name}...`);    }}

该类有一个接受参数的构造函数（）。它也有一个名为 start() 的方法。

类表达式计算为一个类。因此，我们可以通过在表达式后放置括号来立即调用其构造函数：

new class {    constructor(name) {        this.name = name;    }    start() {        console.log(`Starting the ${this.name}...`);    }}('Awesome App')

此表达式返回分配给 app 变量的类表达式的实例。

下面调用 app 对象的 start() 方法：

app.start(); // Starting the Awesome App...

总结

ES6 为我们提供了另一种使用类表达式定义新类的方法。

类表达式可以命名或未命名。

类表达式可用于创建单例对象。

学习更多技能

请点击下方公众号