简单谈谈JavaScript寄生式组合继承
组合继承
组合继承也被称为伪经典继承，它综合了我们昨天说的原型链和盗用构造函数，将俩者的有点结合在了一起。它的基本思想是使用原型链继承原型上的属性和方法，通过盗用构造函数继承实例属性，这样的好处就是可以把方法定义在原型上复用，每个实例又有自己的属性。
function SuperType (name) {
this.name = name;
this.colors = ["red","yellow","bule"];
}
SuperType.prototype.sayName = function(){
console.log(this.name)
}
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
console.log(this.age);
}
let instancel = new SubType("jackson",22);
instancel.colors.push("pink");
instancel.sayName(); // "jackson"
instancel.sayAge();//22
console.log(instancel.colors);// ["red", "yellow", "bule", "pink"]
let instance2 = new SubType("bear", 20);
console.log(instance2.colors); // ["red", "yellow", "bule"]
instance2.sayName(); // "bear";
instance2.sayAge(); // 20
上面的代码大家有没有一种豁然开朗的感觉，SubType调用SuperType，并且传入name，然后定义自己的属性age，此外SubType.prototype也被赋值位SuperType实例。原型赋值后又在这个原型上添加sayage方法，这样创建俩个subType实例，这俩个实例都有自己属性，还可以共享相同的方法。
组合继承弥补了原型链和盗用构造函数的不足，是js中使用最多的继承模式。
寄生式继承
寄生式继承就是用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
// 寄生式继承
function subobject(obj) {
let clone = Object(obj);
clone.sayName = function(){
console.log("jackson")
};
return clone;
}
let sub = {
name:"bear"
}
let sup = subobject(sub);
sup.sayName();//jackson
这个例子基于sub对象返回一个新对象，返回的sup对象有sub的属性和方法，还有一个新方法sayName()。
寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。object()函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。
注意 通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。
寄生式组合继承
组合继承存在这一定的效率问题，它的父类构造函数始终会被调用俩次，一次在创建字类原型时调用，另一次在子类构造函数中调用。本质上子类只需要在执行时重写自己的原型就行了。
function inheritPrototype(subType, superType) {
let prototype = Object(superType.prototype); // 创建对象
prototype.constructor = subType; // 增强对象
subType.prototype = prototype; // 赋值对象
}
这个 inheritPrototype()函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数：子类构造函数和父类构造函数。在这个函数内部，第一步是创建父类原型的一个副本。然后，给返回的 prototype 对象设置 constructor 属性，解决由于重写原型导致默认 constructor 丢失的问题。最后将新创建的对象赋值给子类型的原型。如下例所示，调用 inheritPrototype()就可以实现前面例子中的子类型原型赋值：
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
console.log(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
console.log(this.age);
};
这里只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性， 因此可以说这个例子的效率更高。而且原型链仍然保持不变。
总结
到此这篇关于JavaScript寄生式组合继承的文章就介绍到这了,更多相关JS寄生式组合继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了 Bootstrap3 图片 响应式图片和图片形状的相关资料,需非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
表单验证几乎在每个需要注册或者是登录的网站都是必不可少，下面通过本篇文章给大家介绍JavaScript表单验证实例之验证表单项是否为空，涉及到js表单验证实例相关知识，对js表单验证实例代码需要的朋友一起学习吧2016-01-01
说起转义字符，大家最先想到的肯定是使用反斜杠，这也是我们最常见的，很多编程语言都支持。除了反斜杠以外，在前端开发中，还有其他几种转义字符，也是较常见的，本文将对这些做一个总结2023-02-02
这篇文章主要介绍了php，js，css字符串截取的办法，其实没有什么技术含量，就是记录一下，方便自己复习巩固，希望对大家能有所帮助2014-09-09
这篇文章主要为大家详细介绍了JS实现滑动条案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JavaScript 文件加载与阻塞问题之性能优化案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
闭包实质上是函数作用域的副产物,下面这篇文章主要给大家介绍了关于浏览器是如何看闭包的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了JavaScript中获取纯正的undefined的方法的相关资料,需要的朋友可以参考下2016-03-03
mongodb的数据存储格式是一种由于MongoDB的文档结构为BJSON格式（BJSON全称：Binary JSON），而BJSON格式本身就支持保存二进制格式的数据，因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结构中2012-11-11
javascript中使用正则表达式清理table样式的代码
本文给大家讲解的是使用javascript实现去除多余的TABLE的样式，主要通过结合正则表达式来实现，非常的简单实用，有需要的小伙伴可以参考下。2015-07-07
最新评论