日期:2014-05-16  浏览次数:20337 次

用JS调试来理解JS的prototype某些特性
    首先这次我们来看看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有其它更准确的理解或者更好的方法,还请不吝赐教,在此谢过。