[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查看html源文件
Nov 08 Javascript
关于js datetime的那点事
Nov 15 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js表头排序实现方法
Jan 16 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 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
第二节 对象模型 [2]
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
详解PHP归并排序的实现
2016/10/18 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JS中的BOM应用
2018/02/02 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
vc6编写python扩展的方法分享
2014/01/17 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python读写csv文件实例代码
2019/07/05 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
行政专员求职信范文
2014/05/03 职场文书
啤酒节策划方案
2014/05/28 职场文书
专科生就业求职信
2014/06/22 职场文书