首页 > 文章 > 前端

JavaScript组合继承教程与实战解析

时间：2025-12-06 12:48:31 440浏览收藏

推广推荐

支持 PC / 移动端，安全直达

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

组合继承结合原型链和构造函数继承，通过调用父类构造函数并设置子类原型为父类实例，使子类实例既拥有独立属性又能共享方法，解决了属性共享问题，但父类构造函数被调用两次；寄生组合继承进一步优化，使用Object.create创建干净原型链，避免重复调用，是JavaScript继承的最优方案。

JavaScript组合继承_多种继承方式

JavaScript 中的继承机制灵活多样，组合继承是其中一种常用且高效的实现方式。它结合了 原型链继承 和 构造函数继承 的优点，既能保证实例拥有独立的属性，又能共享方法，避免引用类型属性被共用的问题。

1. 原型链继承（基础但有限制）

通过将子类的原型指向父类的实例来实现继承：

function Parent() {
  this.name = 'parent';
  this.colors = ['red', 'blue'];
}
Parent.prototype.getName = function() {
  return this.name;
};

function Child() {}

// 继承父类
Child.prototype = new Parent();

const child1 = new Child();
child1.colors.push('green');
const child2 = new Child();

console.log(child2.colors); // ['red', 'blue', 'green'] —— 被共用了！

问题在于：父类实例中的引用类型属性会被所有子类实例共享，导致数据污染。

2. 构造函数继承（解决属性共享）

在子类构造函数中调用父类构造函数，使用 call 或 apply 绑定 this：

function Parent() {
  this.name = 'parent';
  this.colors = ['red', 'blue'];
}

function Child() {
  Parent.call(this); // 继承属性
}

const child1 = new Child();
child1.colors.push('green');

const child2 = new Child();
console.log(child2.colors); // ['red', 'blue'] —— 不再共享

优点：每个实例都有独立的属性副本。缺点：无法继承父类原型上的方法，方法不能复用。

3. 组合继承（推荐方案）

结合原型链和构造函数继承，发挥两者优势：

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

Parent.prototype.getName = function() {
  return this.name;
};

function Child(name, age) {
  Parent.call(this, name); // 第二次调用 Parent()
  this.age = age;
}

// 建立原型链
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.getAge = function() {
  return this.age;
};

这样，Child 实例既拥有独立的属性，又能访问父类原型的方法。但有个小缺陷：Parent 构造函数被调用了两次。

4. 寄生组合继承（最优解）

优化组合继承，避免重复调用父类构造函数，使用 Object.create 创建干净原型链：

function inheritPrototype(Child, Parent) {
  const prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}

Parent.prototype.getName = function() {
  return this.name;
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

// 核心：只继承原型，不执行构造函数两次
inheritPrototype(Child, Parent);

Child.prototype.getAge = function() {
  return this.age;
};

这是 JavaScript 中实现继承的最佳实践，高效、安全、语义清晰。

基本上就这些。组合继承适合大多数场景，若追求极致，寄生组合继承更优。理解每种方式的取舍，才能写出健壮的面向对象代码。

好了，本文到此结束，带大家了解了《JavaScript组合继承教程与实战解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！