Javascript学习笔记--理解prototype

红太狼 2022-03-28 07:00 177阅读 0赞

from:[http://cymoft.blog.51cto.com/324099/63422][http_cymoft.blog.51cto.com_324099_63422]

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();