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


Posted in Javascript onAugust 28, 2017

在之前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高手之路]寄生组合式继承的优势详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
使用JavaScript破解web
Sep 28 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 #Javascript
js排序与重组的实例讲解
Aug 28 #Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 #Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 #Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 #Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 #Javascript
vue下跨域设置的相关介绍
Aug 26 #Javascript
You might like
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
关于Java finally的面试题
2016/04/27 面试题
会计专业推荐信
2013/10/29 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
城市创卫标语
2014/06/17 职场文书
球队口号
2014/06/18 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
担保书范文
2019/07/09 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers