[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为搜索栏增加tag提示
Jun 22 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Python语言描述KNN算法与Kd树
2017/12/13 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python代码需要缩进吗
2020/07/01 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
什么是GWT的Module
2013/01/20 面试题
servlet面试题
2012/08/20 面试题
高中军训感言1000字
2014/03/01 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
在校生证明
2015/06/17 职场文书
企业愿景口号
2015/12/25 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL
Python中的socket网络模块介绍
2022/07/23 Python