17370845950

JavaScript 的 class 是语法糖，本质是基于原型的继承机制；class 声明生成不可提升的函数，方法挂载在 prototype 或构造函数上，extends 通过 proto 链接原型，super 初始化 this 并支持多上下文调用。

JavaScript 中的 class 只是语法糖，底层仍是基于原型的继承机制；不理解 prototype 和 __proto__ 的关系，强行套用其他语言的“类思维”，迟早会踩坑。

class 声明本质是函数，不是真正的类

class 语法看起来像 Java 或 Python，但编译后就是带特殊属性的函数。它不能被提升（hoisting），且默认启用严格模式。

• class Person {} 等价于 const Person = class {}，Person 是一个不可枚举的构造函数
• 直接调用 Person()（不加 new）会抛出 TypeError: Class constructor Person cannot be invoked without 'new'
• 静态方法和实例方法都挂载在不同位置：Person.method → 构造函数自身；Person.prototype.method → 实例可访问

extends 实现的是原型链继承，不是拷贝

extends 并不会把父类所有方法复制到子类，而是让子类的 prototype.__proto__ 指向父类的 prototype，形成原型链查找路径。

• 子类必须在 constructor 中第一行调用 super()，否则无法访问 this —— 因为 super() 才真正初始化了 this 对象的原型链接
• 如果父类构造函数有参数，super(...args) 必须传入，否则可能丢失初始化逻辑
• 静态方法也能被继承：Child.staticMethod() 可以调用，因为 Child.__proto__ === Parent

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
  static info() {
    return 'Animal base class';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // ← 必须！否则 ReferenceError: Must call super constructor
    this.breed = breed;
  }
  bark() {
    return `${this.name} barks!`;
  }
}

super 不只是调用父构造函数，还能调用父级方法和访问父级静态成员

super 在不同上下文中有不同行为：在 constructor 中是调用父构造器，在普通方法中是调用父类同名方法，在静态方法中指向父类本身。

• 在实例方法里：super.speak() 查找的是 Animal.prototype.speak
• 在静态方法里：super.info() 等价于 Animal.info()
• 不能在箭头函数或普通函数中使用 super，只在类的方法定义（含 get/set）中有效
• 误写成 this.super.speak() 或 super().speak() 都会报错

想真正掌握，得亲手破坏一次继承链

光看正确示例容易产生幻觉。试试这些操作，观察报错或输出变化：

• 删掉 Dog 的 constructor，再删掉 super() → 报 ReferenceError
• 在 Dog.prototype.speak = null 后调用 new Dog('Lucky').speak() → 仍能执行，因为查找到 Animal.prototype.speak
• 手动改写 Dog.prototype.__proto__ = null → speak() 直接 undefined，原型链断了

原型链看不见摸不着，但每次方法调用都在走它。继承不是“我拥有父类的代码”，而是“我找不到时，去问原型”。