js构造函数,原型对象,继承 (3)

来源:互联网 发布:sql server安装包64位 编辑:程序博客网 时间:2024/06/05 18:36

js 继承-原型链

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


在上面的代码中,我们没有使用subType默认提供的原型,而是给它换了一个新原型;这个新原型就是SuperType的实例。于是,新原型不仅具有作为一个SuperType的实例所拥有的全部属性和方法,而且内部还有一个指针,指向了SuperType的原型。最终结果就是:instance指向Subtype的原型,SuberType的原型又指向SubType的原型。getSuperValue()方法仍然还在SuperType.prototype中,但property则位于SubType.prototype中。这是因为property是一个实例属性。而getSuperValue()则是一个原型方法。既然SubType.prorotype现在是SubperType的实例,那么property当然位于该实例中。

此外,要注意instance.constructor现在指向的是SuperType,这是因为原来SubType.prototype中的constructor被重写的缘故(实际上,不是subtype的原型的constructor属性被重写,则是Subtype的原型指向了另外一个对象-SuperType的原型,而这个原型对象的constructor属性指向的是SuperType)


这里我们可以根据instance.getSuperValue()得到它的搜索步骤:

1、搜索实例

2、搜索SubType.prototype;

3、搜索SuperType.prototype,最后一步才找到该方法。在找不到属性或方法的情况下,搜索过程总是要一环一环地前行到原型链末端才会停下来


注意:默认的原型

所有函数的默认原型都是object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype.这也正是所有自定义类型都会继承toString(),valueOf()等默认方法的根本原因


确定原型和实例的关系:

可以通过两种方式来确定原型和实例之间的关系。

1、instanceof

console.log(instance instanceof Object) //true


2、isPrototypeOf()方法。只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型,因此isPrototypeOf()方法也会返回true

console.log(Object.prototype.isPrototypeOf(instance));  //true


注意:

1、子类型有时候需要覆盖超类型中的某个方法,或者需要添加超类型中不存在的方法。不管怎样,给原型添加方法的代码一定要放在替换原型的语句之后


2、通过原型链实现继承时,不能使用对象字面量创建原型方法。这样做就会重写原型链,例子如下:

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

SuperType.prototype.getSuperValue=function(){

return this.property;
}

function SubType(){
this.subproperty=false;
}

//继承SuperType
SubType.prototype=new SuperType(); 

//使用字面量添加新方法,会导致上一行继承SuperType的代码无效

Subtype.prototype={
getSubValue:function(){

return this.subproperty;
},
someOtherMethod:function(){
return false;
}


}

var instance=new SubType();
console.log(instance.getSuperValue());//Subtype is not defined





阅读全文
0 0
原创粉丝点击