[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 动态加载 css 方法总结
Jul 11 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
Vue.use源码学习小结
Jun 20 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php面向对象重点知识分享
2019/09/27 PHP
如何在PHP中读写文件
2020/09/07 PHP
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
老生常谈angularjs中的$state.go
2017/04/24 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python3.6的venv模块使用详解
2018/08/01 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
结束运行python的方法
2020/06/16 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
华为的Java面试题
2014/03/07 面试题
.NET现在共支持多少种语言
2014/02/26 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
英语感恩演讲稿
2014/01/14 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
退休感言
2014/01/28 职场文书
刊首寄语大全
2014/04/11 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
园林技术专业求职信
2014/07/28 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
js不常见操作运算符总结
2021/11/20 Javascript