javascript如何实现继承_es6的class语法糖背后是什么原理

6次阅读

extends 自动完成三件事:设置子类的 [[Prototype]] 指向父类、子类原型的 [[Prototype]] 指向父类原型、强制子类构造函数调用 super();不调用 super()会导致 this 未初始化而报 ReferenceError。

javascript 如何实现继承_es6 的 class 语法糖背后是什么原理

ES6 class 的 extends 到底做了什么

ES6 的 classextends 是语法糖,背后仍是基于原型链的继承机制。它没有引入新继承模型,只是把过去容易出错的手动操作(比如改 constructor__proto__Object.setPrototypeOf)封装成更可控、更符合直觉的写法。

关键点在于:extends 会自动完成三件事:

  • 设置子类的 [[Prototype]] 指向父类(即 SubClass.__proto__ === SuperClass),让静态方法可继承
  • 设置子类原型的 [[Prototype]] 指向父类原型(即 SubClass.prototype.__proto__ === SuperClass.prototype),让实例方法可继承
  • 确保子类构造函数中必须调用 super(),否则访问 this 会报 ReferenceError: Must call super constructor in derived class before accessing 'this'

不写 super() 为什么 会报错

因为 ES6 class 的子类构造函数被设计为“未初始化状态”,thissuper() 执行前是未定义的绑定(uninitialized binding)。这和 ES5 构造函数里直接用 this 不同——这是 V8 和其它引擎强制的语义检查,不是运行时才抛错。

常见错误场景:

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

  • super() 前访问 this.xxx → 报 ReferenceError
  • 忘记写 super(),哪怕只写 return; → 同样报 ReferenceError
  • super() 但传参错误(比如父类构造函数需要两个参数,只传一个)→ 报 TypeError,但不是继承失败,而是父类构造函数执行失败
class Animal {constructor(name) {this.name = name;} } class Dog extends Animal {constructor(name, breed) {// ✅ 正确:super 必须最先调用,且参数匹配     super(name);     this.breed = breed;   } }

class 继承和 Object.setPrototypeOf 的关系

手动模拟 extends 的核心就是两行 Object.setPrototypeOf 调用:

function Animal(name) {this.name = name;} Animal.prototype.speak = function() { return '……';};  function Dog(name, breed) {Animal.call(this, name); // 相当于 super(name)   this.breed = breed; }  // ? 这两行,就是 extends 在背后做的关键设置 Object.setPrototypeOf(Dog, Animal); Object.setPrototypeOf(Dog.prototype, Animal.prototype);

注意:Object.setPrototypeOf(Dog, Animal)Dog 能继承 Animal 的静态属性(如 Animal.species = 'mammal');而 Object.setPrototypeOf(Dog.prototype, Animal.prototype) 决定实例能否调用 speak()

如果只做第二行,漏掉第一行,就会出现:Dog.speciesundefined;如果只做第一行,漏掉第二行,new Dog().speak() 会报 undefined is not a function

继承内置类(如 Array、Error)为什么必须用 class

ES5 方式无法正确继承内置类,因为它们的内部槽(internal slots,如 [[ArrayLength]])只能由引擎在原生构造函数中初始化。手写 function MyArray() { Array.apply(this, arguments); } 会导致 this 是普通对象,不具有数组行为(length 不响应、push 不更新索引等)。

class 通过底层机制绕过这个限制:只要用 extends Array,引擎就知道要分配带内部槽的特殊对象,并在 super() 中完成初始化。

class MyArray extends Array {first() {return this[0];   } } const arr = new MyArray(1, 2, 3); arr.push(4); // ✅ length 自动更新,索引正常 console.log(arr.first()); // 1

如果你试图用 ES5 方式“修复”这种继承(比如返回 Array.apply 结果),最终得到的仍是普通对象,Array.isArray() 返回 false,所有内置方法行为异常——这不是写法问题,是语言规范层面的硬性限制。

text=ZqhQzanResources