当前位置:首页 > 日记 > 正文

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

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

在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承:

function Person( uName ){      this.skills = [ 'php', 'javascript' ];      this.userName = uName;    }    Person.prototype.showUserName = function(){      return this.userName;    }    function Teacher ( uName ){      Person.call( this, uName );    }    Teacher.prototype = new Person();    var oT1 = new Teacher( 'ghostwu' );    oT1.skills.push( 'linux' );    var oT2 = new Teacher( 'ghostwu' );    console.log( oT2.skills ); //php,javascript    console.log( oT2.showUserName() ); //ghostwu

组合继承有个缺点,父类的构造函数会被调用两次.

第11行,设置子类原型对象(prototype),调用了第一次

第9行,实例化对象的时候,又调用一次

构造函数的目的是为了复制属性,第9行肯定是不能少的,第11行的目的是为了获取到父类原型对象(prototype)上的方法,基于这个目的,有没有别的方法

可以做到 在不需要实例化父类构造函数的情况下,也能得到父类原型对象上的方法呢? 当然可以,我们可以采用寄生式继承来得到父类原型对象上的方法

function Person( uName ){      this.skills = [ 'php', 'javascript' ];      this.userName = uName;    }    Person.prototype.showUserName = function(){      return this.userName;    }    function Teacher ( uName ){      Person.call( this, uName );    }    function object( o ){      var G = function(){};      G.prototype = o;      return new G();    }    function inheritPrototype( subObj, superObj ){      var proObj = object( superObj.prototype ); //复制父类superObj的原型对象      proObj.constructor = subObj; //constructor指向子类构造函数      subObj.prototype = proObj; //再把这个对象给子类的原型对象    }    inheritPrototype( Teacher, Person );    var oT1 = new Teacher( 'ghostwu' );    oT1.skills.push( 'linux' );    var oT2 = new Teacher( 'ghostwu' );    console.log( oT2.skills ); //php,javascript    console.log( oT2.showUserName() ); //ghostwu

其实,说白了寄生组合式继承就是一个借用构造函数 + 相当于浅拷贝父类的原型对象

以上这篇[js高手之路]寄生组合式继承的优势详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

word2016文档如何能够批量保存

word2016文档如何能够批量保存

文档,保存图片,批量,电脑软件,  word中有很多图片,一个一个的保存下来很费时间,那么word2016怎么批量保存图片。以下是小编为您带来的关于word2016文档批量保存图片,希望对您有所帮助。word2016文档批量保存图片打开word文档之后,点击命令栏…

PS中隐藏的小技巧:移动和缩放的使

PS中隐藏的小技巧:移动和缩放的使

缩放,小技巧,使用技巧,详解,电脑软件,设计师的每一天基本都在和PS打交道,然而你真正了解过PS中隐藏的小技巧吗?总有你不知道一些小技巧,这些技巧可极大的提升你的工作效率,下面一起来学习吧。适用对象:童叟无欺、老少皆宜有任何疑问,可留言交流1…

powerpoint幻灯片无法全屏播放怎么

powerpoint幻灯片无法全屏播放怎么

全屏,方法,幻灯片,电脑软件,powerpoint,  我们在使用ppt的时候,偶尔会出现不能全屏放映的问题,对于这样的问题,我们应该如何解决呢?下面就让小编告诉你如何解决ppt不能全屏放映问题,希望小编收集的资料对大家有帮助?解决ppt不能全屏放映问题…

React-Native 组件之 Modal的使用

React-Native 组件之 Modal的使用

组件,详解,电脑软件,React,Native,Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。属性Modal提供的属性有:animationType(动画类型) PropTypes.oneOf([‘none', ‘slide', ‘fad…

PS怎么使用滤镜给制作油画效果?

PS怎么使用滤镜给制作油画效果?

滤镜,效果,电脑软件,PS,在使用图像处理软件Photoshop时,新学者有时制作一张油画效果的图片。那么,PS中如何对图片如何制作出油画效果?作为制作出油画效果操作实例,这里用一张卡通风景的图片进行油画效果的制作。参考以下几个步骤。就很快可以在…

wps中怎么取消只读模式教程

wps中怎么取消只读模式教程

只读,取消,模式,教程,方法,  我们都知道可以在wps文字中设置文档为只读模式,如果我们想取消只读模式,应该怎样取消呢?对于新手来说还是有一定难度,怎么办?下面就让小编告诉你在wps文字中怎样取消只读模式的方法,希望对大家有所帮助。wps取消…

CDR怎么设计中国风的水墨字体效果?

CDR怎么设计中国风的水墨字体效果?

字体,国风,水墨,效果,电脑软件,想要设计中国风海报,那么水墨字体是必不可少的,该怎么制作水墨字体效果呢?请看下文详细介绍。软件名称:CorelDRAW X8 64位 简体中文安装免费版(附序列号)软件大小:547.9MB更新时间:2016-11-23步骤1:使用“文本…

移动端效果之Swiper详解

移动端效果之Swiper详解

移动端,详解,效果,电脑软件,Swiper,写在前面最近在做移动端方面运用到了饿了么的vue前端组件库,因为不想单纯用组件而使用它,故想深入了解一下实现原理。后续将会继续研究一下其他的组件实现原理,有兴趣的可以关注下。代码在这里:戳我1. 说明父…

JS 判断某变量是否为某数组中的一

JS 判断某变量是否为某数组中的一

变量,种方法,组中,电脑软件,JS,1.正则表达式js 中判断某个元素是否存在于某个 js 数组中,相当于 PHP 语言中的 in_array 函数。Array.prototype.in_array=function(e){var r=new RegExp(','+e+',');return (r.test(','+this.join(this…

怎么使用快速表格库中的表格向Word

怎么使用快速表格库中的表格向Word

表格,库中,快速,电脑软件,Word,  Word 2013提供了一个“快速表格”库,用户可以将经常使用的表格添加到这个库中,从而使已经完成样式设定的表格能够重复使用,而不必每次重新建立。以下是小编为您带来的关于使用快速表格库中的表格…

简单实现jQuery手风琴效果

简单实现jQuery手风琴效果

简单实现,手风琴,效果,电脑软件,jQuery,本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下js代码:<script type="text/javascript" src="jquery-3.0.0.js"></script><script type="text/javascript"> $…

jquery网页加载进度条的实现

jquery网页加载进度条的实现

网页,进度条,加载,电脑软件,jquery,本次主要介绍一下网页加载进度的实现。如下图,在页面加载的时候,上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一…