深入理解JavaScript类(class)的使用与特性

深入理解 Javascript 类 (class) 的使用与特性

在 Javascript 中，类是一种面向对象编程的概念，提供了更简洁的语法来创建对象和处理继承关系。

1.1 定义类代码

class Character {
  static instanceCount = 0; // 静态属性：实例个数
  name;
  _hp = 1000;
  _mp = 500;

  constructor(name, level) {
    this.name = name;
    Character.instanceIncrease(); // 实例数量 +1
  }

  static instanceIncrease() {
    ++this.instanceCount;
  }

  get hp() {
    return this._hp;
  }

  set hp(value) {
    this._hp = Math.min(value, 9999); // HP 上限为 9999
  }

  show() {
    console.info(`在下：${this.name}`);
  }
}

console.log(`当前实例数量为: ${Character.instanceCount}`); // 当前实例数量为: 0
const player = new Character("张三", 10);
console.log(`当前实例数量为: ${Character.instanceCount}`); // 当前实例数量为: 1
console.log(`当前HP值: ${player.hp}`); // 当前HP值: 1000
player.hp = 200;
console.log(`当前HP值: ${player.hp}`); // 当前HP值: 200
player.hp = 10000;
console.log(`当前HP值: ${player.hp}`); // 当前HP值: 9999
player.show(); // 在下: 张三

2.1 匿名类表达式

let MyClass = class {
  constructor() {}
  show() {
    return "在下：张三";
  }
};

let instance = new MyClass();
instance.show(); // 在下：张三

2.2 命名类表达式

const MyClass = class NamedMyClass {
  constructor() {}
  showName() {
    return NamedMyClass.name;
  }
};

let instance = new MyClass();
instance.showName(); // NamedMyClass
NamedMyClass.name; // ReferenceError: NamedMyClass not defined
MyClass.name; // "NamedMyClass"

3.1 利用 Symbol

const ATTRIBUTE = Symbol();
class Character {
  constructor() {
    this[ATTRIBUTE] = {};
    this[ATTRIBUTE].name = '无名氏';
    this[ATTRIBUTE].hp = 1000;
  }

  get name() {
    return this[ATTRIBUTE].name;
  }

  set name(value) {
    this[ATTRIBUTE].name = value;
  }

  get hp() {
    return this[ATTRIBUTE].hp;
  }

  set hp(value) {
    this[ATTRIBUTE].hp = value;
  }
}

const player = new Character();
console.info(player.name); // 无名氏
console.info(player.hp); // 1000

3.2 利用 WeakMap

const attrMap = new WeakMap();
class Character {
  constructor() {
    attrMap.set(this, {});
    attrMap.get(this).name = '无名氏';
    attrMap.get(this).hp = 1000;
  }

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

  set name(value) {
    attrMap.get(this).name = value;
  }

  get hp() {
    return attrMap.get(this).hp;
  }

  set hp(value) {
    attrMap.get(this).hp = value;
  }
}

const player = new Character();
console.info(player.name); // 无名氏
console.info(player.hp); // 1000
player.name = "张三";
player.hp = 9999;
console.info(player.name); // 张三
console.info(player.hp); // 9999

4.1 使用 # 符号

class Character {
  #nickname;

  constructor() {
    this.#nickname = '无名氏';
  }

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

  set nickname(value) {
    this.#nickname = value;
  }

  #showNickName = () => {
    console.info(`在下：${this.#nickname}`);
  }

  show() {
    this.#showNickName();
  }
}

const player = new Character();
console.info(player.nickname); // 无名氏
player.nickname = "张三";
player.show(); // 在下：张三

5.1 继承机制

class A {
  constructor() {
    this.name = "class A";
    this.age = 18;
  }

  show() {
    console.info(`${this.name}, 今年${this.age}岁`);
  }
}

class B extends A {
  constructor() {
    super();
    this.name = "class B";
    this.age = 20;
  }

  showA() {
    super.show();
  }

  show() {
    console.info(`${this.name}, 今年${this.age}岁`);
  }
}

let b = new B();
console.info(b.name); // class B
console.info(b.age); // 20
b.show(); // class B, 今年20岁
b.showA(); // class A, 今年20岁

5.2 super 关键字的作用

5.2.1 为何需要 super

在多级继承的情况下，使用 super 可以简化对基类方法的调用，避免复杂的原型链操作。

5.2.2 调用基类构造函数

如果子类显式定义了构造函数，则必须在使用 this 之前通过 super() 调用基类构造函数，确保基类的初始化逻辑得以执行。

《Javascript 权威指南》

MDN Web 文档 - Javascript 类

后盾人 Javascript 类教程