前言
JavaScript中,也有继承,继承里面有原型,原型的使用又需要函数。使用原型具有一定的好处,可以减少变量的使用。
认识原型链
一、属性__proto__
每一个对象都有个属性__proto__;
__proto__ 就是对象的原型。
var o={};
alert(typeof o); //运行得到 object
alert(typeof Object); //运行得到 function
alert(o.__proto__); //运行得到[object Object]
二、原型链关系图
(1)对象有原型,原型也是对象,也有原型;
(2)所有的函数都是对象,继承自Function.prototype--》Function.prototype是对象,继承自Object.prototype--》 Object.prototype是对象,继承自null;
(3)object是对象,继承自Object.prototype,
Function是对象、函数,继承自Function.prototype。
层层调用原型的例子
一、代码
<script type="text/javascript">
var o={name:"我是老大"};
var f1=function(){
this.name="我是二娃";
};
f1.prototype=o;
var foo1=new f1();
var f2=function(){
this.name="三妞";
};
var foo2=new f2();
foo2.__proto__=foo1;
var f3=function(){
this.name="我是四帅";
};
var foo3=new f3();
foo3.__proto__=foo2;
alert(foo3.name);
</script>
二、深入理解
1.当前的输出结果是“我是四帅”;
2.注释掉 f3中的语句,输出结果是:三妞;
var f3=function(){
//this.name="我是四帅";
};
3.继续注释掉f2中的语句,输出结果是:我是二娃;
var f2=function(){
//this.name="三妞";
};
通过这个过程可以看出,原型链中,读取对象的成员时,在当前位置找,找不到则向上级寻找。
关于原型的操作
1.读
通过上面的例子,我们可以看出原型链中对象成员的读取过程,下面的例子,你能猜出结果是什么吗?
<script type="text/javascript">
var person=function(){
};
person.prototype={name:"猜一猜"};
var p=new person();
alert(p.name);
</script>
2.写,改
(1)修改自身成员,从当前对象查找,无则创建出这个对象的成员;
<script type="text/javascript">
var person=function(){
};
person.prototype={name:"梅里"};
var p1=new person();
var p2=new person();
p2.name="李敖";
alert(p1.name); //输出结果为:梅里
</script>
(2)修改原型对象的成员,直接修改;
<script type="text/javascript">
var person=function(){
};
person.prototype={name:"梅里"};
var p1=new person();
var p2=new person();
p2.set_Name=function(value){
p2.__proto__.name=value;
};
p2.set_Name("李敖");
alert(p1.name); //输出结果为 李敖
</script>
小结
关于原型链的内容,还有其他的内容,比如使用它可以减少变量,避免出现作用域混乱的情况。
感谢您的访问!