526互联

extend笔记

发布时间 2023-04-22 19:13:00作者: 泡椒不辣

JavaScript面向对象

继承extend

1. 概念(主要用途)

将子类中的共性代码 ( 属性和方法 ) 抽取出来 放到父类中 每当有一个新的子类需要用到共性的属性或者方法时 不需要在自己内容复写一遍 只需要继承父类的代码

2. 继承的优点与缺点

2.1 优点

  • 实现代码复用 共性代码不需要重写 只需要继承父类即可

  • 提高了代码可维护性 (同时也是缺点) 父类中共性代码改变 子类跟随改变 子类也可以在自己的类中重写共性代码完成自己需求

  • 继承是多态的前提条件 它使得类与类之间产生了联系

2.2 缺点

  • 违反了开发原则(高内聚 低耦合) 类的耦合性增高了

  • 耦合: 类与类之间的联系

  • 内聚: 类独自完成某件事的能力

3. JS继承的方式

注意: 理解new和this是理解继承的前提

3.1 构造函数继承

使用call方法改变父类中的this指向到子类上

function Fn(name1) {
  this.name = name1;
}

function FnSon(name2) {
  Fn.call(this, name2);
  //如果子类中有父类同名属性应写在call下面
}

const fs = new FnSon('bob');
console.log(fs);
// FnSon {name: 'bob'}

特点

  • 写法简易

  • 易于做多继承

  • 只能继承构造函数内的属性和方法 无法继承构造函数原型上面的属性和方法

3.2 原型对象继承

将父类原型Prototype深拷贝给子类原型Prototype

  // 创建父类构造函数
  function Parent(n){
    this.name = n;
  }
  Parent.prototype.show = function(){
    console.log(this.name);
  }

  // 创建子类构造函数
  function Child() {}

  //将父类Prototype内容深拷贝给子类Prototype
  Child.prototype = {
    ...Parent.prototype,
    constructor: Child
    //用这种方法继承会缺失constructor 要自己指明
  }

  Child.prototype.show = function() {
    console.log('hello');
  } // 重写父类中的show方法

特点

  • 只能继承父类构造函数原型上属性和方法 不能继承构造函数内的属性和方法

  • 可以实现多继承

3.3 原型链继承

将子类构造函数的Prototype指向父类实例对象的__proto__

  function Parent(n){
    this.name = n
  }
  Parent.prototype.show = function(){
    console.log(this.name)
  }

  function Child() {}

  // 将父类的实例对象的__proto__给子类的原型
  // 如果父类有参数要传 必须在原型链继承时候就给上实参(不实用)
  Child.prototype = new Parent('hello show');

  // 在继承之前：子类构造函数的Prototype 指向 子类构造函数的Prototype
  // 完成继承之后：子类构造函数的Prototype 指向 父类实例对象的__proto__ 指向 父类构造函数的Prototype

注意： 如果把子类构造函数的Prototype直接指向父类构造函数的Prototype(浅拷贝) 那子类重写父类方法的时 父类跟随一起改变

特点

  • 既能继承构造函数内的属性和方法，又能继承原型上的属性和方法

  • 因为在继承时候就要处理参数 所以不实用

  • 不适合多继承 (原型链多继承需要用B继承A 再用C继承B 这样就可以达到多继承(C继承A和B)目的 但是会增加原型链层级)

3.4 组合(混合)继承

构造继承 + 原型继承/原型链继承

这种方法结合了单个方法的优点

 // 构造继承 + 原型继承
  function Parent(n){
    this.name = n
  }
  Parent.prototype.show = function(){
    console.log(this.name)
  }

  function Child(n){
      //  用构造继承继承父类构造函数中属性和方法
      // 弥补原型继承无法继承构造函数中属性和方法的缺点
    Parent.call(this, n);
  }
  // 用原型继承能继承父类原型中属性和方法优势
  // 弥补构造继承无法继承父类原型中属性和方法的缺点
  Child.prototype = {
    ...Parent.prototype,
    constructor: Child
    //依旧缺少constructor 要自己指明
    //constructor 是用来标记当前Prototype所属函数
  }

 // 构造继承 + 原型链继承

  function Parent(n){
    this.name = n
  }
  Parent.prototype.show = function(){
    console.log(this.name)
  }

  // 用构造继承弥补了原型链继承必须在继承时就传参的缺点
  function Child(n){
    Parent.call(this, n);
  }
  // 用原型链继承能继承父类原型中属性和方法优势
  // 弥补构造继承无法继承父类原型中属性和方法的缺点
  Child.prototype = new Parent();
  Child.prototype.constructor = Child;
  //缺少constructor 要自己指明
  //constructor 是用来标记当前Prototype所属函数

3.5 ES6新增extends继承

使用extends关键字和super(形参)来达到继承

  // ES6创建构造函数
  class Parent{
    constructor(name, age){
      this.name = name;
      this.age = age;
    }
    show(){
      console.log(this.name)
    }
  }
  // ES6extends关键字
  class Child extends Parent{
    constructor(n, a){
      // 父类又称超类
      // super 代表了父类构造函数
      // 但是返回的是子类实例
      // 即 super 内部的 this 指的是子类实例
      // 因此 super(n, a) 在这里相当于 A.prototype.constructor.call(this, n, a)
      // n a对应了父类中的name age
      super(n, a);
    }
    // 重写父类中方法
    show(){
      console.log("重写父类show方法")
    }
  }

注意

  • 如果不写super会报错 父类中没有形参 super()也不用给 super形参和父类一一对应
  • super只能在有extends的子类class中使用

4. 实例和构造函数关系检测

  • 关键字: instanceof

实例对象 instanceof 构造函数

  function Parent(){}

  function Child(){}

  // Child原型链继承parent
  Child.prototype = new Parent();
  
  const p = new Parent();

  const c = new Child();

  console.log( p instanceof Parent );
  // true
  console.log( c instanceof Child );
  // true
  console.log( c instanceof Parent );
  // true Child继承Parent
  console.log( p instanceof Child );
  // false Parent并没有继承Child
  • 原型对象方法: isProtoypeOf()

构造函数.prototype.isPrototypeOf(实例对象)

  function Parent(){}

  function Child(){}

  // Child原型链继承parent
  Child.prototype = new Parent();
  
  const p = new Parent();

  const c = new Child();

  console.log( Parent.prototype.isPrototypeOf( p ) );
  // true
  console.log( Child.prototype.isPrototypeOf( c ) );
  // true
  console.log( Parent.prototype.isPrototypeOf( c ) );
  // true Child继承Parent
  console.log( Child.prototype.isPrototypeOf( p ) );
  // false Parent并没有继承Child

只要实例对象和构造函数存在关系 无论中间隔多少层都 返回true 否则返回false

可以利用这两种方法区分对象 数组 Set Map等

  let arr = [];
  let obj = {};

  console.log(arr instanceof Array)
  // true
  console.log(Array.prototype.isPrototypeOf(arr))
  // true
  console.log(pbj instanceof Array)
  // false
  console.log(Array.prototype.isPrototypeOf(obj))
  // false
  • 万能检测方法

Object.prototype.toString.call()

 Object.prototype.toString.call("hello") 
// [object String]

注意

用instanceof和isPrototypeOf()不能检测undefined和null

这两种数据只能用万能检测法