关于javascript:JS-常用继承

罕用的继承形式

1：原型链继承

function Child(){this.age="10";}
function Father(){
    this.name="father";
    this.friends=['a','b'];
}
Father.prototype.sayName=function(){console.log(this.name);
}
Child.prototype=new Father();
Child.prototype.constructor=Child;
var c1=new Child();
var c2=new Child();
c2.friends.push('c');

/**
顾名思义通过原型 prototype 对象进行继承，原型链向上查找公共属性办法.
Child.prototype 指向了 Father 实例
毛病:
1: 无奈向父类传递参数用于结构。2: 父类的 name,firends 公有属性，都成子类原型私有属性。c2.friends.push('c'); 执行后
c1.firends 也被批改 
c2.friends==c1.friends==['a','b','c']
*/

2：构造函数继承

function Child(data){
    this.age="10";
    Father.call(this,data)
}
function Father(data){
    this.name=data.name;
    this.friends=data.friends;
    this.sayName=function(){console.log(this.name)
    }
    console.log("被执行了")
    
}
Father.prototype.showFriends=function(){console.log(this.showFriends);
}
var c1=new Child({
    name:'c1',
    friends:['a','b']
})
var c2=new Child({
    name:'c2',
    friends:['c','d']
})
c1.friends.push('x')
c2.friends.push('y')

/**
通过 call|apply 进行继承 (属性拷贝), 与 prototype 没有关系
能够向子类传递结构参数，子类继承的父类属性独立.
实现所有属性办法独享.
毛病：1：雷同公共办法 sayName 没抽离,
所有子类都有本人独立的 sayName,(c1.sayName===c2.sayName)false
*/

3：原型继承 +call 继承（组合继承）

function Child(data){Father.call(this,data)
}
function Father(data){
    this.name=data?data.name:"father";
    this.friends=data?data.friends:[];
    console.log("Father 构造函数执行了")
}
Father.prototype.showFriends=function(){console.log(this.friends)
}

Child.prototype=new Father();
Child.prototype.constructor=Child;

var c1=new Child({
    name:'c1',
    friends:['a','b']
})
var c2=new Child({
    name:'c2',
    friends:['c','d']
})
c1.friends.push('x')
c2.friends.push('y')
c1.showFriends()
c2.showFriends()

/**
公有属性构造函数继承，公共属性办法原型链实现。毛病:
1: 调用了两次父类构造函数，生成了两份实例
Father.call，Child.prototype=new Father();
*/

4：寄生式继承

function createObj(o){function F(){ }
    F.prototype=o;
    return new F();}

function Child(data){Father.call(this,data)
}

function Father(data){
    this.name=data?data.name:"father";
    this.friends=data?data.friends:[];
    console.log("Father 构造函数执行了")
}

Father.prototype.showFriends=function(){console.log(this.friends)
}
Father.prototype.likes=['吃','睡'];


Child.prototype=createObj(Father.prototype);
Child.prototype.constructor=Child;
Child.prototype.childLikes=function(){console.log('aaa')
}
var c1=new Child({
    name:"c1",
    friends:['a','b']
})
var c2=new Child({
    name:"c2",
    friends:['c','d']
})
var f1=new Father({
    name:"f1",
    friends:['e','f']
})
c1.friends.push('x')
c2.friends.push('y')
console.log(c1,c2);

/**
应用两头空对象 F 来连接子类与父类，子类原型指向 F 实例
F.prototype==Father.prototype,F 没有公有属性因而 new 开销比拟小。*/

5：Class 继承

class Father{constructor(data){
        this.name=data?data.name:"father";
        this.friends=data?data.friends:[];}
    showFriends(){console.log(this.friends)
    }
}
class Child extends Father{constructor(data){super(data);
    }
}
var c1=new Child({
    name:'c1',
    friends:['a','b']
})
var c2=new Child({
    name:'c2',
    friends:['c','d']
})
c1.friends.push('x')
c2.friends.push('y')
console.log(c1,c2)
/**
和寄生式继承成果一样，简洁语义更好。子类构造函数必须先调用一次 super
*/