ES6--9.JS类解析之，如何利用JS轻松构建自己的类？

2023-10-30 10:04:20

引言

类是面向对象编程（OOP）的基础，它允许我们创建具有共同特征和行为的对象。在ES6之前，JavaScript没有原生的类支持，我们通常使用原型继承和构造函数来模拟类。然而，ES6引入了类的概念，使得JavaScript的OOP开发变得更加简单和高效。

1. 类声明

类声明语法允许我们使用constructor直接定义一个构造器，而不需要先定义一个函数，再把它当做构造器来使用。类中的方法使用的是函数简写语法，省略了function。类声明不会被提升，这与ES6之前通过函数定义不同。类声明与使用let定义一样，因此也存在暂时死区（temporal dead zone）。

示例：

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('John Doe', 30);
person.greet(); // Hello, my name is John Doe and I am 30 years old.

2. 类继承

类继承允许我们创建一个子类，它继承了父类的属性和方法。子类可以覆盖父类的方法，也可以添加自己的方法。

示例：

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age); // Call the parent constructor
    this.jobTitle = jobTitle;
  }

  work() {
    console.log(`I am ${this.name} and I work as a ${this.jobTitle}.`);
  }
}

const employee = new Employee('Jane Doe', 25, 'Software Engineer');
employee.greet(); // Hello, my name is Jane Doe and I am 25 years old.
employee.work(); // I am Jane Doe and I work as a Software Engineer.

3. 类方法

类方法是属于类的函数，可以被类的所有实例访问。类方法使用static关键字声明。

示例：

class Person {
  static createPerson(name, age) {
    return new Person(name, age);
  }
}

const person = Person.createPerson('John Doe', 30);
console.log(person); // Person { name: 'John Doe', age: 30 }

4. 类实例

类实例是类的具体对象。我们可以使用new关键字创建类实例。

示例：

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

const person = new Person('John Doe', 30);
console.log(person.name); // John Doe
console.log(person.age); // 30

5. 类属性

类属性是属于类的变量，可以被类的所有实例访问。类属性使用static关键字声明。

示例：

class Person {
  static species = 'Homo sapiens';
}

console.log(Person.species); // Homo sapiens

6. 私有属性和方法

私有属性和方法只允许在类的内部访问。私有属性和方法使用#前缀声明。

示例：

class Person {
  #name;
  #age;

  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('John Doe', 30);
person.greet(); // Hello, my name is John Doe and I am 30 years old.
console.log(person.#name); // Error: Cannot access private field

7. 公有属性和方法

公有属性和方法允许在类的内部和外部访问。公有属性和方法使用public关键字声明。

示例：

class Person {
  public name;
  public age;

  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('John Doe', 30);
person.greet(); // Hello, my name is John Doe and I am 30 years old.
console.log(person.name); // John Doe
console.log(person.age); // 30

8. 静态属性和方法

静态属性和方法只属于类本身，不能被类的实例访问。静态属性和方法使用static关键字声明。

示例：

class Person {
  static species = 'Homo sapiens';

  static createPerson(name, age) {
    return new Person(name, age);
  }
}

console.log(Person.species); // Homo sapiens
const person = Person.createPerson('John Doe', 30);
console.log(person); // Person { name: 'John Doe', age: 30 }

9. 实例成员和类成员

实例成员是属于类实例的属性和方法，只能被该实例访问。类成员是属于类的属性和方法，可以被类的所有实例访问。实例成员使用this关键字声明，类成员使用static关键字声明。

示例：

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

  static species = 'Homo sapiens';

  static createPerson(name, age) {
    return new Person(name, age);
  }
}

const person = new Person('John Doe', 30);
person.greet(); // Hello, my name is John Doe and I am 30 years old.
console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(Person.species); // Homo sapiens
const person2 = Person.createPerson('Jane Doe', 25);
console.log(person2); // Person { name: 'Jane Doe', age: 25 }