【ES6 教程】第四章 ES6类03—学习另一种使用类表达式定义新类的方法
共 2048字,需浏览 5分钟
·
2022-04-18 19:18
在今天的教程中,我们将一起来学习如何使用 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 为我们提供了另一种使用类表达式定义新类的方法。
类表达式可以命名或未命名。
类表达式可用于创建单例对象。
学习更多技能
请点击下方公众号