JS继承实现与ES6类原理详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript如何实现继承？ES6 class原理解析》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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 和其它引擎强制的语义检查，不是运行时才抛错。

常见错误场景：

• 在 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，所有内置方法行为异常——这不是写法问题，是语言规范层面的硬性限制。

以上就是《JS继承实现与ES6类原理详解》的详细内容，更多关于的资料请关注golang学习网公众号！