js构造函数,原型对象,继承 (3)
2017-09-27 16:31
148 查看
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
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
相关文章推荐
- js构造函数,原型对象,继承 (2)
- javascript (对象继承)原型链
- 用构造函数继承基类的属性、用原型对象继承基类的方法
- 【JavaScript高级程序设计】读书笔记之二 —— 理解对象的原型、继承
- JS基础学习第七天:对象原型及原型式的继承
- js构造函数,原型对象,继承 (1)
- 变量对象,作用域链,闭包,匿名函数,this关键字,原型链,构造器,js预编译,对象模型,执行模型,prototype继承
- 原型继承中对象的问题
- 【web前端-理解js原型】理解Javascript中的原型对象、原型链和继承
- JavaScript构造函数+原型创建对象,原型链+借用构造函数模式继承父类练习
- js使用原型实现继承与new一个新对象的方法
- JavaScript 面向对象思想以及原型、继承
- 【MDNjs笔记】——入门——第三章——对象.构造函数.原型链.继承
- javascript原型继承(第一篇)---对象
- javaScript 基于原型的对象继承
- 算法-javascript自实现继承extend(单次继承原型对象和单次继承构造函数)
- js对象中的方法能不能使用原型继承
- js(十六)——原型创建对象和继承