JS 面向对象之继承---多种组合继承详解
更新时间：2016年07月10日 10:01:01 投稿：jingxian
下面小编就为大家带来一篇JS 面向对象之继承---多种组合继承详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这一次要讲 组合、原型式、寄生式、寄生组合式继承方式。
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()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
以上这篇JS 面向对象之继承---多种组合继承详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
js资料prototype 属性...2007-03-03
js之WEB开发调试利器:Firebug 下载...2007-01-01
本篇文章，小编为大家介绍，在JavaScript中typeof的用途介绍。不过在阅读本文的前提是，你现在应该已经知道原始值和对象值的区别了2013-04-04
在前端JavaScript编程过程中,为了开发出更具交互性的web应用,需要对一些数组进行处理,下面这篇文章主要给大家介绍了关于JavaScript基础学习之splice()函数的相关资料,需要的朋友可以参考下2022-04-04
JavaScript instanceof 的使用方法示例介绍
判断一个变量的类型尝尝会用 typeof 运算符而他毕竟有些缺陷，就是无论引用的是什么类型的对象，它都返回object，这时就要用到instanceof来检测某个对象是不是另一个对象的实例2013-10-10
本篇是你必须知道的Javascript系列第三篇，我们主要来看看Javascript是如何面向对象的编程的,需要的朋友可以参考下2017-01-01
这篇文章主要为大家介绍了javascript命令模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
本文将聚焦于JavaScript中的基本概念，这些概念与传统语言有比较大的不同，因此单独列出一章来做专门描述，理解本章的概念对书中后续章节的概念，代码的行为等会有很大的帮助，读者不妨花比较大的时间在本章，即使你对JavaScript已经比较熟悉，也建议通读本文2011-10-10
这篇文章主要介绍了浅谈javascript 归并方法的相关资料,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript之数组（Array）详解,本文详细讲解了JavaScript数组的创建、检测数组、转化方法、栈方法、队列方法、重排序方法、操作方法、位置方法等内容,需要的朋友可以参考下2015-04-04
最新评论