[Object]面向对象编程（高程版）（五）继承

[Object]面向对象编程（高程版）（五）继承

博客分类：

• Web前端-JS语言核心

作者：zccst

一、原型链继承

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}


function SubType(){
    this.subproperty = false;//SubType有了一个属性subproperty，值为false
}

// 核心
SubType.prototype = new SuperType();
//SubType继承了SuperType的属性property，值为true，
//还继承了SuperType在prototype对象中定义的getSuperValue方法


SubType.prototype.getSubValue = function(){
    return this.subproperty;//SubType又有了一个在prototype对象中定义的getSubValue方法
}

//自此，SubType拥有4个属性，其中两个是真正的属性，另两个是方法。

//知识点1，重新父类的同名方法。会覆盖父类的同名方法。
//SubType.prototype.getSuperValue = function(){return false;}

//知识点2，原型链实现继承时，不能使用对象字面量创建原型方法。因为这样做会重写原型链
SubType.prototype = {
    saySubValue : function(){return this.subproperty;},
    sayOtherValue : function(){return false;}
};
//批注：运行上面代码时，会使SubType.prototype = new SuperType();无效


//console.log(SuperType);
//console.log(SubType);

var i = new SubType();  //创建一个实例

//alert(i.getSuperValue());
//alert( i instanceof Object);
//alert( i instanceof SuperType);
//alert( i instanceof SubType);

//该实例是三个对象的实例，他们是继承关系。
//alert(Object.prototype.isPrototypeOf(i));
//alert(SuperType.prototype.isPrototypeOf(i));
//alert(SubType.prototype.isPrototypeOf(i));


alert(i.getSuperValue());


4，obj4

//1，原型链的问题
function SuperType(){
    this.colors = ['red','blue','green'];
}
function SubType(){
}
SubType.prototype = new SuperType();

var i = new SubType();
i.colors.push('black');
alert(i.colors);
var j = new SubType();
alert(j.colors);//4。原因是j的prototype与i的一样。里面包含着父类的属性和prototype。

二、借用构造函数

function SuperType(){
    this.colors = ["red","blue","green"];
}

function SubType(){
    SuperType.call(this);//call相当于设置函数体内this对象的值。
}

var i = new SubType();
i.colors.push("black");
alert(i.colors); //"red","blue","green","black"

var i2 = new SubType();
alert(i2.colors); //"red","blue","green"

//批注：通过call借调了父类的构造函数，实际上是在子类创建实例时调用了父类的构造函数。


//1,传递参数
function SuperType(name){
    this.name = name;
}
function SubType(){
    SuperType.call(this, "Nicholas");
    this.age = 29;
}

var i = new SubType();
alert(i.name);
alert(i.age);

//2,问题：方法都在构造函数中，无法复用。

三、组合继承

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}

SubType.prototype = new SuperType();

SubType.prototype.sayAge = function(){
    alert(this.age);
}

var i = new SubType("nich",29);
i.colors.push("black");
//alert(i.colors);//"red","blue","green","black"
//i.sayName(); //"nich"
//i.sayAge();  //29

var i2 = new SubType("greg",27);
//alert(i2.colors);//"red","blue","green"
//i2.sayName(); //"greg"
//i2.sayAge();  //27

alert(i.name == i2.name);    //false
alert(i.age == i2.age);      //false
alert(i.colors == i2.colors);//false

alert(i.sayName == i2.sayName);//true 原因：sayName也是原型对象中定义的方法
alert(i.sayAge == i2.sayAge);  //true

//批注：该方法在实际中是使用最多的一种。