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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
详细聊聊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 随机排序广告的实现代码
2011/05/09 PHP
深入PHP FTP类的详解
2013/06/13 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
php商品对比功能代码分享
2015/09/24 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jquery radio 操作代码
2011/03/16 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python的id()函数介绍
2013/02/10 Python
Python3基础之基本运算符概述
2014/08/13 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python的变量与赋值详细分析
2017/11/08 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
使用python生成目录树
2018/03/29 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
食堂员工工作职责
2013/12/18 职场文书
成人继续教育实施方案
2014/03/01 职场文书
白岩松演讲
2014/05/21 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技