前端笔记七(js多重继承方式)

2019-03-14  本文已影响0人  沐雨芝录

一、call/apply结合寄生多重继承实现。

  function Parent1(name){
    this.name = name;
  }
  Parent1.prototype.say = function(){
    console.log(this.name)
  }
  Parent1.prototype.sayTwo = function(){
    console.log('加油')
  }

  function Parent2(age){
    this.age = age;
  }
  Parent2.prototype.walk = function(){
    console.log(this.age)
  }

  function Child(name, age, address){
    Parent1.call(this,name);
    Parent2.call(this,age);
    this.address = address;
  }

  function getPrototypes (prototypes) {
    for(var i in prototypes){
      var F = function () {};
      F.prototype = prototypes[i];
      Child.prototype[i] = new F();
    }
  }

  getPrototypes(Parent1.prototype)
  getPrototypes(Parent2.prototype)

  var c1 = new Child('小米',18,'火星');
  console.log(c1)

ps:其实不难理解,不明白的可以先去看我的前端笔记四(js继承的方式:精选篇),搞明白继承 是怎么回事,就很简单了。这里面主要代码就是

 Parent1.call(this,name);
 Parent2.call(this,age);

 function getPrototypes (prototypes) {}

思想就是把两个父亲方法都拿到方式实现C继承B,B继承A。


二、es6 class实现(Mixin思维)。

class Parent1 {
  say() {
    console.log('我是Parent1');
  }
}

let Parent1Mixin = (extendsClass) => class extends extendsClass {
  First() {
    console.log('First');
  }
};
let Parent2Mixin = (extendsClass) => class extends extendsClass {
  Second() {
    console.log('Second');
  }
};

class Child extends Parent2Mixin(Parent1) {
  say () {
    console.log('Child')
    if (super.say) super.say();
  }
}

let c = new Child();
console.log(c)

到底super有啥用:

  1. 在普通函数(相当于es5的prototype函数)里,使用 super.method(...) 调用父方法。
  2. 在 constructor 函数,使用 super(...) 调用父构造函数。
上一篇下一篇

猜你喜欢

热点阅读