[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.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
实用的Vue开发技巧
May 30 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
Vue指令实现OutClick的示例
Nov 16 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python如何修改文件时间属性
2021/02/05 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
工作经常出错的检讨书
2014/09/13 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
农村老人去世追悼词
2015/06/23 职场文书
golang的文件创建及读写操作
2022/04/14 Golang
centos7安装mysql5.7经验记录
2022/05/02 Servers