【ES6 教程】第四章 ES6类03—学习另一种使用类表达式定义新类的方法

共 2048字,需浏览 5分钟

 ·

2022-04-18 19:18

英文 | 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 为我们提供了另一种使用类表达式定义新类的方法。

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

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



学习更多技能

请点击下方公众号

浏览 44
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报