JS实现继承的几种方式

一、借用构造函数

function Father(val){
    this.val=val;
    this.arr=[1];
}
function Child(val){
    Father.call(this,val);      
}
var child1=new Child();
console.log(child1.val);

缺点：子类无法继承父类的原型对象，并没有真正的实现继承（部分继承）

如果给上述代码再添加几行：

function Father(val){
    this.val=val;
    this.arr=[1];
    this.fun=function(){
        //....
    }
}
function Child(val){
    Father.call(this,val);      
}
var child1=new Child(1);
var child2=new Child(2);
child1.arr.push(2);

console.log(child1.val);    //1
console.log(child2.val);    //2

console.log(child1.arr);    //1,2
console.log(child2.arr);    //1

console.log(child1.fun === child2.fun);   // false

上面代码中21行报错，是因为无法继承方法，每个子类实例都有一个新的方法，无法实现函数复用

二、原型链

function Father(){    //父类            
    this.name='张三';
    this.arr=[1];
}
function Child(){       //子类
    this.type="hello"
}
Child.prototype=new Father();  //子类的原型等于父类的实例
var child1=new Child();        //实例化一个子类对象
console.log(child1.name); 

缺点：原型对象的属性是共享的

如果给上述代码再添加几行：

function Father(){    //父类            
    this.name='张三';
    this.arr=[1];
}
function Child(){       //子类
    this.type="hello"
}
Child.prototype=new Father();  //子类的原型等于父类的实例

var child1=new Child();        //实例化一个子类对象
var child2=new Child();        //实例化一个子类对象
child1.name='李四'
child1.arr.push(2);

console.log(child1.name);    //李四
console.log(child2.name);    //张三

console.log(child1.arr);     //1,2
console.log(child2.arr);     //1,2  

此时就出现了一个问题，第13行代码明明是给child1实例添加了属性，为什么第19行代码显示child2也拥有了该属性呢？这就是原型链继承所存在的问题，原型对象的属性是共享的。

三、组合式继承

原型继承+构造函数继承

function Father(){      //父类
    this.val=1;         //只在此处声明父类属性
    this.arr=[1];
}
Father.prototype.sayHai=function(){    //只在此处声明父类方法
    //...
}
function Child(){
    Father.call(this);     //构造函数继承
}
Child.prototype=new Father();     //原型链继承

var child1=new Child();
var child2=new Child();

console.log(child1.sayHai==child2.sayHai);    //true

将实例方法放到原型对象里，以实现函数复用，同时还要保留借用构造函数方式的优点

优点：不存在属性共享问题，函数可复用

 缺点：父类构造函数被调用了两次，代码冗余

四、寄生组合继承