JS 实现继承的方法 ES6 and ES5
继承
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;
总结 用构造函数继承属性 用原型对象继承方法