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扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
详细聊聊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
用PHP4访问Oracle815
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Servlet的生命周期
2013/08/25 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
个性与发展自我评价
2014/02/11 职场文书
建筑工地大门标语
2014/06/18 职场文书
环境日宣传活动总结
2014/07/09 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL