[js高手之路]寄生组合式继承的优势详解

 更新时间:2017年08月28日 07:58:54   投稿:jingxian  
下面小编就为大家带来一篇[js高手之路]寄生组合式继承的优势详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在之前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高手之路]寄生组合式继承的优势详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js Array.slice的8种不同用法示例

    js Array.slice的8种不同用法示例

    这篇文章主要给大家介绍了关于js Array.slice的8种不同用法,文中通过示例代码介绍的非常详细,对大家学习或者使用js 具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • JS+CSS实现的竖向简洁折叠菜单效果代码

    JS+CSS实现的竖向简洁折叠菜单效果代码

    这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • javascript元素动态创建实现方法

    javascript元素动态创建实现方法

    这篇文章主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 小程序统计来源信息的方案与具体代码

    小程序统计来源信息的方案与具体代码

    微信小程序数据统计,现在有很多的统计方法和统计工具,下面这篇文章主要给大家介绍了关于小程序统计来源信息的方案与具体代码,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • javascript轻松控制表格列样式的脚本代码

    javascript轻松控制表格列样式的脚本代码

    javascript轻松控制表格列样式的脚本代码通过遍历table表格元素并动态设置其class属性,实现表格样式动态控制的功能,需要的朋友可以参考一下
    2007-12-12
  • javascript实现QQ空间相册展示源码

    javascript实现QQ空间相册展示源码

    本文给大家分享基于javascript制作的qq空间相册展示效果,涉及到html\css布局思维,浮动定位详解,具体实现代码大家参考下本文
    2017-12-12
  • js实现表格拖动选项

    js实现表格拖动选项

    这篇文章主要为大家详细介绍了原生js实现表格拖动选项,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript错误处理和调试方法详解

    JavaScript错误处理和调试方法详解

    代码审查是调试JavaScript的重要方法,因为它允许多个开发人员一起处理代码库并在开发过程的早期发现错误,这篇文章主要给大家介绍了关于JavaScript错误处理和调试方法的相关资料,需要的朋友可以参考下
    2023-11-11
  • 一文总结JavaScript中常见的设计模式

    一文总结JavaScript中常见的设计模式

    在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”。,本文将总结了JavaScript中常见的十五种设计模式,感兴趣的朋友可以参考下
    2023-05-05
  • ie8本地图片上传预览示例代码

    ie8本地图片上传预览示例代码

    ie8本地图片上传预览出现问题是因为限制浏览器造访本地文件,所以用到滤镜和div,下面有个不错的示例,希望对大家有所帮助
    2014-01-01

最新评论