前端笔记七(js多重继承方式)
2019-03-14 本文已影响0人
沐雨芝录
一、call/apply结合寄生多重继承实现。
function Parent1(name){
this.name = name;
}
Parent1.prototype.say = function(){
console.log(this.name)
}
Parent1.prototype.sayTwo = function(){
console.log('加油')
}
function Parent2(age){
this.age = age;
}
Parent2.prototype.walk = function(){
console.log(this.age)
}
function Child(name, age, address){
Parent1.call(this,name);
Parent2.call(this,age);
this.address = address;
}
function getPrototypes (prototypes) {
for(var i in prototypes){
var F = function () {};
F.prototype = prototypes[i];
Child.prototype[i] = new F();
}
}
getPrototypes(Parent1.prototype)
getPrototypes(Parent2.prototype)
var c1 = new Child('小米',18,'火星');
console.log(c1)
ps:其实不难理解,不明白的可以先去看我的前端笔记四(js继承的方式:精选篇),搞明白继承 是怎么回事,就很简单了。这里面主要代码就是
Parent1.call(this,name);
Parent2.call(this,age);
function getPrototypes (prototypes) {}
思想就是把两个父亲方法都拿到方式实现C继承B,B继承A。
二、es6 class实现(Mixin思维)。
class Parent1 {
say() {
console.log('我是Parent1');
}
}
let Parent1Mixin = (extendsClass) => class extends extendsClass {
First() {
console.log('First');
}
};
let Parent2Mixin = (extendsClass) => class extends extendsClass {
Second() {
console.log('Second');
}
};
class Child extends Parent2Mixin(Parent1) {
say () {
console.log('Child')
if (super.say) super.say();
}
}
let c = new Child();
console.log(c)
到底super有啥用:
- 在普通函数(相当于es5的prototype函数)里,使用 super.method(...) 调用父方法。
- 在 constructor 函数,使用 super(...) 调用父构造函数。