JS 实现继承的方法 ES6 and ES5

继承

• ES6 方法  （类的继承）

ES6中有一个属性的 extends

语法：
​
•   class Father {}
​
•   class Son extends Father{}
​
注意：是子类继承父类

super关键字

我们应用的过程中会遇到父类子类都有的属性，此时，没必要再写一次，可以直接调用父类的方法就可以了

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

当子类没有constructor的时候可以随意用父类的，但是如果子类也含有的话，constructor会返回实例，this的指向不同，不可以再直接使用父类的东西

调用父类构造函数

class F {
    constructor(name, age) {}
  }
​
  class S extends F {
    constructor(name, age) {
      super(name, age);
    }
  }
​
//注意: 子类在构造函数中使用super, 必须放到this 前面(必须先调用父类的构造方法,在使用子类构造方法

调用父类普通函数

class F {
    constructor(name, age) {}
    say() {}
  }
​
  class S extends F {
    constructor(name, age) {
      super(name, age);
    }
    say() {
      super.say()
    }
  }
​
//注意：如果子类也有相同的方法，优先指向子类，就近原则

总结：super调用父类的属性和方法，那么查找属性和方法的原则就近原则

如果子类不写东西，那么直接继承父类就可以用

但是如果子类有自己的构造函数和父类同名的方法，此时不可以直接用父类的东西，需要用super调用父类的方法和构造函数

附案例

class Father {
      constructor(uname, age) {
        this.uname = uname;
        this.age = age;
      }
​
      qian() {
        console.log('赚他一个亿');
      }
​
    }
    // 子类
    class Son extends Father {
      constructor(uname, age, score) {
        // super：可以调用父类的构造函数和方法
        super(uname, age);
        this.score = score;
      }
​
​
      say() {
        console.log('哇哈哈');
      }
​
​
      qian() {
        super.qian();
        console.log('zt两毛钱');
      }
​
    }
​
    var obj = new Son('张三', 22, 99);
    console.log(obj);
    // obj.qian();
    obj.qian();

---

• ES5 继承 又称为组合继承

ES6之前并没有给我们提供extends 继承。我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承。

call() 方法 继承属性

调用这个函数, 并且修改函数运行时的this 指向

这个方法里面有参数 第一个参数是谁继承 就写谁 后面跟着属性

function Father (uname, age) {
    this.uname = uname;
    this.age = age;
}
Father.prototype.say = function () {
    console.log('唱歌');
}
​
​
// 属性，方法
function Son (uname, age, score) {
    // this 指的是调用者
    Father.call(this, uname, age);
    this.score = score;
​
}
​
var obj = new Son('张三', 22, 99);
console.log(obj);

继承方法

就是把父亲的原型对象 赋给子类的实例对象；

function Father () {
​
}
Father.prototype.say = function () {
console.log('new哇哈哈');
}
​
​
function Son () {}
​
// 继承方法
// Son.prototype = Father.prototype;
// 把父类的实例对象赋值给子类的原型，让子类的原型对象指回构造函数
Son.prototype = new Father();
Son.prototype.constructor = Son
​
​
var obj = new Son();
​
obj.say();

注意 一定要让子类指回构造函数 因为在赋值的时候 会把子类给覆盖掉

​

Son.prototype = new Father();
​
Son.prototype.constructor = Son;

总结 用构造函数继承属性 用原型对象继承方法