JavaScript 类表达式 - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript 类表达式来声明新类。

JavaScript 类表达式的介绍

类似于函数，类也有表达式形式。类表达式为您提供了一种定义新类的替代方法。

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

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

let Person = class {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}Code language: JavaScript (javascript)

它是如何工作的。

在表达式的左侧是 Person 变量。它被赋值给一个类表达式。

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

类表达式可以有名称，也可以没有名称。在本例中，我们有一个无名类表达式。

如果类表达式有名称，则其名称可以是类主体中的局部变量。

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

let person = new Person('John Doe');Code language: JavaScript (javascript)

与类声明一样，类表达式的类型也是函数

console.log(typeof Person); // functionCode language: JavaScript (javascript)

类似于函数表达式，类表达式不是提升的。这意味着您不能在定义类表达式之前创建类的实例。

一等公民

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

请看下面的例子

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

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

greeting.sayHi(); // 'Hi'Code language: JavaScript (javascript)

它是如何工作的。

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

function factory(aClass) {
    return new aClass();
}Code language: JavaScript (javascript)

其次，将一个无名类表达式传递给 factory() 函数，并将它的结果赋值给 greeting 变量

let greeting = factory(class {
    sayHi() { console.log('Hi'); }
});Code language: JavaScript (javascript)

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

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

greeting.sayHi(); // 'Hi'Code language: JavaScript (javascript)

单例

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

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

为此，您使用 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...Code language: JavaScript (javascript)

它是如何工作的。

以下是一个无名类表达式

new class {
    constructor(name) {
        this.name = name;
    }
    start() {
        console.log(`Starting the ${this.name}...`);
    }
}Code language: JavaScript (javascript)

该类有一个 constructor()，它接受一个参数。它还有一个名为 start() 的方法。

类表达式求值为一个类。因此，您可以通过在表达式后放置括号来立即调用它的构造函数

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

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

以下在 app 对象上调用 start() 方法

app.start(); // Starting the Awesome App...Code language: JavaScript (javascript)

总结

ES6 为您提供了一种使用类表达式定义新类的替代方法。
类表达式可以是有名的，也可以是无名的。
类表达式可用于创建单例对象。

本教程对您有帮助吗？