Javascript学习笔记--理解prototype

prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了。今天先说说prototype。之前一直被ajax in action中文版附录里的一篇文章误导,该文有这样一段讲述function MyObject(){
}
MyObject.prototype.color = "red";
var obj1 = new MyObject();

MyObject.prototype.color = "blue";
MyObject.prototype.soundEffect = "boOOoing";
var obj2 = new MyObject();
文中称上述代码执行后,obj1的颜色为红色,obj2颜色为蓝色。这是错误的!实际上,obj1,obj2的color属性,都为蓝色!同时这篇文章还说,prototype和new关键字协同工作,当使用new调用函数时,函数prototype的所有属性和方法会附加到结果对象上。这段话很容易让人产生一个误解,就是结果对象本身会拥有函数的prototype上的属性和方法,而实际上,不是的。prototype的能力并不是往结果对象上添加东西,prototype只不过拥有可以被找到的能力而已!代码function MyObject(){
}
MyObject.prototype.x = 1;
var obj = new MyObject();
alert("obj.x="+obj.x);
这里我们没有给obj添加属性x,但是可以得到obj.x = 1,因为当js在对象obj自身的属性中找不到属性x的时候,便会到生成obj对象的构造函数MyObject的prototype属性中去找,于是,找到x=1。看代码function MyObject(){  
}  
MyObject.prototype.x = 1;  
var obj = new MyObject();  
alert("obj.x="+obj.x);
MyObject.prototype.x = 2;
alert("obj.x="+obj.x);
这里先弹出obj.x = 1,然后弹出obj.x = 2,说明obj.x实际上找到的是MyObject.prototype.x。问题来了,我们可以通过obj找到MyObject.prototype的属性,那么,可不可以修改勒?function MyObject(){    
}    
MyObject.prototype.x = 1;    
var obj = new MyObject();    
obj.x = 2;
alert(MyObject.prototype.x); //弹出 1
MyObject.prototype.x = 3;
alert(obj.x);//弹出2
delete obj.x;
alert(obj.x)//弹出3
当执行了obj.x =2;以后,修改MyObject.prototype.x的值无法影响obj.x了,因为obj.x=2;这一步赋值操作,会给obj这个对象自己添加属性x,于是我们现在就有两个x,obj自己的,和MyObject.prototype的,当时调用obj.x时,js当然会优先使用对象自己的属性。接下来的代码也好理解了,删除obj自己的x后,调用obj.x时又去找构造函数MyObject的prototype的x,于是找到3。ok,接下来,看复杂一点的例子。function MyObject1(){
}
MyObject1.prototype.x = 1;

function MyObject2(){
}
MyObject2.prototype = new MyObject1();

var obj = new MyObject2();
alert(obj.x);
 恩,js的原型继承,我们不是说这个,我只是简单的想只到,obj怎么找到x的。按照前面的解释,obj本身没有x,去找构造函数,这里是MyObject2的prototype,这里有点不一样了,MyObject2.prototype被赋予了一个值,MyObject1的一个实例。那么,MyObject2.prototype.x是不是就相当于(new MyObject1()).x,如同前面的讨论,不就是找到 了MyObject1.prototype.x!同理,如果MyObject1.prototype也是其他类的实例,那就接着往下找就是了,这就是所谓的prototype chain。那么如果在MyObject1里面也没有定义x,是不是就不往下找了?不是的,这个链的终点,是Object.prototype,如果在Object.prototype中都没有找到属性x的定义,js才会很肯定的告诉你,obj.x没有被定义。 小结一下,prototype到底是什么?prototype是js中函数(Function)对象的一个属性,本身也是一个对象,当我们新建一个函数的同时,也新建了该函数的prototype对象,我们也可以让这个prototype属性指向其他的对象。它的能力是可以把自己的属性给拥有它的函数的实例使用。 呵呵,我的这段总结真拗口啊……提两个问题:1:能不能把js内置对象的prototype属性指向别的对象!2:两个类循环引用prototype会怎么样? 先来看一个问题,告诉大家答案是不能!function MyObject(){}
Array.prototype = new MyObject();
alert(Array.prototype.constructor);
弹出的依然是Array自己的构造函数,赋值是失败的。 第二个问题,看代码~function MyObject1(){}
function MyObject2(){}
MyObject1.prototype = new MyObject2();
MyObject2.prototype = new MyObject1();
 看着有点觉得变态啊,这样写也不会有什么问题,没有死循环,应该是被优化了,两个类和谐共处,跟一家人似的。 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

竖子敢尔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值