正文

JS 实现继承的方法 ES6 and ES5

IP云
IP云V管理员/4 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

继承

  • 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;
 

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

相关阅读

目录[+]