有关JavaScript的几种继承方式请移步JavaScript的几种继承方式

原型链的缺陷

SubType.prototype = new SuperType();

这样做的话,SuperType构造函数中的属性也会变成SubType原型中的属性,而我们需要SubType原型只继承SuperType原型

还有一点就是引用类型值属性的共享

寄生组合式继承的理解

为了结合原型链、组合继承和寄生式继承的优点,可以新建一个临时的类temp,temp.prototype指向父类的Prototype,然后创建一个temp实例,并给它加上一个constructor属性

这样,相当于用原型链的方法继承temp,由于temp的构造函数为空,所以只继承了原型上的属性,构造函数上的属性再用call或apply来继承

于是,我们可以把封装继承的函数进行修改,不使用object()或Object.create(),便于理解

//继承原型
function inheritPrototype(subType, superType){ //参数为两个类型的构造函数
var temp = function(){};
temp.prototype = superType.prototype;
var tempInstance = new temp(); //创建temp的实例tempInstance //给temp的实例tempInstance添加constructor属性,指向subType,虽然不是真的prototype.constructor,但是用来实现继承的效果是我们想要的
tempInstance.constructor = subType;
subType.prototype = tempInstance; //原型链继承
} function SuperType(name){
this.name = name;
this.colors = [];
} SuperType.prototype.sayName = function(){}; function SubType(name, age){
//继承构造函数中的属性
SuperType.call(this, name);
this.age = age;
} inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){};

不用temp,直接SubType.prototype = SuperType.prototype?

因为SubType.prototype直接指向了SuperType.prototype,所以改变子类prototype中的属性的话,父类prototype中的属性也会被改变

例子:

//子类改变会影响父类的情况

function Animal(){
this.species = 'animal';
} Animal.prototype.color = 'red'; function Cat(){
this.meow = 'meowmeowmeow';
} function Dog(){
this.bark = 'bow-wow';
} Cat.prototype = Animal.prototype;
Dog.prototype = Animal.prototype; var cat = new Cat();
var dog = new Dog(); console.log(cat.color); //red
console.log(dog.color); //red
console.log(Animal.prototype.color); //red Cat.prototype.color = 'blue'; console.log(cat.color); //blue
console.log(dog.color); //blue
console.log(Animal.prototype.color); //blue //修正:将SubType的原型指向temp的一个临时创建的实例 function Animal(){
this.species = 'animal';
} Animal.prototype.color = 'red'; function Cat(){
Animal.call(this);
this.meow = 'meowmeowmeow';
} var temp = function(){}; temp.prototype = Animal.prototype;
var tempInstance = new temp();
tempInstance.constructor = Cat; Cat.prototype = tempInstance; var cat = new Cat(); console.log(cat.color); //red
console.log(Animal.prototype.color); //red Cat.prototype.color = 'blue'; console.log(cat.color); //blue
console.log(Animal.prototype.color); //red

JavaScript对寄生组合式继承的理解的更多相关文章

  1. JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  2. JavaScript寄生组合式继承分析

    JavaScript寄生组合式继承特点: 避免了在子类prototype上创建不必要多余的属性,相比直接继承基类的实例效率要高. 是JavaScript 实现继承的最有效方式. <script& ...

  3. javascript中的继承-寄生组合式继承

    前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...

  4. JavaScript高级程序设计之寄生组合式继承

    在继承中常会出现两个问题: 父类的属性变成了子类的原型 构造器指向混乱 寄生组合式继承解决了这样的问题: 属性继承到属性 原型继承到原型 构造器指向明确 // 父类 var Super = funct ...

  5. javaScript设计模式之面向对象编程(object-oriented programming,OOP)--寄生组合式继承

    组合式继承:将类式继承同构造函数继承组合使用,但是存在一个问题,子类不是父类的实例,而子类的原型式父类的实例,所以才有了寄生组合式继承. 意思就是说,寄生就是寄生式继承,寄生式继承就是依托于原型继承, ...

  6. [js高手之路]寄生组合式继承的优势

    在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){ this.skills = [ 'php', ...

  7. js组合继承和寄生组合式继承比较

    本文是原创文章,如需转载,请注明文章出处 1.js中实现组合继承(B继承A): function A(name){ this.name = name; this.ary = ["AA&quo ...

  8. 详解js中的寄生组合式继承

    寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上.       2. ...

  9. 寄生组合式继承 js

    寄生组合式继承是集寄生式继承和组合继承的优点于一身,是基于类型继承最有效的方式 function object(o){ function F(){}; F.prototype = o; return ...

随机推荐

  1. 一个asp采集程序

    <% if request.QueryString="" then url="http://www.hbcz.gov.cn:7001/XZQHQueryWAR/xx ...

  2. 使用maven打包的注意事项

    maven编译项目的时候,默认使用的GBK,而目前大部分代码都使用的UTF-8的方式,所以这时候打出来的包容易出现乱码. 解决方式: <!-- compiler插件, 设定JDK版本 --> ...

  3. T-SQL 语句的理解

    1.T-SQL中各子句在逻辑上按照以下顺序进行处理 . . . .. .ORDER BY 查询实例: SELECT EMPID, YEAR(ORDERDATE) AS ORDERYEAR, COUNT ...

  4. (原)android补间动画(四)之插补器Interpolator

    比如说一段旋转动画 RotateAnimation animation = new RotateAnimation(0, 360, mMoveCircle.getMeasuredWidth() / 2 ...

  5. 【Network】高性能 UDP 应该怎么做?

    参考资料: EPOLL-UDP-GOLANG golang udp epoll - Google 搜索 go - golang: working with multiple client/server ...

  6. Java、JVM模型

    程序计数器:记录当前线程的执行位置(便于CPU切换线程的时候执行) 虚拟机栈:Java方法,方法从调用到执行完成对应一个栈帧从虚拟机栈入栈到出栈的过程. 本地方法区:Native方法(C++) 方法区 ...

  7. (转: daifubing的博客 )Delphi二维码中文支持、分组、批量打印经验小结

    一直也没接触到什么复杂的报表,都是一些简单的报表,在DelphI下使用QuickReport一般也就能满足需要了,由于公司现在需求的变化,对条码扫描提出了新的要求,主要是扫码要包含更多地内容,以前的一 ...

  8. jquery 控件赋值

    input 文本框赋值$("#id").attr("赋值"); input 文本框清空$("#id").attr("") ...

  9. 编译带有PROJ4和GEOS模块的GDAL

    1.下载三个软件的源代码(去各自官网下载即可) 2.将PROJ4和GEOS的源码放到GDAL目录下的supportlibs文件夹中. 3.修改GDAL的nmake.opt文件,部分内容如下: # Un ...

  10. Android 某些配置记录

    1, system image 大小配置: devices/intel/baytrail/ffrd8/BoardConfig.mk :  BOARD_SYSTEMIMAGE_PARTITION_SIZ ...