ES6中class的基礎用法是什么

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面向對象編程的關鍵，也是編寫可維護、可擴展代碼的重要基礎。