[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 要点归纳(一) jQuery选择器
Mar 21 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
深入了解query和params的使用区别
Jun 24 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高级对象构建 工厂模式的使用
2012/02/05 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python 公共方法汇总解析
2019/09/16 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
选秀节目策划方案
2014/06/06 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
红歌会主持词
2015/07/02 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python