【转】用调试工具来理解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中定义如下断点 ：

 

2、当程序跑到这里时，我们看变量情况如下：

 

3、T中只是一个空对对象，什么属性也没有，再按F11两次单步执行，此时完成var t1 = new T(),我们再看变量T：

 
4、此时已经多了一个prototype属性，并且这个属性包含一个constructor的属性，这个属性是一个方法，实际它就是指向了原型相关的构造方法，即T的构造方法，再观察，我们发现此时t1和t2中都没有attr属性，继续F11，下一行是指给T的原型添加一个属性，并赋值为1，当程序执行完这一行后我们发现t1和t2也多了一个属性attr，这个属性实际上是从原型那承下来的，当然值也是等于1，如下图：

5、继续按F11，T.prototype.attr = 2;这一行是改变原型的值，当过完这一行，发现变量有变化了，t1,t2的attr的值也都变成了2，这也再次证明t1,t2的attr正是继承自原型，自然result2的值也为true了，如下图：

 

6、再往下t2.attr = 3;改变了t2的attr，此时是写t2的attr，写与读不一样，它会在对象中添加一个新的属性，如下图，此时原型的attr并没有变成3，只有t2的attr为3：

 7、而t1.attr2 = 4;这一步也再次说明了在对象中添加一个新的属性,最终截图效果

 

在浏览器也输出了：

1 
true
2
2 

 

通过这样简单的几步调试，观察其中变量变化，清楚地让我认识了prototype的这几点特征，发现调试有时也不仅只是用来调试我们程序对与错，有时还能帮助我们很直观的理解程序甚至语言运行的一些特征，各位XDJM有其它更准确的理解或者更好的方法，还请不吝赐教，在此谢过。