z参考:js 六种继承方式介绍及优缺点

1、原型链继承 --- 优点:写法简单、容易理解。缺点:

        ①引用类型的值会被所有实例共享;

        ②在子类实例对象创建时,不能向父类传参;

2、借用构造函数继承 --- 优点:

        ①避免了引用类型的值会被所有实例共享;

        ②在子类实例对象创建时,可以向父类传参;缺点:方法在构造函数中,每次创建实例对象时都会重新创建一遍方法;

3、组合继承 --- 融合原型链和借用构造函数的优点,是js中最常用的继承方式;缺点:无论什么情况下,父类构造函数都会被调用两次,一是创建子类原型对象时,二是子类构造函数内部。

4、原型式继承 --- 优点:不需要单独创建构造函数;缺点:引用类型的值会被所有实例共享。

5、寄生式继承 --- 优点:不需要单独创建构造函数;缺点:方法在构造函数中,每次创建实例对象时都会重新创建一遍。

6、寄生组合继承 --- 优点:高效率只调用一次父类构造函数,并且避免了子类原型对象上不必要、多余的属性,同时,还能将原型链保持不变,因此能使用instanceof 和 isPrototypeOf。缺点:代码复杂

以下6种也只是对原型和构造函数通过不同的技巧实现的继承

  1. 原型链继承
  2. 构造函数继承
  3. 组合继承
  4. 原型式继承
  5. 寄生继承
  6. 寄生组合继承

1.原型链继承

        缺点:Parent 中的引用属性会被每个子类示例共享

//原型链继承
function Parent() {
    this.parentPrototype = "parent prototype"
    //验证这种继承方法的确定,如果父类示例中存在一个引用类型的属性,将会被所有子类共享
    this.parentObj = {
        info: "我是 parent 引用属性parentObj中的 info"
    }
}

function Children() {}
//将Children的原型对象指定为Parent的示例,通过原型链,将Parent中的属性赋值给Children示例
Children.prototype = new Parent();
const a = new Children();
console.log(a.parentPrototype); // parent prototype
//缺点
const b = new Children();
//在a示例中改动继承的引用属性
a.parentObj.info = "我是a示例中 引用属性parentObj中的 info"
//b与a示例共享引用属性
console.log(b.parentObj.info); // 我是a示例中 引用属性parentObj中的 info

2.构造函数继承


      1.避免了子类示例共享引用属性的情况

      2. 可以在实例化时给Parent构造函数传递参数

    缺点:

                      如果Parent中存在一个函数,那么每次实例化Children的时候,都会创建一个同样函数,函数的复用性就难以体现

function Parent() {
    this.parentPrototype = "parent prototype"
    this.obj = {
        info: "parent obj info"
    }
    this.fn = function () {
        console.log("打印功能")
    }

}

function Children() {
    Parent.call(this);
}

const a = new Children();
console.log(a.parentPrototype); // parent ptototype

//缺点 此时Parent()会再次创建一个fn函数,这个是没有必要的
const b = new Children();
a.obj.info = "a obj info";
//优点 避免了子类实例共享引用属性
console.log(b.obj.info) // parent obj info;

3.组合继承(原型继承+构造继承)

 优点:1 避免了子类共享引用属性同时避免了父类构造函数重复对function属性的创建

function Parent() {
    this.parentPrototype = "我是Parent 中的属性"
}
//Parent中的方法,在原型上定义
Parent.prototype.pFn = function () {
    console.log('我是Parent中的方法');
}

function Children() {
    //Parent中的属性仍然在构造函数中继承
    Parent.call(this);
}
//将Children的原型对象赋值为 Parent实例,这样Parent中的方法也能够被Children继承
Children.prototype = new Parent();
const c = new Children();
console.log(c.parentPrototype); //我是Parent 中的属性
c.pFn(); //我是Parent中的方法

4.原型式继承(注意:是原型式而非原型链,这种方法使用较少)

缺点:和原型链继承一样,后代实例会共享父类引用属性

function objFn(o) {
    o.objFnPrototype = "我是 objFnPrototype"
    function F() {}
    F.prototype = o;
    return new F();
}

let a = objFn({
    name: "name1"
});
console.log(a.name); //name1
console.log(a.objFnPrototype); //我是 objFnPrototype

5.寄生式继承(个人感觉就是定义了一个方法,复制了一个对象,让后在复制的对象上添加属性和方法,然后return)

缺点:1和原型链继承一样,parent中的引用属性,会被所有示例共享

function createObje(obj) {
    let clone = Object.assign(obj); //接受到对象后,原封不动的创建一个新对象
    clone.prototype1 = "我是新增的prototype1"; //在新对象上新增属性,这就是所谓的寄生
    return clone; //返回新对象
}
const parent = {
    parentPrototype: "parentPrototype"
}
//c实例,就继承了parent的所有属性
let c = createObje(parent);
console.log(c.parentPrototype); //parentPrototype

6.寄生组合式继承 (寄生+组合(原型链+借用构造函数))

两种方法,方便理解的demo

缺点:和组合继承一样,只不过没有组合继承的调用两次父类构造函数的缺点

function inherProto(superType, subType) {
    //拷贝一个超类的原型副本
    let proto = {
        ...superType.prototype
    };
    //将原型的超类副本作为子类的原型对象,也就是第一种中的原型链继承方式,只不过继承的是超类原型的副本
    subType.prototype = proto;
    //这一步比较迷,官方的说法是,我们在拷贝超类的原型的时候,拷贝的proto对象,将会丢失默认自己的构造函数,也就是superType,
    //所以我们这里将它的构造函数补全为subType。貌似不做这一步也没啥问题,但是缺了点东西可能会有其他的副作用,所以还是补上
    proto.constructor = subType;

}

function Super() {
    this.superProto = "super proto";
    this.colors = ["red", "yelloy"];
}

function Sub() {
    this.subProto = "sub proto";
    this.name = "sub name";
    //这里还是借用构造函数的套路
    Super.call(this);
}
Super.prototype.getName = function () {
    console.log(this.name);
}
//这里要在定义完Super的属性后执行,因为继承的是超类原型的副本,与Super.prototype是两个对象,在这之后再改变Super.prototype,就已经不会在影响到Sub所继承的副本超类原型对象了
inherProto(Super, Sub);

let a = new Sub();
console.log(a.getName);

 这个demo是牛客网的试题:

  1. 在"Human"构造函数的原型上添加"getName"函数
  2. 在”Chinese“构造函数中通过call函数借助”Human“的构造器来获得通用属性
  3. Object.create函数返回一个对象,该对象的__proto__属性为对象参数的原型。此时将”Chinese“构造函数的原型和通过Object.create返回的实例对象联系起来
  4. 最后修复"Chinese"构造函数的原型链,即自身的"constructor"属性需要指向自身
  5. 在”Chinese“构造函数的原型上添加”getAge“函数
function Human(name) {
    this.name = name
    this.kingdom = 'animal'
    this.color = ['yellow', 'white', 'brown', 'black']
}
Human.prototype.getName = function() {
    return this.name
}
function Chinese(name,age) {
    Human.call(this,name)
    this.age = age
    this.color = 'yellow'
}
Chinese.prototype = Object.create(Human.prototype)
Chinese.prototype.constructor = Chinese
Chinese.prototype.getAge = function() {
    return this.age
}