Js继承汇总

谁借莪１个温暖的怀抱￠ 2022-09-08 15:52 120阅读 0赞

## 1、原型链继承 ##

##### 基本思想： #####

通过原型链继承多个引用类型的属性和方法

原型链扩展了原型搜素机制：在读取实例上的属性时，首先在实例上搜索这个属性，没找到则会继续搜索实例的原型，实现原型链继承之后，搜索继续向上搜索原型的原型。

//原型链继承
    function Father() { 
      this.value = "F";
    }
    Father.prototype.getFatherValue = function () { 
      return this.value;
    };
    function Son() { 
      this.value = "S";
    }
    //箭头函数会丢失this
    Son.prototype.getSonValue = function () { 
      return this.value;
    };
    Son.prototype = new Father();
    //Son.prototype.__proto__ === Father.prototype
    let son = new Son();
    console.log(son.getFatherValue()); //S

##### 注意： #####

以对象字面量方式创建原型方法会破坏之前的原型链，相当于重写了一个原型链（覆盖后的原型是一个Object的实例）

##### 问题缺陷： #####

1、原型中包含的引用值会在所有实例间共享

2、子类不能传参

## 2、盗用构造函数 ##

##### 基本思想： #####

在子类的构造函数中调用父类构造函数。使用apply、call以新创建的对象为上下文执行构造函数。

//盗用构造函数继承;
    function Father() { 
      this.value = "F";
    }
    Father.prototype.getFatherValue = function () { 
      return this.value;
    };
    function Son() { 
      Father.call(this);
      this.value = "S";
    }
    Son.prototype.getSonValue = function () { 
      return this.value;
    };
    let son = new Son();
    //console.log(son.getFatherValue()); 报错
    console.log(son.getSonValue()); //S

##### 问题缺陷： #####

1、子类不能访问父类圆形上的方法

2、所有方法都要写在构造函数中，每次创建实例都会初始化

## 3、组合继承 ##

##### 基本思想： #####

综合了原型链和盗用构造函数，集中两个的优点。

//组合继承
    function Father() { 
      this.value = "F";
    }
    Father.prototype.getFatherValue = function () { 
      return this.value;
    };
    function Son() { 
      Father.call(this);
      this.value = "S";
    }
    Son.prototype = new Father();
    Son.prototype.getSonValue = function () { 
      return this.value;
    };
    let son = new Son();

## 4、原型式继承 ##

##### 基本思想： #####

参数对象的浅复制，与原型模式类似。

## 5、寄生式继承 ##

##### 基本思想： #####

基于原型式，并增强这个对象。与构造函数模式类似。

## 6、寄生组合继承（Es6继承原理） ##

##### 基本思想： #####

创建对象、增强对象、复制对象，不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。

（使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型）

//寄生组合继承
    function Parent() { 
        this.name = 'cloud';
        this.num = [1, 2, 3];
    }
    Parent.prototype.getInfo = function() { 
        console.log(this.name);
    }
    
    function Child() { 
        Parent.call(this);
    }
    Child.prototype = new Parent();
    Child.prototype.constuctor = Child;
    let a = new Child();
    console.log(a);

##### JS继承最优方案，也是Es6中class继承的原理。 #####