JavaScript?ES6中class定義類的方法有哪些

JavaScript ES6中class定義類的方法有哪些

JavaScript ES6引入了class關鍵字，使得面向對象編程更加直觀和易于理解。通過class，開發者可以更方便地定義類和創建對象。本文將詳細介紹在ES6中如何使用class定義類，并探討類中定義方法的多種方式。

1. 基本語法

在ES6中，使用class關鍵字可以定義一個類。類的基本語法如下：

class MyClass {
  // 構造函數
  constructor() {
    // 初始化屬性
  }

  // 方法
  myMethod() {
    // 方法體
  }
}

1.1 構造函數

constructor方法是類的構造函數，用于初始化對象的屬性。當使用new關鍵字創建類的實例時，constructor方法會自動調用。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('Alice', 30);
console.log(person.name); // 輸出: Alice
console.log(person.age);  // 輸出: 30

1.2 實例方法

實例方法是定義在類中的方法，可以通過類的實例來調用。實例方法可以訪問類的實例屬性。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 輸出: Hello, my name is Alice and I am 30 years old.

2. 靜態方法

靜態方法是定義在類本身上的方法，而不是類的實例上。靜態方法通常用于執行與類相關的操作，而不是與類的實例相關的操作。靜態方法使用static關鍵字定義。

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

  static subtract(a, b) {
    return a - b;
  }
}

console.log(MathUtils.add(5, 3));      // 輸出: 8
console.log(MathUtils.subtract(5, 3)); // 輸出: 2

靜態方法不能通過類的實例調用，只能通過類本身調用。

const math = new MathUtils();
// math.add(5, 3); // 報錯: math.add is not a function

3. Getter 和 Setter 方法

Getter和Setter方法用于定義類的屬性的讀取和寫入操作。Getter方法用于獲取屬性的值，Setter方法用于設置屬性的值。Getter和Setter方法使用get和set關鍵字定義。

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }

  get age() {
    return this._age;
  }

  set age(newAge) {
    if (newAge > 0) {
      this._age = newAge;
    } else {
      console.log('Age must be a positive number.');
    }
  }
}

const person = new Person('Alice', 30);
console.log(person.name); // 輸出: Alice
person.name = 'Bob';
console.log(person.name); // 輸出: Bob

console.log(person.age); // 輸出: 30
person.age = -5; // 輸出: Age must be a positive number.
console.log(person.age); // 輸出: 30

4. 私有方法和屬性

在ES6中，并沒有直接支持私有方法和屬性的語法。然而，可以通過一些約定或使用Symbol和WeakMap來實現類似的效果。

4.1 使用命名約定

一種常見的做法是使用下劃線_作為前綴來表示私有屬性和方法。

class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  _privateMethod() {
    console.log('This is a private method.');
  }

  greet() {
    this._privateMethod();
    console.log(`Hello, my name is ${this._name}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 輸出: This is a private method. Hello, my name is Alice.
// person._privateMethod(); // 仍然可以訪問，但約定上不推薦

4.2 使用Symbol

Symbol是ES6引入的一種新的原始數據類型，可以用作對象的唯一鍵。通過將屬性鍵設置為Symbol，可以實現私有屬性。

const _name = Symbol('name');
const _age = Symbol('age');

class Person {
  constructor(name, age) {
    this[_name] = name;
    this[_age] = age;
  }

  greet() {
    console.log(`Hello, my name is ${this[_name]}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 輸出: Hello, my name is Alice.
console.log(person[_name]); // 輸出: Alice
// console.log(person.name); // 輸出: undefined

4.3 使用WeakMap

WeakMap是ES6引入的一種新的數據結構，用于存儲鍵值對，其中鍵必須是對象。通過將私有屬性存儲在WeakMap中，可以實現真正的私有屬性。

const privateProps = new WeakMap();

class Person {
  constructor(name, age) {
    privateProps.set(this, { name, age });
  }

  greet() {
    const { name } = privateProps.get(this);
    console.log(`Hello, my name is ${name}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 輸出: Hello, my name is Alice.
// console.log(person.name); // 輸出: undefined

5. 繼承

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.

5.1 調用父類方法

在子類中，可以通過super關鍵字調用父類的方法。

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() {
    super.speak(); // 調用父類的speak方法
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 輸出: Rex makes a noise. Rex barks.

6. 類的靜態屬性和實例屬性

ES6中的class支持定義靜態屬性和實例屬性。靜態屬性是類本身的屬性，而實例屬性是類的實例的屬性。

6.1 靜態屬性

靜態屬性使用static關鍵字定義。

class MyClass {
  static myStaticProperty = 'static value';

  static myStaticMethod() {
    console.log('This is a static method.');
  }
}

console.log(MyClass.myStaticProperty); // 輸出: static value
MyClass.myStaticMethod(); // 輸出: This is a static method.

6.2 實例屬性

實例屬性可以在構造函數中定義，也可以在類的主體中直接定義。

class MyClass {
  myInstanceProperty = 'instance value';

  constructor() {
    this.anotherInstanceProperty = 'another instance value';
  }

  myInstanceMethod() {
    console.log(this.myInstanceProperty);
  }
}

const instance = new MyClass();
console.log(instance.myInstanceProperty); // 輸出: instance value
console.log(instance.anotherInstanceProperty); // 輸出: another instance value
instance.myInstanceMethod(); // 輸出: instance value

7. 類的表達式

除了使用class聲明類外，還可以使用類表達式來定義類。類表達式可以是匿名的，也可以是有名的。

// 匿名類表達式
const MyClass = class {
  constructor() {
    this.name = 'Anonymous';
  }
};

const instance = new MyClass();
console.log(instance.name); // 輸出: Anonymous

// 有名類表達式
const MyNamedClass = class NamedClass {
  constructor() {
    this.name = 'Named';
  }
};

const namedInstance = new MyNamedClass();
console.log(namedInstance.name); // 輸出: Named

8. 類的混入（Mixin）

混入是一種將多個類的功能組合到一個類中的技術。在ES6中，可以通過函數來實現混入。

const Mixin1 = (Base) => class extends Base {
  method1() {
    console.log('Method 1');
  }
};

const Mixin2 = (Base) => class extends Base {
  method2() {
    console.log('Method 2');
  }
};

class MyClass extends Mixin1(Mixin2(Object)) {
  method3() {
    console.log('Method 3');
  }
}

const instance = new MyClass();
instance.method1(); // 輸出: Method 1
instance.method2(); // 輸出: Method 2
instance.method3(); // 輸出: Method 3

9. 類的裝飾器

裝飾器是一種特殊類型的聲明，可以附加到類聲明、方法、訪問器、屬性或參數上。裝飾器使用@符號表示，通常用于修改或擴展類的行為。

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  @log
  myMethod(a, b) {
    return a + b;
  }
}

const instance = new MyClass();
instance.myMethod(1, 2); // 輸出: Calling myMethod with [1, 2]

10. 類的Symbol.species屬性

Symbol.species是一個內置的Symbol值，用于指定創建派生對象時使用的構造函數。通過重寫Symbol.species屬性，可以控制派生對象的類型。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const mappedArray = myArray.map(x => x * 2);

console.log(mappedArray instanceof MyArray); // 輸出: false
console.log(mappedArray instanceof Array);   // 輸出: true

11. 類的Symbol.iterator屬性

Symbol.iterator是一個內置的Symbol值，用于定義對象的默認迭代器。通過實現Symbol.iterator方法，可以使類成為可迭代對象。

class MyIterable {
  constructor(data) {
    this.data = data;
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const iterable = new MyIterable([1, 2, 3]);
for (const value of iterable) {
  console.log(value); // 輸出: 1, 2, 3
}

12. 類的Symbol.toStringTag屬性

Symbol.toStringTag是一個內置的Symbol值，用于定義對象的默認字符串描述。通過重寫Symbol.toStringTag屬性，可以自定義對象的toString方法的輸出。

class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClass';
  }
}

const instance = new MyClass();
console.log(instance.toString()); // 輸出: [object MyClass]

13. 類的Symbol.hasInstance屬性

Symbol.hasInstance是一個內置的Symbol值，用于定義對象的instanceof操作符的行為。通過重寫Symbol.hasInstance屬性，可以自定義instanceof操作符的邏輯。

class MyClass {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

const instance = [];
console.log(instance instanceof MyClass); // 輸出: true

14. 類的Symbol.toPrimitive屬性

Symbol.toPrimitive是一個內置的Symbol值，用于定義對象在轉換為原始值時的行為。通過重寫Symbol.toPrimitive屬性，可以自定義對象的類型轉換邏輯。

class MyClass {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return 42;
    }
    if (hint === 'string') {
      return 'MyClass';
    }
    return true;
  }
}

const instance = new MyClass();
console.log(+instance); // 輸出: 42
console.log(`${instance}`); // 輸出: MyClass
console.log(instance == true); // 輸出: true

15. 類的Symbol.match屬性

Symbol.match是一個內置的Symbol值，用于定義對象的match方法的行為。通過重寫Symbol.match屬性，可以自定義對象的match方法的邏輯。

class MyMatcher {
  [Symbol.match](string) {
    return string.indexOf('match') !== -1;
  }
}

const matcher = new MyMatcher();
console.log('match me'.match(matcher)); // 輸出: true
console.log('no match'.match(matcher)); // 輸出: false

16. 類的Symbol.replace屬性

Symbol.replace是一個內置的Symbol值，用于定義對象的replace方法的行為。通過重寫Symbol.replace屬性，可以自定義對象的replace方法的邏輯。

class MyReplacer {
  [Symbol.replace](string, replacement) {
    return string.replace(/foo/g, replacement);
  }
}

const replacer = new MyReplacer();
console.log('foo bar foo'.replace(replacer, 'baz')); // 輸出: baz bar baz

17. 類的Symbol.search屬性

Symbol.search是一個內置的Symbol值，用于定義對象的search方法的行為。通過重寫Symbol.search屬性，可以自定義對象的search方法的邏輯。

class MySearcher {
  [Symbol.search](string) {
    return string.indexOf('search') !== -1 ? 0 : -1;
  }
}

const searcher = new MySearcher();
console.log('search me'.search(searcher)); // 輸出: 0
console.log('no search'.search(searcher)); // 輸出: -1

18. 類的Symbol.split屬性

Symbol.split是一個內置的Symbol值，用于定義對象的split方法的行為。通過重寫Symbol.split屬性，可以自定義對象的split方法的邏輯。

class MySplitter {
  [Symbol.split](string) {
    return string.split(' ');
  }
}

const splitter = new MySplitter();
console.log('split me'.split(splitter)); // 輸出: ['split', 'me']

19. 類的Symbol.isConcatSpreadable屬性

Symbol.isConcatSpreadable是一個內置的Symbol值，用于定義對象在concat方法中的行為。通過重寫Symbol.isConcatSpreadable屬性，可以控制對象在concat方法中是否展開。

class MyArrayLike {
  constructor(data) {
    this.data = data;
  }

  get [Symbol.isConcatSpreadable]() {
    return true;
  }
}

const arrayLike = new MyArrayLike([1, 2, 3]);
console.log([].concat(arrayLike)); // 輸出: [1, 2, 3]

20. 類的Symbol.unscopables屬性

Symbol.unscopables是一個內置的Symbol值，用于定義對象在with語句中的行為。通過重寫Symbol.unscopables屬性，可以控制對象在with語句中是否可訪問。

class MyClass {
  foo() {
    console.log('foo');
  }

  bar() {
    console.log('bar');
  }

  get [Symbol.unscopables]() {
    return { foo: true };
  }
}

const instance = new MyClass();
with (instance) {
  bar(); // 輸出: bar
  // foo(); // 報錯: foo is not defined
}

21. 類的Symbol.species屬性

Symbol.species是一個內置的Symbol值，用于指定創建派生對象時使用的構造函數。通過重寫Symbol.species屬性，可以控制派生對象的類型。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const mappedArray = myArray.map(x => x * 2);

console.log(mappedArray instanceof MyArray); // 輸出: false
console.log(mappedArray instanceof Array);   // 輸出: true

22. 類的Symbol.iterator屬性

Symbol.iterator是一個內置的Symbol值，用于定義對象的默認迭代器。通過實現Symbol.iterator方法，可以使類成為可迭代對象。

class MyIterable {
  constructor(data) {
    this.data = data;
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const iterable = new MyIterable([1, 2, 3]);
for (const value of iterable) {
  console.log(value); // 輸出: 1, 2, 3
}

23. 類的Symbol.toStringTag屬性

Symbol.toStringTag是一個內置的Symbol值