JS 实现继承的方法 ES6 and ES5

时间:2019-10-09
本文章向大家介绍JS 实现继承的方法 ES6 and ES5,主要包括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;

 

 

 

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

$flag 上一页 下一页