ES6中class的基础用法是什么

ES6（ECMAScript 2015）引入了class关键字，使得JavaScript的面向对象编程更加直观和易于理解。class提供了一种更简洁的语法来定义构造函数和原型方法。本文将介绍ES6中class的基础用法。

1. 基本语法

在ES6中，可以使用class关键字来定义一个类。类的基本语法如下：

class MyClass {
  // 构造函数
  constructor(name) {
    this.name = name;
  }

  // 方法
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

// 创建类的实例
const instance = new MyClass('Alice');
instance.sayHello(); // 输出: Hello, Alice!

1.1 构造函数

constructor方法是类的构造函数，用于初始化对象。当使用new关键字创建类的实例时，constructor方法会被自动调用。

1.2 方法

在类中定义的方法会自动添加到类的原型上，所有实例共享这些方法。例如，sayHello方法可以通过实例调用。

2. 类的继承

ES6中的class支持继承，可以使用extends关键字来实现类的继承。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出: Rex barks.

2.1 super关键字

在子类的构造函数中，必须调用super()来调用父类的构造函数。super也可以用于调用父类的方法。

3. 静态方法

静态方法是类的方法，而不是实例的方法。静态方法通过static关键字定义，并且只能通过类本身调用，而不能通过实例调用。

class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3)); // 输出: 5

4. Getter 和 Setter

ES6中的class支持使用get和set关键字来定义属性的getter和setter方法。

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const person = new Person('John', 'Doe');
console.log(person.fullName); // 输出: John Doe

person.fullName = 'Jane Smith';
console.log(person.firstName); // 输出: Jane
console.log(person.lastName); // 输出: Smith

5. 私有字段（ES2022）

从ES2022开始，JavaScript引入了私有字段的概念，使用#符号来定义私有字段。

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  get count() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
console.log(counter.count); // 输出: 1

私有字段只能在类的内部访问，外部无法直接访问或修改。

6. 总结

ES6中的class提供了一种更简洁、更直观的方式来定义类和实现面向对象编程。通过class关键字，可以轻松定义构造函数、方法、静态方法、getter/setter以及实现继承。随着ES2022的引入，私有字段进一步增强了类的封装性。

掌握class的基础用法是理解现代JavaScript面向对象编程的关键，也是编写可维护、可扩展代码的重要基础。