在 JavaScript 中巧妙玩转 ES6 类

2024-01-05 02:55:18

构造函数

在 ES6 中，类是通过 class 来定义的，它包含一个构造函数。构造函数用于初始化类的实例，并在创建实例时被自动调用。

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

上面的代码定义了一个 Person 类，它具有两个属性：name 和 age。当使用 new 关键字创建一个新的 Person 实例时，构造函数 Person(name, age) 会被自动调用，并将 name 和 age 的值分配给新实例的 name 和 age 属性。

2. 继承

ES6 中的类支持继承，这允许您创建一个新的类，它继承了另一个类的属性和方法。继承通过 extends 关键字来实现。

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
}

上面的代码定义了一个 Student 类，它继承了 Person 类。这意味着 Student 类具有 Person 类的所有属性和方法，还添加了一个新的属性 school。

3. 实例方法

实例方法是类中定义的方法，它可以被类的实例调用。实例方法使用 prototype 属性来定义。

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.`);
  }
}

上面的代码定义了一个 Person 类，它具有一个实例方法 greet()。当我们创建一个新的 Person 实例时，我们可以使用 greet() 方法来向控制台打印出该实例的姓名和年龄。

4. 静态方法

静态方法是类中定义的方法，它可以被类本身调用，而不是类的实例。静态方法使用 static 关键字来定义。

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

  static greetAll(people) {
    for (const person of people) {
      console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);
    }
  }
}

上面的代码定义了一个 Person 类，它具有一个静态方法 greetAll()。我们可以使用 Person.greetAll() 方法来向控制台打印出所有 Person 实例的姓名和年龄。

5. 访问器

访问器是类中定义的特殊方法，它允许我们获取和设置类的属性。访问器使用 get 和 set 关键字来定义。

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

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 3) {
      throw new Error("Name must be at least 3 characters long.");
    }

    this._name = value;
  }
}

上面的代码定义了一个 Person 类，它具有两个访问器：name 和 age。name 访问器用于获取和设置 _name 私有属性，age 访问器用于获取和设置 _age 私有属性。

6. 私有属性

私有属性是类中的属性，它只能在类的内部被访问。私有属性使用 # 符号来定义。

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

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

  set name(value) {
    if (value.length < 3) {
      throw new Error("Name must be at least 3 characters long.");
    }

    this.#name = value;
  }
}

上面的代码定义了一个 Person 类，它具有两个私有属性：#name 和 #age。私有属性只能在类的内部被访问，不能被类的外部访问。

7. Symbol

Symbol 是 ES6 中引入的一种新的数据类型，它可以用来创建唯一的标识符。Symbol 不会被转换成字符串，也不会被枚举。

const nameSymbol = Symbol("name");
const ageSymbol = Symbol("age");

class Person {
  constructor(name, age) {
    this[nameSymbol] = name;
    this[ageSymbol] = age;
  }

  get name() {
    return this[nameSymbol];
  }

  set name(value) {
    if (value.length < 3) {
      throw new Error("Name must be at least 3 characters long.");
    }

    this[nameSymbol] = value;
  }
}

上面的代码定义了一个 Person 类，它使用 Symbol 来创建唯一的标识符 nameSymbol 和 ageSymbol。Symbol 确保了 name 和 age 属性是唯一的，不会与其他属性冲突。

8. 类表达式

类表达式与函数表达式非常相似，它们都允许您在代码块中定义一个类。

const Person = class {
  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.`);
  }
};

上面的代码定义了一个 Person 类，它使用类表达式来定义。类表达式可以像函数表达式一样被分配给一个变量，也可以像函数表达式一样被立即调用。

9. 类声明

类声明是 ES6 中引入的一种新的语法，它允许您在代码块之外定义一个类。

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.`);
  }
}