这篇文章主要介绍“JS寄生继承是指什么，如何理解”，有一些人在JS寄生继承是指什么，如何理解的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

本篇带来一个新的继承方式：寄生继承，它由工厂模式和构造函数模式组成，即

工厂+构造函数 = 寄生继承

正文

正是由于：原型链继承和构造函数继承的 “毛病”

• 原型链继承：所有继承的属性和方法都会在对象实例间共享，无法做到实例私有。
• 构造函数继承：子类不能访问父类原型上的方法。

组合继承应运而生：

function SuperType(name){
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
     SuperType.call(this, name) // 构造函数继承 （两次调用父类构造函数）
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承 （一次调用父类构造函数）
SubType.prototype.sayAge = function() {
	 console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

但是呢？这样做，会有效率问题，父类构造函数始终会被调用两次：一次是在子类构造函数中调用，另一次在是创建子类原型时调用。

本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行了。

这个时候有一个新的思路！

不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。使用寄生式继承来继承父 类原型，然后将返回的新对象赋值给子类原型。

核心代码是：通过工厂的方式，增强一个新对象：

function createAnother(original){
     let clone = Object(original); // 通过调用函数创建一个新对象
     clone.sayHi = function() { // 以某种方式增强这个对象
         console.log("hi");
     };
     return clone; // 返回这个对象
}

将组合代码改造一下，完整代码是：

function inheritPrototype(subType, superType) {
     let prototype = Object(superType.prototype); // 创建对象
     prototype.constructor = subType; // 增强对象
     subType.prototype = prototype; // 赋值对象
}
function SuperType(name) {
     this.name = name;
     this.colors = ["red", "blue", "green"];
}
function SubType(name, age) {
     SuperType.call(this, name); // 构造函数继承（只调了一次）
     this.age = age;
}
SuperType.prototype.sayName = function() {
     console.log(this.name);
};
inheritPrototype(SubType, SuperType); // 寄生继承
SubType.prototype.sayAge = function() {
     console.log(this.age);
};
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

这里只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性；而且，原型链仍然保持不变，instanceof 操作符和 isPrototypeOf() 方法正常有效。

寄生式组合继承可以算是【引用类型】继承的最佳模式

os：不过这里的增强写法，理解起来真是怪，为什么父类的显示原型的构造函数等于子类？

SuperType.prototype.constructor=== SubType // true

大概是为了，通过寄生实现：父类、子类都由同一函数构造；

SubType === SubType.prototype.constructor // true
SuperType.prototype.constructor === SubType.prototype.constructor // true

结语

只要是写 JS 的继承，一定离不开：工厂、构造、原型设计模式；

原型链 + 构造函数 = 组合继承

工厂+构造函数 = 寄生继承；

组合继承和寄生继承是最常用的两种继承方式。

......

u1s1，class 出来前，写 JS 实现继承，是真滴麻烦QAQ

关于“JS寄生继承是指什么，如何理解”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• React文件路径别名怎样设置配置，操作是什么

  React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

• 彩色圆圈序号列表怎样用js实现

  我们经常能在一些网站页面上看到圆圈序号列表，也就是带圆圈的需要，这样的序号列表能增加网页的美观性，那么圆圈序号列表怎样用js实现呢？下面就给大家分享一个JS实现彩色圆圈序号列表的实例。

• node.js怎样实现断点续传？一文看懂步骤过程

  node.js怎样实现断点续传？首先，断点续传怎样理解呢？一般，如果是一些只有几M的图片或者文件，我们将它们上传的到服务器是上是很快的，但是如果是几百M或者几G的文件，那么上传到服务器的时间就会更久，如果这期间文件有断网或者网络差要重新下载情况，那么得多人抓狂呀！而使用切片+断点续传就能够很好应对这样的情况。那么具体怎样做呢？下面跟随小编一起来详细了解看看吧。

• 在JS中generator是什么函数，怎么使用

  generator函数是JS引擎中使用的结构函数，不提供给开发者。由构造函数generator创建的对象是迭代器和可迭代对象。

• JS数组的reduce方法基本用法是怎样

  reduce()方法对数组中的每个元素执行一个reducer函数，并将其结果总结为单个返回值。它接收两个参数，一个reducer函数提供给数组的每个调用，一个可选的初始值参数。