当前位置：首页 > news >正文

不要再混淆啦！一文带你学会原型链继承、构造函数继承、寄生组合继承、ES6继承

news 2025/7/5 5:33:22

JS继承目录

一、原型链继承
2、构造函数继承
3、组合继承
4、寄生组合继承
5、ES6继承

js有几种经典的继承方式。比如 原型链继承、 构造函数继承、 组合继承、 寄生组合继承、 ES6继承。让我们一一分析并实现。同时了解每种方案的优缺点。

其实js的继承本质上是通过原型链机制实现的扩展。不管是哪种继承方式，都是通过操作父类原型链和子类原型链形成关联关系实现的。只是不同实现中需要考虑不同的问题。在实际项目开发中，建议尽可能使用ES6的class extends实现。
其他实现方式主要是理解背后的原理和思想。

一、原型链继承

// 定义父类
function Parent() {this.name = "parent";
}// 在父类的原型上定义方法
Parent.prototype.getName = function() {return this.name;
}// 定义子类
function Child() {this.name = "child";
}// 子类继承父类，这里是关键，实现原型链继承
Child.prototype = new Parent();// 实例化子类
var child1 = new Child();console.log(child1.getName()); // 输出 "child"

缺陷：
原型链继承的一个主要问题是包含引用类型值的原型属性会被所有实例共享。换而言之，如果一个实例改变了该属性，那么其他实例的该属性也会被改变

比如以下代码就会出问题：我明明只想修改了 child1 的arr，我不想修改 child2 的 arr。但是实际结果却是， child2 的 arr 也被修改了。

      // 定义父类function Parent() {this.arr = [1, 2, 3];}// 定义子类function Child() {}// 子类继承父类，这里是关键，实现原型链继承Child.prototype = new Parent();// 实例化子类var child1 = new Child();var child2 = new Child();child1.arr.push(4);console.log(child1.arr); console.log(child2.arr);

上述问题能否避免呢？答案是可以的。我们可以通过构造函数继承来避免上述问题。

2、构造函数继承

构造函数继承，通过使用 call 或 apply 方法，我们可以在子类型构造函数中执行父类型构造函数，从而实现继承。比如以下例子，child1 和 child2 都继承了 Parent 的 sayHello() 方法。

这种继承方式的好处是，原型属性不会被共享（所以不会出现上述问题）。我们可以尝试console.log() child1 和 child2 的 sayHello方法，通过 === 判断得知，他们并不是同一个方法。换而言之，修改其中任何一个 sayHello ，不会影响另一个 sayHello。

      // 父类function Parent() {this.sayHello = function () {console.log("Hello");};}Parent.prototype.a = "我是父类prototype上的属性";// 子类function Child() {Parent.call(this);}// 创建两个 Child 实例var child1 = new Child();var child2 = new Child();console.log(child1.sayHello === child2.sayHello); // 输出 false

缺陷：
那么这种方式的缺点是什么呢？它不能继承父类 prototype 上的属性。比如以下例子，父类的prototype 上有个 a 属性（它是一个字符串）。按理来说，child 类继承了 parent 类，因此 child 实例化的对象也得有 a 属性，但 console.log(child1.a) 之后可以看出，child1.a 是 undefined 。

为了解决以上缺点，我们引入了组合继承。

3、组合继承

组合继承可以理解为原型链继承 + 构造函数继承。可以看以下例子：

    // 父类function Parent() {this.sayHello = function () {console.log("Hello");};}Parent.prototype.a = "我是父类prototype上的属性"; // 子类function Child() {Parent.call(this);}Child.prototype = new Parent();var child1 = new Child();

实际上，只是在构造函数继承的基础上，加了一行代码：Child.prototype = new Parent();

这就解决了构造函数继承的缺点。 构造函数继承不能继承父类 prototype 上的属性。但是加上这行代码之后，每当我们在 child 对象上找不到属性，就会去 Child.prototype 上去寻找，而 Child.prototype 是一个 Parent 对象，如果 Parent 对象上还找不到，就会去 Parent.prototype 上去寻找。如此以来，组合继承就能继承父类 prototype 上的属性。

但是，组合继承有没有缺点呢？它也有缺点：调用了 2 次 Parent()。它在 child 的 prototype 上添加了父类的属性和方法。

很多读者可能读不懂上面这句话，我们通过一个具体的例子来说明。child1 是一个子类对象，这个对象本身有 sayHello 方法。而 Child.prototype 上也有一个 sayHello 方法。

为什么child1本身有 sayHello 方法？因为在 Child() 构造函数内部，我们调用了一次 Parent(), 这就给 child1对象添加了 sayHello 方法。

而为什么 Child.prototype 上也有一个 sayHello 方法？因为 Child.prototype = new Parent();
细心的你·可能发现了，我们每次调用 child1.sayHello() 的时候，永远是调用的child1本身有 sayHello 方法。换句话说，Child.prototype 上 sayHello 方法我们根本不需要。

那么有没有办法解决这个问题呢？于是我们引入了寄生组合继承。

4、寄生组合继承

     // 父类function Parent() {this.sayHello = function () {console.log("Hello");};}Parent.prototype.a = "我是父类prototype上的属性";// 子类function Child() {Parent.call(this);}// 创建一个没有实例方法的父类实例作为子类的原型Child.prototype = Object.create(Parent.prototype);// 修复构造函数的指向Child.prototype.constructor = Child;var child1 = new Child();

我们发现，只需要在组合继承的基础上，把 Child.prototype = new Parent(); 替换为 Child.prototype = Object.create(Parent.prototype);

这两者有什么区别呢？ Object.create(Parent.prototype) 创造了一个空对象，这个空对象的__proto__ 是 Parent.prototype 。所以它继承了 Parent 原型链上的属性和方法。由于我们删除了Child.prototype = new Parent(); 我们不再调用 Parent() 构造函数，因此 Child.prototype 不再包含 Parent 的属性和方法。所以第三小节部分提到的问题就解决了，Child.prototype 上不再有 sayHello 方法。

那么寄生组合继承有没有缺点呢？当然也有缺点。看以下例子:

      // 父类function Parent() {this.sayHello = function () {console.log("Hello");};}Parent.prototype.a = "我是父类prototype上的属性";// 子类function Child() {Parent.call(this);}Child.prototype.childFunction = () => {console.log("我是child方法");};// 创建一个没有实例方法的父类实例作为子类的原型Child.prototype = Object.create(Parent.prototype);// 修复构造函数的指向Child.prototype.constructor = Child;var child1 = new Child();child1.childFunction();

我们在 Child.prototype 上添加了 childFunction 。所有通过Child() 创建的实例对象，都应该有该childFunction() 方法。但是当我们调用 child1.childFunction() 的时候却报错，这是为什么呢？因为 Child.prototype = Object.create(Parent.prototype); 这一行代码使 Child.prototype 指向了一个新对象，原来对象上的属性和方法都会丢失。

所以寄生组合继承的缺点就是，Child.prototype 的原始属性和方法会丢失。

5、ES6继承

ES6提供了class语法糖，同时提供了extends用于实现类的继承。这也是项目开发中推荐使用的方式。

使用class继承很简单，也很直观：

class Parent {constructor() {this.name = 'zzz'}getName() {return this.name}
}class Child extends Parent {constructor() {// 这里很重要，如果在this.topic = 'z'后面调用，会导致this为undefined，具体原因可以详细了解ES6的class相关内容，这里不展开说明super()this.topic = 'z'}
}const child = new Child()
child.getName() // zzz