JS-原型链-继承

原型链 - 对象实例

// 父类
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
// 子类
function SubType(){
this.subproperty = false;
}
// 继承 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
console.log(instance.getSuperValue()); //true
console.log(instance instanceof Object); //true
console.log(instance instanceof SuperType); //true
console.log(instance instanceof SubType); //true
console.log(Object.prototype.isPrototypeOf(instance)); //true
console.log(SuperType.prototype.isPrototypeOf(instance)); //true
console.log(SubType.prototype.isPrototypeOf(instance)); //true

原型方法重写

// 父类
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
// 子类
function SubType(){
this.subproperty = false;
}
// 继承 父类
SubType.prototype = new SuperType();
// 子类 添加自己的方法
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
// 子类 重写父类的方法
SubType.prototype.getSuperValue = function (){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

原型链的修改

// 父类
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
// 子类
function SubType(){
    this.subproperty = false;
}
// 继承
SubType.prototype = new SuperType();
// 重新定义 原型继承 - 会导致上一行代码无效
SubType.prototype = {
    getSubValue : function (){
        return this.subproperty;
    },

    someOtherMethod : function (){
        return false;
    }
};
var instance = new SubType();
console.log(instance.getSuperValue());   //error!

为什么影响第二个实例呢？

    function SuperType(){
        this.colors = ["red", "blue", "green"];
    }
    function SubType(){
    }
    // 原型 继承
    SubType.prototype = new SuperType();
    // 原型继承之后，任何一个实例的修改都会对下次 new 实例产生影响
    var instance1 = new SubType();
    instance1.colors.push("black");
    console.log(instance1.colors);    //"red,blue,green,black"

    var instance2 = new SubType();
    console.log(instance2.colors);    //"red,blue,green,black"