Front-end JS clásico: clase orientada a objetos

1. ¿Qué es un objeto?

Todas las operaciones en el programa deben completarse a través de objetos, como: operar el objeto de la ventana del navegador, operar el objeto del documento de la página web y operar el objeto de la consola.

Todos los objetos tienen dos partes: propiedades y métodos.

2. Cómo utilizar los objetos

Uso básico de la clase.

// 定义 Class 类
class Person {
  name = "yqcoder"; // 实例属性，只能通过实例访问
  static age = 18; // static 静态属性，只能通过 Person.age 访问
  readonly render = '男'; // readonly 只读，不能修改

  sayHai() {} // 实例方法
  static sayBy() {} // 静态方法，只能通过 Person.sayBy() 访问
}

constructor de clase

class Person {
  name;

  // constructor 构造函数，在对象创建时调用
  // 实例对象的 __proto__.construtor 指向构造函数
  constructor(name, age) {
    // this 指向当前构建的实例
    this.name = name;
  }
}

herencia de clase

// 子类拥有父类的所有属性和方法
class Father {
  name;
  constructor(name) {
    this.name = name;
  }
  sayHi() {}
}

// 子类可以新增自己的属性和方法
class Child extends Father {
  age;
  constructor(name, age) {
    // 必须调用super()，表示父类的构造函数，不然被重写，父类的构造函数就不执行了
    super(name);
    this.age = age;
  }
  play() {}
  // 可以重写父类方法
  sayHi() {
    // 在类方法中 super 代表父类
    super.sayHi();
  }
}

clase clase abstracta

// abstract 就是抽象类，不能实例对象，只能用来被其他类继承，天生父亲
abstract class Father {
  // 抽象方法，没有方法体，只能定义在抽象类中，子类必须对抽象方法重写
  abstract sayHi();
}