javascript 7种继承-- 组合式继承分析(3)

文章目录

    • 概要
    • 继承的进化史
    • 组合式继承
    • 案列分析
    • 源代码解析
    • 效果图
      • 数据不会混乱
      • 可以继承父类原型对象
      • 新BUG
    • 小结

概要

这阵子在整理JS的7种继承方式,发现很多文章跟视频,讲解后都不能让自己理解清晰,索性自己记录一下,希望个位发表需要修改的意见,共勉之。
部分文章总结出来的数据可能是错误的,网络上太多数据了,有些不严谨,当然我也可能是其中一人,如果有问题,欢迎提出来,共同进步。

继承的进化史

JS的7种并不是逐级进化的(个人觉得~),可以参考下图:

在这里插入图片描述

组合式继承

在讲解组合式之前,可以先大概了解一下原型链继承以及构造函数继承的缺点。

  1. 原型链继承的缺点:子类实例操作复合数据类型,比如对象、函数、数组,数据之间会相互影响,因为原型链上保存的是一个指针,指向同一片区域。
  2. 构造函数继承的缺点:子类是通过调用父类的构造函数,并且通过apply()或bind()或call() 等方法,将父类作用域改成子类,从而实现继承,所以子类无法继承父类原型链上的属性以及方法。

没有看过原型链继承以及构造函数继承的同学,可以先去文章上方的专栏先行观看,了解。

组合式继承就是将原型链继承以及构造函数继承一起实现,以达到继承的目的,并且不会引起数据的混乱,也可以继承父类的原型对象的属性以及方法。

案列分析

  • 父类:Parent,要被继承的类,可以理解为人。
  • 子类:Children,要继承父类的类,可以理解为不同的工种,但是还是一个人,所以继承了父类的一些基础属性。
  • 实例:person1 ,person2,实例化的子类,一般实例化后数据就分开了,复合数据类型要注意…

父类的数据以及方法要给子类继承,通过了子类构造函数继承的原理,实例化子类的时候,调用父类构造函数,并且将作用域指向子类实例。
Parent.call(this, name, age, dataA, dataB);
父类的数据以及方法要给子类继承,通过了JS的原型链的原理,将子类的prototype,指向了实例化的父类。
Children.prototype = new Parent();

父类属性:

  1. name:公共属性,每个人都有名字 基础数据类型
  2. age:公共属性,每个人都有年龄 基础数据类型
  3. data:公共属性,个人的一些数据 复合数据类型,可以理解为个人的收藏,有人喜欢红酒,有人喜欢首饰,需要注意,有时候误操作会影响到其他实例,因为它存放的是一个地址 这里主要是跟原型链继承对比,原型链继承这里有BUG。
  4. sayName:父类公共方法
  5. sayData:父类公共方法,用来打印等下误操作的数据问题,打印BUG的地方…
  6. sayAge:父类原型对象上的方法 主要是为了跟构造函数继承对比,构造函数的缺点就是无法使用原型链上的数据...

源代码解析

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组合式继承解析title>
  head>
  <body>
    <h3>组合式继承解析h3>
    <h4>由于要打印原型对象,在浏览器操作比较方便,就用了html文件。h4>
    <script>
      /*
       * @Author: Penk是个码农
       * @Date: 2023-07-24 10:40:46
       * @Last Modified by: Penk是个码农
       * @Last Modified time: 2023-07-24 11:37:02
       * @Desc: 组合式继承解析
       */

      /**
       * 父类:Parent,要被继承的类
       * 子类:Children,要继承父类的类
       * 实例:person1 ,person2,实例化的子类,一般实例化后数据就分开了,复合数据类型要注意...
       *
       * 构造函数:构造函数也称之为构造器(constructor),通常是我们在创建对象时会调用的函数。
       *          在其他面向的编程语言里面,构造函数是存在于类中的一个方法。
       *          虽然es6 中的class也是解决了旧的JS继承方式,但是无奈考官要提问,只能记住了 :) ...
       * 原型:原型就是一个对象,也叫原型对象,不同的人叫法不一样,很容易搞懵逼初学者,原型===原型对象
       * 原型链:就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构,称为原型链。
       * prototype:子类构造函数 所指向的原型(实例化的父类)。
       *            Children.prototype = new Parent(); 这个是手动指向
       * __proto__:子类实例对象 所指向的原型(实例化的父类)。 这个是new 操作符里面的操作
       */

      // 父类
      function Parent(name, age, dataA, dataB) {
        console.warn("Parent 实例化了...");
        // 基本数据类型
        this.name = name;
        this.age = age;
        // 复合数据类型
        this.data = { a: dataA ? dataA : "a", b: dataB ? dataB : "b", c: "c" };

        // 父类内部方法
        this.sayName = function () {
          console.log("我的名字:", this.name);
        };

        // 全局的关键是看这个...原型链的bug在这里
        this.sayData = function () {
          // 这里还不能直接打印对象出来,因为是一个指针,总是指向最新的数据...
          console.log("我的数据如下:");
          console.dir(this.data.a);
          console.dir(this.data.b);
          console.dir(this.data.c);
        };
      }

      // 父类原型链方法 (这个跟原型链继承只有半毛钱关系...)
      Parent.prototype.sayAge = function () {
        console.log("我的年龄:", this.age);
      };

      // 子类,不同工种
      function Children(name, age, dataA, dataB, job) {
        // 原型链继承无法通过super 传递给父类,只能通过覆盖的形式了
        Parent.call(this, name, age, dataA, dataB);
        this.job = job;
        this.sayJob = function () {
          console.log("我的工作:", this.job);
        };
      }

      // 原型链继承,构造函数的原型,是一个对象,才会在内存在分配空间,所以是需要实例化的。
      // 这边只写了一个子类,如果是多个子类,其实就会实例化多个原型对象,一般数据不会相互影响,除了复合数据类型,这边不进行验证...
      Children.prototype = new Parent();

      console.log("===person1...");
      let person1 = new Children(
        "钟先生",
        33,
        "person1A",
        "person1B",
        "程序员"
      );
      // 基本数据类型
      person1.sayName();
      person1.sayAge();
      person1.sayJob();
      // 复合数据类型
      person1.sayData();

      console.log("===person2...");
      let person2 = new Children(
        "刘小姐",
        18,
        "person2A",
        "person2B",
        "清洁阿姨"
      );
      // 基本数据类型
      person2.sayName();
      person2.sayAge();
      person2.sayJob();
      // 复合数据类型
      person2.sayData();

      console.log("===重新打印person1,不用实例化,看看person1会不会被影响...");
      // 基本数据类型
      person1.sayName();
      person1.sayAge();
      person1.sayJob();
      // 复合数据类型
      person1.sayData();
      console.log(
        "===可以看出,基本数据类型不会被影响到,但是复合数据类型出事了..."
      );

      console.dir(person1);
    script>
  body>
html>



效果图

数据不会混乱

javascript 7种继承-- 组合式继承分析(3)_第1张图片

可以继承父类原型对象

javascript 7种继承-- 组合式继承分析(3)_第2张图片

新BUG

其实也没什么问题,就是构造函数调用次数=n+1次,有些强迫症的人也解决了这个问题,就是寄生组合式继承的方式。
如果父类对象很大,对于内存影响还是挺大的。

javascript 7种继承-- 组合式继承分析(3)_第3张图片

小结

组合式继承,通过原型链继承以及构造函数继承,解决了原型链继承数据混乱问题,以及构造函数无法使用父类原型的方法和属性的问题。但是又产生了新问题,就是会多初始化一次,不过也可以从这里看出来,原型链在某些场景还是挺好的,只会触发一次父类,只要设计的时候,不会修改复合数据类型的话,对于一些大型应用还是挺关键的。

你可能感兴趣的:(JS,7种继承方式,javascript,原型模式,开发语言)