探索javascript基于原型的继承方式

探索javascript基于原型的继承方式

javascript继承 其原理就是子类能调用父类的所有方法,父类的所有方法包括,父类自己 所有和 父类的原型所有,所以子类要实现继承父类,可以有两种思路,

第一种 是子类复制父类原型的所有方法,然后通过call,或者是apply方法来获得父类自己方法的调用权.

第二种是子类通过原型链来获得父类原型内方法的调用权,然后通过call,或者是apply方法来获得父类自己方法的调用权.

第一种,基于复制的实现

function Persion(){
    this.name = "dasd";

    this.getName = function(){
        return this.name;
    }
}

Persion.prototype.getAge = function(){
    return "dun";
}

function base1(cl,sup,args){
    var o = {};
    var clp = cl.constructor.prototype;
    var spp = sup.prototype;
    for(var l in clp){ //标记子类中已存在的方法
        if(clp[l]){
            o[l] = 1;
        }
    }
    for(var k in spp){
        if(!o[k]){ //如果方法在子类中不存在
            clp[k] = spp[k]; //复制
        }
    }
    sup.apply(cl,args); //改变父类this的指向子类,即子类获取了父类方法的代用权
}

function ManPersion(){
    base(this,Persion,[]);
}

var man = new ManPersion();

console.log(man.getName());//dasd
console.log(man.getAge());//dun

第一种,基于原型链的实现

function Persion(){
    this.name = "dasd";

    this.getName = function(){
        return this.name;
    }

}

Persion.prototype.getAge = function(){
    return "dun";
}

var persion = new Persion();

console.log(Persion.prototype.__proto__ === Object.prototype);//true

console.log(Persion.__proto__ === Function.prototype);//true

console.log(Function.prototype.__proto__ === Object.prototype);//true

//基于以上推测实现继承
function base(cl,sup,args){
    //原型链绑定
    cl.constructor.prototype.__proto__ = sup.prototype;
    sup.apply(cl,args);//改变父类this的指向子类,即子类获取了父类方法的代用权
}


function ManPersion(){
    base(this,Persion,[]);
}

var man = new ManPersion();

console.log(man.getName());//dasd
console.log(man.getAge());//dun

完美实现继承,不过估计在那些不支持__proto__属性的浏览器上不能用,不过在所有的现代浏览器上比如chrome或者firefox上应该都能用