[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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Javascript调用C#代码
Jan 17 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
js实现div在页面拖动效果
May 04 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
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 防恶意刷新实现代码
2010/05/16 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
一个php+js实时显示时间问题
2015/10/12 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
软件毕业生个人鉴定
2014/03/03 职场文书
相亲大会策划方案
2014/06/05 职场文书
会计求职自荐信
2014/06/20 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
销售经理岗位职责
2015/01/31 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android