[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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js中有关IE版本检测
Jan 04 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
继续学习javascript闭包
Dec 03 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
使用python Django做网页
2013/11/04 Python
python处理大数字的方法
2015/05/27 Python
浅谈Python基础之I/O模型
2017/05/11 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python实现代码统计工具
2019/09/19 Python
Python模块相关知识点小结
2020/03/09 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
20岁生日感言
2014/01/13 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
教师个人年度总结
2015/02/11 职场文书
工作感想范文
2015/08/07 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
教你nginx跳转配置的四种方式
2022/07/07 Servers