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

ES6 class 的 extends 到底做了什么
ES6 的 class 和 extends 是语法糖,背后仍是基于原型链的继承机制。它没有引入新继承模型,只是把过去容易出错的手动操作(比如改 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 的子类构造函数被设计为“未初始化状态”,this 在 super() 执行前是未定义的绑定(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.species 是 undefined;如果只做第一行,漏掉第二行,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,所有内置方法行为异常——这不是写法问题,是语言规范层面的硬性限制。











