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 应用技巧集合[推荐]
Aug 30 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详解vue项目构建与实战
Jun 27 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
PHP5中MVC结构学习
2006/10/09 PHP
php数据库连接
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
实现PHP搜索加分页
2016/10/12 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jquery实现图片预加载
2015/12/25 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python关键字and和or用法实例
2015/05/28 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python实现视频压缩功能
2020/12/18 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
MYSQL支持事务吗
2013/08/09 面试题
公司司机岗位职责范本
2014/03/03 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
小学班主任研修日志
2015/11/13 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers