ECMAScript 2021 中的 Class 元素使用教程及其代表的编程范式
ECMAScript（简称 ES）是一种脚本语言，主要用于网络上的浏览器应用程序（例如网页）的编写。它是 JavaScript 语言的规范实现。ES 2021 版本中加入了 Class 元素，这篇文章将介绍 Class 元素的使用方法及其代表的编程范式。
一、Class 元素介绍
Class 是一种对象的模板，对一类对象的定义，由方法和属性组成。通过 Class 元素, 可以方便地定义一个类并且使用它的实例。Class 可以看作是构造函数（Constructor Function）的语法糖，其代码结构更为清晰，易于理解。
同时，Class 元素可以继承，也可以用于模块（Modules）。其语法如下：
// javascriptcn.com 代码示例
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`Hello, I am ${this.name}, ${this.age} years old.`);
}
}上面的示例代码定义了一个名为 Student 的 Class 类型，用于保存学生的信息。其中，constructor 方法会在实例化对象时执行，用于初始化对象的属性。introduce 方法用于介绍学生的姓名和年龄。
二、Class 元素和编程范式
在介绍 Class 元素的编程范式之前，我们需要先了解几个基础概念。
- 面向对象编程（Object-Oriented Programming，简称 OOP）
OOP 是一种编程思想，它试图通过创建对象来解决问题。OOP 中的对象具有状态（State）和行为（Behavior）。状态指对象的属性，行为指对象的方法。OOP 还有其他概念，如继承、封装、多态等。
- 面向对象的编写大型程序（Object-Oriented Design，简称 OOD）
OOD 是一种将复杂的程序分解成小而简单的部分的方法。每个部分都是一个对象，通过这些对象与其他对象组合来完成程序的任务。
- 面向过程编程（Procedure-Oriented Programming，简称 POP）
POP 是一种编程思想，它通过将程序分解成函数/过程来解决问题。每个函数/过程都有自己的状态，独立于其他函数。
在 JavaScript 中，Class 元素可以代表 OOP 中的对象。使用 Class 元素时，我们可以将对象的状态和行为组合在一起，使代码更为清晰易懂。同时，Class 元素也可以代表 OOD 中的对象，将大型的程序拆分成不同的对象，方便维护和扩展。
下面我们来看几个具体的例子。
- 将对象的状态和行为组合在一起
假设我们要创建一个简单的计算器，可以进行加减乘除的操作。我们可以使用 Class 元素将计算器的状态和行为组合在一起，定义如下：
// javascriptcn.com 代码示例
class Calculator {
constructor() {
this.result = 0;
}
add(number) {
this.result += number;
}
subtract(number) {
this.result -= number;
}
multiply(number) {
this.result *= number;
}
divide(number) {
if (number === 0) {
throw new Error('Cannot divide by zero');
}
this.result /= number;
}
getResult() {
return this.result;
}
}上述代码定义了一个名为 Calculator 的 Class 类型，并在构造函数中初始化了 result 属性。接下来我们定义了四个方法分别为 add, subtract, multiply, divide 方法，用于进行加减乘除操作。最后，我们定义了一个 getResult 方法，用于获取当前计算器的结果。
使用时，我们可以先创建一个计算器实例：
const calculator = new Calculator();
接下来我们可以使用 add, subtract, multiply, divide 方法进行加减乘除操作：
calculator.add(10); // 将结果加 10 calculator.subtract(5); // 将结果减 5 calculator.multiply(2); // 将结果乘 2 calculator.divide(4); // 将结果除以 4
最终，在调用 getResult 方法时，我们可以获得计算器的结果：
console.log(calculator.getResult()); // 输出 2.5
- 将大型程序拆分成多个对象
假设我们要开发一个电商平台，有用户（User），商品（Product）和购物车（Cart）三个对象。我们可以将每个对象都定义为一个 Class 类型，然后通过调用方法和使用属性来完成业务逻辑。
我们可以先定义 User 类型：
class User {
constructor(name, email, password) {
this.name = name;
this.email = email;
this.password = password;
}
}接下来我们定义 Product 类型：
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}最后我们定义 Cart 类型：
// javascriptcn.com 代码示例
class Cart {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
}
removeItem(item) {
const index = this.items.indexOf(item);
if (index >= 0) {
this.items.splice(index, 1);
}
}
getTotal() {
const total = this.items.reduce((acc, item) => {
return acc + item.price;
}, 0);
return total;
}
}在使用时，我们可以创建一个用户实例、商品实例和购物车实例：
const user = new User('Tom', 'tom@example.com', '123456');
const product1 = new Product('iPhone 12', 6999);
const product2 = new Product('iPad Pro', 7999);
const cart = new Cart();接下来我们可以将商品加入购物车：
cart.addItem(product1); cart.addItem(product2);
最后，我们可以调用 getTotal 方法来计算购物车中的商品总价：
console.log(cart.getTotal()); // 输出 14998
总结
Class 元素是 ECMAScript 2021 中新增的元素，在使用时需要先了解 OOP 和 OOD 的概念。通过使用 Class 元素，我们可以将对象的状态和行为组合在一起，使代码更为清晰明了。同时，Class 元素也可以代表 OOD 中的对象，将大型的程序拆分成不同的对象，方便维护和扩展。在实际使用时，我们可以创建不同的 Class 实例，然后使用其方法和属性来完成业务逻辑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651cd6e995b1f8cacd457483