js 实现 类继承 通过super 给父级传参的效果

通过es5 实现 类继承 通过super 给父级传参的效果

先看看 原型继承

  function es5parent(name, age) {
    this.name = name;
    this.age = age;
  }

  es5parent.prototype.say = function() {
    console.log(this.name, this.age, this.sex);
  }
  
  function es5child(sex) {
    this.sex = sex;
  }
  
  es5child.prototype = new es5parent('李四',21);
  es5child.prototype.say1 = function() {
    this.say();
  }

  const es5obj = new es5child('女');
  es5obj.say1(); //输出 李四 21 女

这里 实例是无法像父构造函数传参的，在实例对象之前就已经调用了父函数

再看看 类继承, 是可以通过创建实例化对象的时候 把参数通过super传递到父类

  class parent {
    constructor(name, age){
      this.name = name;
      this.age = age;
      console.log(name, age); // 输出 张三 23
    }
    say() {
      console.log(this.name, this.age, this.sex);
    }
  }

  class child extends parent {
    constructor(name, age, sex) {
      super(name, age);
      this.sex = sex;
    }
    say1() {
      this.say();
    }
  }

  const obj = new child('张三', 23, '男');
  obj.say1(); // 输出 张三 23 男

es5 通过call 实现

  function es5parent(name, age) {
    this.name = name;
    this.age = age;
  }

  es5parent.prototype.say = function() {
    console.log(this.name, this.age, this.sex);
  }
  
  function es5child(name, age, sex) {
    this.sex = sex;
    es5parent.call(this, name, age);
  }
  
  es5child.prototype = new es5parent();
  es5child.prototype.say1 = function() {
    this.say();
  }
  const es5obj = new es5child('李四', 21, '女');
  es5obj.say1(); // 李四 21 女