JavaScript中如何实现继承_ES5和ES6继承方式对比-js教程-PHP中文网

JavaScript中如何实现继承_ES5和ES6继承方式对比

幻影之瞳

发布： 2025-12-16 19:20:03

原创

222人浏览过

ES5继承靠构造函数借用和原型链组合实现，ES6用class/extends/super语法糖并自动建立完整原型链与静态继承。

javascript中如何实现继承_es5和es6继承方式对比

ES5继承：靠构造函数和原型链配合

ES5没有class关键字，实现继承主要靠组合使用构造函数借用（call/apply）和原型链继承。核心思路是：子类实例先拥有父类的实例属性，再让子类原型指向父类原型的副本，从而共享方法。

常见写法（寄生组合式继承，最推荐）：

function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log('Hello from ' + this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 借用构造函数，继承实例属性
  this.age = age;
}

// 关键：用Object.create(Parent.prototype)避免调用Parent构造函数
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 修复constructor指向

Child.prototype.play = function() {
  console.log(this.name + ' is playing');
};

登录后复制

⚠️ 注意点：

不手动设置Child.prototype = Parent.prototype，否则修改子类原型会影响父类
必须重设constructor，否则new Child().__proto__.constructor会指向Parent
无法继承父类的静态方法（如Parent.staticMethod = () => {}），需额外拷贝

ES6继承：class + extends + super，语法更清晰

ES6引入class语法糖，但本质仍是基于原型的继承。使用extends声明继承关系，子类构造函数中必须调用super()——它负责初始化this并连接原型链。

立即学习“Java免费学习笔记（深入）”；

class Parent {
  constructor(name) {
    this.name = name;
  }
  say() {
    console.log('Hello from ' + this.name);
  }
  static create() {
    return new Parent('default');
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 必须！相当于Parent.call(this, name)
    this.age = age;
  }
  play() {
    console.log(this.name + ' is playing');
  }
  // 静态方法也能被继承
  static build() {
    return new Child('test', 10);
  }
}

登录后复制

✅ 优势明显：

QoQo

QoQo是一款专注于UX设计的AI工具，可以帮助UX设计师生成用户角色卡片、用户旅程图、用户访谈问卷等。

172

查看详情

语法简洁，语义明确，“继承”意图一目了然
自动建立正确的原型链：Child.__proto__ === Parent（静态继承），Child.prototype.__proto__ === Parent.prototype（实例方法继承）
支持继承父类静态方法和getter/setter
子类构造函数中不调用super()会直接报错，强制规范流程

关键差异对比：不只是写法不同

表面上是语法糖，底层机制有实质性区别：

原型链建立时机不同：ES5靠手动赋值Child.prototype = ...；ES6在extends时就自动设置好Child.prototype.__proto__和Child.__proto__
this绑定逻辑不同：ES5中this在子构造函数里已存在；ES6中子类构造函数里，this在super()执行前是未初始化的，直接访问会报ReferenceError
静态成员继承支持：ES6原生支持Child.staticMethod继承Parent.staticMethod；ES5需手动赋值Child.staticMethod = Parent.staticMethod
可扩展性：ES6 class支持get/set、static、private #field等特性，ES5模拟成本高且不统一