如何掌握JavaScript中的类与继承【教程】

10次阅读

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

如何掌握JavaScript中的类与继承【教程】

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 中是调用父构造器,在普通方法中是调用父类同名方法,在静态方法中指向父类本身。

立即学习Java免费学习笔记(深入)”;

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

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

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

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

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

text=ZqhQzanResources