[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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
详解JavaScript中的坐标和距离
May 27 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
文本加密解密
2006/06/23 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python3数字求和的实例
2019/02/19 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
擅自离岗检讨书
2014/02/11 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
优秀护士事迹材料
2014/12/25 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
比较几种Redis集群方案
2021/06/21 Redis