Es6 Class 使用指南: 轻松构建复杂对象

前端

2023-07-10 06:05:38

Es6 Class：构建优雅代码的利器

在 JavaScript 的进化历程中，Es6 Class 的出现犹如一缕清风，为开发者带来了无限魅力和优势。它不仅简化了对象的创建和组织，还遵循面向对象的编程原则，提升了代码的可读性、可维护性和可扩展性。

Class 的优势

Class 提供了以下诸多好处：

代码更具可读性和可维护性： Class 将数据和方法封装在一起，使代码清晰明了，便于理解和维护。
代码重用性更高： Class 可以轻松继承和扩展，实现代码的重用，减少代码重复。
更加面向对象： Class 遵循面向对象的编程原则，使代码更具结构性和可扩展性。

深入解析 Es6 Class 的使用

声明和实例化 Class

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 person1 = new Person('John Doe', 30);
person1.greet();

实例方法与静态方法

实例方法： 属于单个实例的方法，只能通过该实例来调用。

静态方法： 属于整个类的函数，可以通过类本身来调用。

class Person {
  // 实例方法
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  // 静态方法
  static createPerson(name, age) {
    return new Person(name, age);
  }
}

const person1 = Person.createPerson('John Doe', 30);
person1.greet();

访问控制：public, protected 和 private

public： 公共成员可以在类内、子类和类外被访问。

protected： 受保护的成员只能在类内和子类中访问，不能在类外访问。

private： 私有成员只能在类内访问，不能在子类和类外访问。

class Person {
  // 公共成员
  name;
  age;

  // 受保护的成员
  _address;

  // 私有成员
  #phoneNumber;

  constructor(name, age, address, phoneNumber) {
    this.name = name;
    this.age = age;
    this._address = address;
    this.#phoneNumber = phoneNumber;
  }

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

  // 受保护的方法
  _getAddress() {
    return this._address;
  }

  // 私有方法
  #getPhoneNumber() {
    return this.#phoneNumber;
  }
}

继承和多态

继承： 子类继承父类的属性和方法，并可以扩展或修改这些属性和方法。

多态： 子类可以重写父类的方法，以实现不同的行为。

class Employee extends Person {
  constructor(name, age, address, phoneNumber, employeeId, jobTitle) {
    super(name, age, address, phoneNumber);
    this.employeeId = employeeId;
    this.jobTitle = jobTitle;
  }

  // 重写父类的方法
  greet() {
    super.greet();
    console.log(`I am an employee with employee ID ${this.employeeId} and job title ${this.jobTitle}.`);
  }
}

const employee1 = new Employee('John Doe', 30, '123 Main Street', '555-1212', '123456', 'Software Engineer');
employee1.greet();