javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承

 

 javascript中实现继承的三种方式：原型继承、借用构造函数继承、混合继承：

/*
    js当中的继承
    
    js中 构造函数 原型对象 实力对象的关系：
        1 构造函数.prototype = 原型对象
        2 原型对象.constructor = 构造函数（模板）
        3 原型对象.isPrototypeOf(实例对象)  判断实例对象的原型是不是当前对象
        4 构造函数 实力对象 是 类和对象的关系            
*/


/*
1 原型继承
        给子类构造函数的原型对象赋值为父类构造函数的实例
    赋值之后产生的关系：
        1 子类的原型对象是父类的一个实例   Son.prototype 是 new Father()
        2 父类的方法和属性，子类可以在原型中得到    
        3 子类的原型对象的构造器是父类模板    Son.prototype.constructor 是 Father
        4 子类的原型对象的原型对象是父类的原型对象    Son.prototype.prototype 是Father.prototype
    原型继承的特点：
        子类继承了父类所有属性方法发和 父类原型对象中的属性和方法
    缺点： 不能在子类实例化对象的时候给父类的属性赋值，继承父类的值和子类对象实例化分开了。
*/

//父类构造函数
function Father(name){
    this.name = name;
}
//父类原型对象
Father.prototype={
    constructor: Father,
    id:10,
    sayName:function(){
        alert(this.name);
    }
};

//子类构造函数
function Son(age){
    this.age = age;
}
//子类原型对象 这一家子都姓张
Son.prototype = new Father("张");

//子类的实例 能够使用父类的属性和方法
var s1 = new Son(18);
//s1.sayName();    //张
//alert(s1.age);    //18        

/*
    原型继承的特点：
        子类继承了父类所有属性方法发和 父类原型对象中的属性和方法
    缺点： 不能在子类实例化对象的时候给父类的属性赋值，继承父类的值和子类对象实例化分开了。
*/




/*
2 类继承（借用构造函数） 只继承父类的构造函数，父类的原型对象没有继承过来
    利用call 或者apply进行函数绑定，借用父类构造函数的属性和方法
*/
//父类构造函数
function Father(name){
    this.name = name;
}
//父类原型对象    在子类中不能继承父类原型对象中的内容
Father.prototype.id = 10;

//子类构造函数
function Son(name,age){
    //name属性是父类的 不是子类的 借用父类的构造函数 把属性绑定给子类的实例对象
    Father.call(this,name);
    this.age = age;
}
//实例化子类对象 在这里可以直接给继承来的属性赋值
var s2 = new Son("z3",18);
//alert(s2.name);    //z3  父类构造函数绑定来的属性
//alert(s2.age);    //18  子类自己的属性

/*
    类继承（借用构造函数） 的特点：
        优点： 能够在实例化子类对象时候给继承父类的属性赋值
        缺点：父类的原型对象中的内容无法继承
*/


/*
3 混合继承：原型继承 和 借用构造函数继承 的混合
    特点：
        优点：1 能够在实例化子类对象的时候给继承来的属性赋值
               2 能够继承父类的原型对象中的方法
        缺点： 继承了两次父类的模版，分别是call绑定和子类原型对象赋值的时候
                如果继承来的属性特别多，这会很耗费时间来维护
*/
//父类
function Father(name){
    this.name = name;
}
//父类的原型对象
Father.prototype = {
    constructor:Father,
    id:10,
    sayName:function(){
        alert(this.name);
    }
};
//子类
function Son(name,age){
    //借用父类构造函数 绑定子类方法 为子类继承来的属性赋值
    Father.call(this,name);
    this.age = age;
}
//原型继承 不传递参数，继承自父类的属性赋值交给借用父类构造函数去做
Son.prototype = new Father();

//使用子类实例化对象
var s3 = new Son("l4",20);
//alert(s3.name);    //父类属性
//alert(s3.id);    //父类原型对象的属性
//alert(s3.age);    //自己的属性
//s3.sayName();    //父类原型对象中的方法
/*
    混合集成的特点：
        优点：1 能够在实例化子类对象的时候给继承来的属性赋值
               2 能够继承父类的原型对象中的方法
        缺点： 继承了两次父类的模版，分别是call绑定和子类原型对象赋值的时候
                如果继承来的属性特别多，这会很耗费时间来维护
*/

 

 

 

但是 上面三种方式 即使是混合继承也有弊端，下面用js模拟一下extends的继承方，来实现不会重复继承父类的构造函数：

/*
javascript模拟extends方法，
    目的：
        1子类实例化能够赋值继承来的属性   
        2 继承父类的原型对象    
        3 父类的构造函数只继承一次
*/

//1 我们模拟一个extends函数 用于实现类之间的继承 传入父类和子类
function extend(son,father){
    //让子类继承父类的原型而不继承父类构造函数的内容
    var f = new Function(); //临时空函数，目的是函数内部是空的 但是原型是父类的原型
    f.prototype = father.prototype;    //让空函数的原型指向父类的原型
    son.prototype = new f();    //让子类的原型指向一个空函数，空函数的原型是父类的原型，这就避免了父类构造函数的属性被重复实现
    //给子类添加一个superClass属性保存父类的原型对象，防止自己重写了父类方法后 无法调用父类原型对象中的方法
    son.superClass = father.prototype;
    //为父类原型对象添加构造器  如果父类原型对象忘记加构造器这里给他加上
    if(father.prototype.constructor == Object.prototype.constructor){
        father.prototype.constructor = father;
    }
}
//2 父类
function Father(name){
    this.name = name;
} 
//父类的原型对象
Father.prototype = {
    constructor: Father,
    sayName:function(){
        alert(this.name);
    }
};


//3 子类
function Son(name,age){
    //借用构造函数：为子类绑定父类的构造函数中属性
    // Father.call(this , name); 这里不这样写，为了解耦，增加通用性，经过extentds函数之后，子类里面有了父类的属性
    Son.superClass.constructor.call(this , name);    //Son.superClass是父类的原型对象，consturctor就是父类构造函数
    this.age = age;
}
//原型继承    
//Son.prototype = new Father(); //会再次绑定一次父类的构造函数 ，这里为了不重复继承父类构造函数，只继承父类原型对象 我们用自己
//调用自己的继承方法 实现为子类继承父类的原型对象 而不继承父类的构造函数



extend(Son,Father);



//使用子类
var s4 = new Son("haha",33);
alert(s4.name);    //haha 父类继承来的属性
alert(s4.age);    //33 自己的属性
s4.sayName();    //haha  父类继承来的方法
//重写父类方法
s4.sayName = function(){
    alert("hello i am son");
};
s4.sayName();    //hello i am son 重写方法覆盖了父类的sayName
//重写之后还想调用父类的方法    需要绑定一下 指定是我这个对象来调用
Son.superClass.sayName.call(s4);    //haha