JavaScript组合继承详解


Posted in Javascript onNovember 07, 2021

1、前言

首先学习继承之前,要对原型链有一定程度的了解。

不了解可以去先阅读我另一篇文章,里面对原型链有一个较为详细的说明:JavaScript 原型链详解。

如果已经了解请继续。

之前写过一篇博文将继承方式全部列出来了,不过我发现一口气看完过于长了,也不利于吸收知识,所以我先将组合继承部分划分出来,后续会把寄生部分补上。

2、原型链继承

父类实例作为子类的原型
子类创造的两个实例的隐式原型__proto__指向父类的那个实例
而父类的实例的隐式原型__proto__又指向父类的原型father.prototype
根据原型链的特性,所有子类的实例能够继承父类原型上的属性。

阅览以下这张图可以配合代码理解清晰:

JavaScript组合继承详解

   

//父类
    function father() {
      this.fatherAttr = ["fatherAttr"];
    }
    
    //父类的原型上的属性
    father.prototype.checkProto = "checkProto";

    //子类
    function child() {}

    // 将father实例作为child这个构造函数的原型
    child.prototype = new father();
    child.prototype.constructor = child;

    //两个子类实例
    const test1 = new child();
    const test2 = new child();

    console.log("测试1:");
    console.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("测试2:");
    test1.fatherAttr.push("newAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("测试3:");
    console.log("test1.checkProto:", test1.checkProto);

JavaScript组合继承详解

特点:

  • 两个实例对象都没有fatherAttr属性,但是因为父类的实例会拥有fatherAttr属性,且现在父类的实例作为child的原型,根据原型链,他们可以共享到自己的构造函数child的原型上的属性。(测试1)
  • 因为只有一个父类的实例作为他们的原型,所以所有实例共享了一个原型上的属性fatherAttr,当原型上的属性作为引用类型时,此处是数组,test1添加一个新内容会导致test2上的fatherAttr也改变了。(测试2)(缺点)
  • child构造函数不能传递入参。(缺点)
  • 实例可以访问到父类的原型上的属性,因此可以把可复用方法定义在父类原型上。(测试3)

3、构造函数继承

将父类上的this绑定到子类,也就是当子类创造实例时会在子类内部调用父类的构造函数,父类上的属性会拷贝到子类实例上,所以实例会继承这些属性。

//父类
    function father(params) {
      this.fatherAttr = ["fatherAttr"];
      this.params = params;
    }

    //父类的原型上的属性
    father.prototype.checkProto = "checkProto";

    //子类
    function child(params) {
      father.call(this, params);
    }

    //两个子类实例
    const test1 = new child("params1");
    const test2 = new child("params2");

    console.log("测试1:");
    console.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("测试2:");
    test1.fatherAttr.push("newAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);
    
    console.log("测试3:");
    console.log("test1.checkProto:", test1.checkProto);

JavaScript组合继承详解

特点:

  • 两个实例对象都拥有了拷贝来的fatherAttr属性,所以没有共享属性,创造一个实例就得拷贝一次父类的所有属性,且因为不能继承父类原型,所以方法不能复用,被迫拷贝方法。(测试1)(缺点)
  • test1添加一个新内容只是改变了test1自己的属性,不会影响到test2。(测试2)
  • child构造函数可以传递参数,定制自己的属性。(测试1)
  • 实例不能继承父类的原型上的属性。(测试3)(缺点

4、组合继承

结合原型链继承和构造函数继承,可以根据两种继承特点进行使用。

//父类
    function father(params) {
      this.fatherAttr = ["fatherAttr"];
      this.params = params;
    }

    //父类的原型上的属性
    father.prototype.checkProto = "checkProto";

    //子类
    function child(params) {
      //第二次调用了父类构造函数
      father.call(this, params);
    }

    // 将father实例作为child构造函数的原型
    child.prototype = new father();//第一次调用了父类构造函数
    child.prototype.constructor = child;

    //两个实例
    const test1 = new child("params1");//从这里跳转去子类构造函数第二次调用了父类构造函数
    const test2 = new child("params2");

    console.log("测试1:");
    console.log("test1:", test1);
    console.log("test2:", test2);
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("测试2:");
    test1.fatherAttr.push("newAttr");
    console.log("test1.fatherAttr:", test1.fatherAttr);
    console.log("test2.fatherAttr:", test2.fatherAttr);

    console.log("测试3:");
    console.log("test1.checkProto:", test1.checkProto);

    console.log("测试4:");
    delete test1.fatherAttr
    console.log("test1:", test1);
    console.log("test1.fatherAttr:", test1.fatherAttr);

JavaScript组合继承详解

特点:

  • 两个实例对象都拥有了拷贝来的fatherAttr属性,创造一个实例就得拷贝一次父类的所有属性(构造函数继承特点,测试1),但是能访问父类原型,可以把复用方法定义在父类原型上。(原型链继承特点,测试1)
  • test1添加一个新内容只是改变了test1自己的属性,不会影响到test2。(构造函数继承特点,测试2)
  • child构造函数可以传递参数,定制自己的属性。(构造函数继承特点,测试1)
  • 实例能继承父类的原型上的属性。(原型链继承特点,测试3)
  • 调用了两次父类的构造函数,生成两份实例,创建子类原型链一次,用子类创建实例时,子类内部里面一次,第二次覆盖了第一次。(缺点)
  • 因为调用两次父类构造函数,如果用delete删除实例上拷贝来的fatherAttr属性,实例仍然拥有隐式原型指向的父类实例上的fatherAttr属性。(原型链继承特点,测试4)(缺点)

到此这篇关于JavaScript组合继承详解的文章就介绍到这了,更多相关JavaScript组合继承内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
WebWorker 封装 JavaScript 沙箱详情
quickjs 封装 JavaScript 沙箱详情
Nov 02 #Javascript
You might like
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
2014年团委工作总结
2014/11/13 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
详解Python内置模块Collections
2022/03/22 Python