[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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
js中的面向对象入门
Mar 06 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 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
CodeIgniter CLI模式简介
2014/06/17 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python tkinter基本属性详解
2019/09/16 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
购买大码女装:Lane Bryant
2016/09/07 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
食堂个人先进事迹
2014/01/22 职场文书
运动会稿件50字
2014/02/17 职场文书
廉洁自律承诺书
2014/03/27 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
十八大标语口号
2014/10/09 职场文书
销售辞职信范文
2015/03/02 职场文书
鲁冰花观后感
2015/06/10 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery