【转】用调试工具来理解JS中的prototype属性。
原始地址：http://qiang106.iteye.com/blog/575424首先这次我们来看看Javascript的prototype有有以下几个特性：
一、我们知道，JS类可以理解成一个构造方法，用new创建一个JS类的对象时，类构造方法会被指定一个prototype属性，这个prototyep我们把它叫做JS类的的原型，原型的初始值是一个对象，这个对象只带有一个属性名为constructor，它指回到和原型关联的那个构造方法；
二、原型的属性，在所有这个JS类的对象实例中共享；
三、当JS程序读取对象中属性时，首先读取的是对象中定义的属性，如果属性不存在，则到对象的原型中搜索，这也体现JS的继承扩展特性，如果原型中也没有这个属性当然就出错啦；
四、当在JS程序中写一个属性时，情况不会像第3点说的那样了，如果对象中没有定义这个属性不存在，那么这个在这个对象中就会添加这一个属性，即使原型中定义了这个属性，那么也只能说明添加的这个对象的属性和原型的属性同名。
现在就开始让我们来“调”出这几个特性吧，参考以下程序代码：
<script language="javascript">function test(){var T = function(){};var t1 = new T(),t2 = new T();T.prototype.attr = 1;var result1 = t1.attr;T.prototype.attr = 2;var result3 = t2.attr;t1.attr = 2;var result2 = (t1.attr == t2.attr);t2.attr = 3;var result4 = T.prototype.attr;document.writeln(result1);document.write("<br>" + result2);document.write("<br>" + result3);document.write("<br>" + result4);}</script> 1、在IE8或者FireBug中定义如下断点：
http://dl.iteye.com/upload/attachment/445567/730f6e77-404c-3fbe-ab0e-86664ac16fc3.jpg
2、当程序跑到这里时，我们看变量情况如下：
http://dl.iteye.com/upload/attachment/445569/b831cf60-1283-3073-af95-8337972ac574.jpg
3、T中只是一个空对对象，什么属性也没有，再按F11两次单步执行，此时完成var t1 = new T(),我们再看变量T：
http://dl.iteye.com/upload/attachment/445574/cd2d1b78-49f4-3792-8730-04c92efa86cc.jpg
4、此时已经多了一个prototype属性，并且这个属性包含一个constructor的属性，这个属性是一个方法，实际它就是指向了原型相关的构造方法，即T的构造方法，再观察，我们发现此时t1和t2中都没有attr属性，继续F11，下一行是指给T的原型添加一个属性，并赋值为1，当程序执行完这一行后我们发现t1和t2也多了一个属性attr，这个属性实际上是从原型那承下来的，当然值也是等于1，如下图：
http://dl.iteye.com/upload/attachment/445605/57facf03-6f44-3231-bb20-7728e061a398.jpg
5、继续按F11，T.prototype.attr = 2;这一行是改变原型的值，当过完这一行，发现变量有变化了，t1,t2的attr的值也都变成了2，这也再次证明t1,t2的attr正是继承自原型，自然result2的值也为true了，如下图：
http://dl.iteye.com/upload/attachment/445612/22586b41-61a1-3531-ad42-06e96f4306b8.jpg
6、再往下t2.attr = 3;改变了t2的attr，此时是写t2的attr，写与读不一样，它会在对象中添加一个新的属性，如下图，此时原型的attr并没有变成3，只有t2的attr为3：
http://dl.iteye.com/upload/attachment/445614/2648bfc5-4279-3aad-a5db-90bc75e3383e.jpg
7、而t1.attr2 = 4;这一步也再次说明了在对象中添加一个新的属性,最终截图效果
http://dl.iteye.com/upload/attachment/445616/5156af8f-5983-3ac9-9296-9e16e061f030.jpg
在浏览器也输出了：
1 true22
通过这样简单的几步调试，观察其中变量变化，清楚地让我认识了prototype的这几点特征，发现调试有时也不仅只是用来调试我们程序对与错，有时还能帮助我们很直观的理解程序甚至语言运行的一些特征，各位XDJM有其它更准确的理解或者更好的方法，还请不吝赐教，在此谢过。
页:
[1]