JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

JavaScript组合继承详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript组合继承详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1、前言

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

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

如果已经了解请继续。

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

2、原型链继承

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

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

   

 //父类
    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);

特点：

  • 两个实例对象都没有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);

特点：

  • 两个实例对象都拥有了拷贝来的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);

特点：

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

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

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript组合继承详解全部内容，希望文章能够帮你解决JavaScript组合继承详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程