实例介绍JavaScript中多种组合继承
更新时间：2019年01月20日 11:04:54 投稿：laozhang
在本篇文章里小编给大家分享了关于JavaScript中多种组合继承的相关知识点内容，有需要的朋友们学习下。
1. 组合继承：又叫伪经典继承，是指将原型链和借用构造函数技术组合在一块的一种继承方式。
下面来看一个例子：
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
}
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //red,blue,green,black
instance1.sayName(); //Nicholas
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //red,blue,green
instance2.sayName(); //Greg
instance2.sayAge(); //27
组合继承避免了原型链和借用构造函数的缺陷，融合它们的优点。
2. 原型式继承
可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。
function object(o) {
function F(){};
F.prototype = o;
return new F;
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var antherPerson = object(person);
antherPerson.name = "Greg";
antherPerson.friends.push("Rob");
var antherPerson = object(person);
antherPerson.name = "Linda";
antherPerson.friends.push("Barbie");
alert(person.friends); //Shelby,Court,Van,Rob,Barbie
3. 寄生式继承
与原型式继承非常相似，也是基于某个对象或某些信息创建一个对象，然后增强对象，最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用。
function object(o) {
function F(){};
F.prototype = o;
return new F;
}
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
alert("Hi");
};
return clone;
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
4. 寄生组合式继承
集寄生式继承和组合继承的优点与一身，是实现基本类型继承的最有效方式。
//继承原型
function extend(subType, superType) {
function F(){};
F.prototype = superType.prototype;
var prototype = new F;
prototype.constructor = subType;
subType.prototype = prototype;
}
//超类方法
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
return this.name;
}
//子类方法
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
//继承超类的原型
extend(SubType, SuperType);
//子类方法
SubType.prototype.sayAge = function() {
return this.age;
}
var instance1 = new SubType("Shelby");
var instance2 = new SubType("Court", 28);
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black
alert(instance2.colors); //red,blue,green
alert(instance1 instanceof SubType); //true
alert(instance1 instanceof SuperType); //true
这段例子的高效率体现在它只调用了一次SuperType构造函数，并且因此避免了在SubType.prototype上面创建不必要的多余的属性。与此同时，原型链还能保持不变。因此，还能正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
相关文章
浅谈bootstrap layer.open中end的使用方法
今天小编就为大家分享一篇浅谈bootstrap layer.open中end的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家介绍了TypeScript类型系统自定义数据类型教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了canvas实现图像布局填充功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于务器与客户端跨源通信，在后来的Web服务中非常流行。本文将详细介绍JSONP，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
收藏一个代码...2006-08-08
图片轮播效果在各大网站都可以见到，应用非常广泛，今天小编给大家分享纯js实现手写图片轮播的代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了动态统计当前输入内容的字节、字符数的实例详解的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了JavaScript设置body高度为浏览器高度的方法,实例分析了body高度的设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
javascript为按钮注册回车事件（设置默认按钮）的方法
这篇文章主要介绍了javascript为按钮注册回车事件（设置默认按钮）的方法,可实现按下回车键触发按钮按下的效果,非常简单实用,需要的朋友可以参考下2015-05-05
最新评论