J*aScript组合继承_多种继承方式_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript组合继承_多种继承方式

2025-11-28

浏览次数：次

返回列表

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

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

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

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. 组合继承（推荐方案）

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

Magic CMS 网站管理系统2.2.1.alpha 政企版

Magic CMS网站管理系统（政企版）采用PHP+Mysql架构，再原CMS系统的基础上精简出适合企业政府客户使用版本，继承了原系统的快捷，高效，灵活，实用的特点，保留了核心功能，系统支持自定义模版（极易整合dede模板）、支持扩展插件，自定义模型等功能，保留了文章模型，视频模型，图集模型，产品模型，能够胜任企业多种建站需求。BUG修复：1.修改了程序安装时部分数据无法正常导入的错误2.修改了程

2 查看详情 Magic CMS 网站管理系统2.2.1.alpha 政企版

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;
};