[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的document对象和window对象详解
Dec 30 Javascript
一个简单的js树形菜单
Dec 09 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Array.filter中如何正确使用Async
Nov 04 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
javascrpt密码强度校验函数详解
2020/03/18 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python深入学习之对象的属性
2014/08/31 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Django 路由控制的实现
2019/07/17 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Django重设Admin密码过程解析
2020/02/10 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
药店促销活动策划方案
2014/08/24 职场文书
感恩教育主题班会
2015/08/12 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android