ES9 是 ECMAScript 的一个版本，它于 2018 年发布。在 ES9 中，我们可以看到一些新的特性，其中包括了对 class 的一些改进。在本文中，我们将深入探讨 ES9 中的 class 以及 ES6 中的 class 的继承和方法的应用。
ES9 中的 class
在 ES9 中，我们可以使用私有属性和方法。私有属性和方法是指只能在 class 内部访问的属性和方法。在 ES9 中，我们可以通过在属性或方法名称前加上 # 来定义私有属性和方法。以下是一个简单的例子：
// javascriptcn.com 代码示例
class Person {
#name;
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}
const person = new Person("John");
console.log(person.getName()); // "John"
console.log(person.#name); // 报错，#name 是私有属性在上面的例子中，我们定义了一个 Person 类，它有一个私有属性 #name 和一个公有方法 getName。在构造函数中，我们将传入的参数赋值给了私有属性 #name。在使用 getName 方法时，我们可以访问私有属性 #name 的值。但是，如果我们尝试直接访问私有属性 #name，则会报错。
ES6 中的 class 的继承
在 ES6 中，我们可以使用 extends 关键字来实现继承。以下是一个简单的例子：
// javascriptcn.com 代码示例
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Rufus");
dog.speak(); // "Rufus barks."在上面的例子中，我们定义了一个 Animal 类和一个 Dog 类。Dog 类继承自 Animal 类。在 Dog 类的构造函数中，我们调用了父类的构造函数，并传入了相应的参数。在 Dog 类中，我们重写了父类的 speak 方法，使其输出狗叫声。
方法的应用
在 ES6 中，我们可以使用 static 关键字来定义静态方法。静态方法是指只能通过类名来调用的方法，而不能通过实例来调用。以下是一个简单的例子：
// javascriptcn.com 代码示例
class Calculator {
static add(a, b) {
return a + b;
}
static subtract(a, b) {
return a - b;
}
}
console.log(Calculator.add(2, 3)); // 5
console.log(Calculator.subtract(5, 2)); // 3在上面的例子中，我们定义了一个 Calculator 类，它有两个静态方法 add 和 subtract。在调用这两个方法时，我们直接使用类名来调用，而不是通过实例来调用。
此外，在 ES6 中，我们还可以使用箭头函数来定义类中的方法。以下是一个简单的例子：
// javascriptcn.com 代码示例
class Person {
constructor(name) {
this.name = name;
}
sayHello = () => {
console.log(`Hello, my name is ${this.name}.`);
}
}
const person = new Person("John");
person.sayHello(); // "Hello, my name is John."在上面的例子中，我们定义了一个 Person 类，它有一个属性 name 和一个箭头函数 sayHello。在 sayHello 方法中，我们使用了箭头函数，这样 this 关键字就指向了类的实例。在使用 sayHello 方法时，我们可以直接通过实例来调用。
总结
在本文中，我们深入探讨了 ES9 中的 class 和 ES6 中的 class 的继承和方法的应用。我们学习了如何定义私有属性和方法、如何实现类的继承、如何定义静态方法以及如何使用箭头函数来定义类中的方法。这些知识点对于前端开发人员来说非常重要，希望本文能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c2ffcd2f5e1655d495451