如何实现JavaScript继承_ES5和ES6的继承方式有什么不同_技术教程

ES6继承更规范严谨：通过class/extends/super实现自动原型链绑定和强制super调用，修复instanceof问题；ES5需手动组合构造函数与原型链，易出错且语义模糊。

JavaScript 中的继承在 ES5 和 ES6 中实现方式差异明显：ES5 依赖原型链和构造函数组合模拟，写法繁琐易错；ES6 引入 class 和 extends 关键字，语法简洁、语义清晰，并原生支持 super 调用父类方法，同时修复了 ES5 继承中子类实例不是父类实例的问题（即 instanceof 行为更合理）。

ES5 继承：借用构造函数 + 原型链组合

ES5 没有 class 语法，需手动操作原型实现继承。常见做法是：先用 call/apply 继承实例属性，再用 Object.create 设置原型链继承方法。

典型实现如下：

⚠️ 注意点：

必须手动调用 Parent.call(this, ...) 否则子类拿不到父类的 this 属性
Object.create(Parent.prototype) 是关键，直接赋值 Child.prototype = Parent.prototype 会导致修改子类原型影响父类
constructor 需重设，否则 new Child().__proto__.constructor === Parent
子类实例 instanceof Parent 为 true，但若只用构造函数借用（没设原型链），则为 false

ES6 继承：class + extends + super

ES6 的 class 是语法糖，但 extends 实现了真正的基于类的继承语义，且要求子类构造函数中必须调用 super()。

等价写法如下：

class Parent {
constructor(name) {
thi

s.name = name;
  }
  sayHello() {
    console.log('Hello, ' + this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    // 必须第一行调用 super，初始化 this
    super(name); // 相当于 Parent.call(this, name)
    this.age = age;
  }
  sayAge() {
    console.log('I am ' + this.age + ' years old');
  }
}

✅ 优势包括：

语法更直观，接近传统面向对象语言
自动绑定原型链，无需手动 Object.create 和修复 constructor
强制调用 super()，避免 this 未定义错误
子类实例既是 Child 又是 Parent 的实例（new Child() instanceof Parent === true），继承关系更严谨
支持静态方法继承（static 方法可通过 super 在子类中调用）

核心区别总结

本质差异不在“能不能继承”，而在于设计意图与底层保障：

ES5 是模拟：开发者手动拼装，容易漏步骤（如忘记 super 或修复 constructor），instanceof 和 getPrototypeOf 行为需小心维护
ES6 是规范：引擎强制执行继承逻辑，子类 constructor 内不调用 super 会报错；Class 定义的函数不可被 new 调用（非构造函数），安全性更高
super 的含义不同：ES5 中无 super；ES6 中 super 既可调用父类构造函数（super()），也可调用父类方法（super.sayHello()），且在静态方法中也有效
可枚举性一致：ES6 class 中定义的方法默认不可枚举（符合 ES5 原型方法行为），与手动挂载到 prototype 效果一致