Javascript监视变量变化的方法

这篇文章主要介绍了Javascript监视变量变化的方法,涉及javascript针对变量的相关操作技巧,需要的朋友可以参考下

本文实例讲述了Javascript监视变量变化的方法。分享给大家供大家参考。具体分析如下：

大家应该知道，在C#中对于属性、文件等的更改监视非常简单，因为有委托(事件)、FileSystemWatcher等好东东扶持。

那么在JavaScript中，如何对变量的更改进行监视呢?首先，我仿照c#的属性来对JS进行操作，写出了如下的示例：

1. function Class1() 
2. { 
3. var oldValue=''; 
4. var name='xu'; 
5. var id='1'; 
6. this.setName=function(n) 
7. { 
8. oldValue=name; 
9. name=n; 
10. this.propertyChange('name',oldValue,n); 
11. } 
12. this.setID=function(n) 
13. { 
14. oldValue=id; 
15. id=n; 
16. this.propertyChange('id',oldValue,n); 
17. } 
18. this.display=function() 
19. { 
20. alert(name+'/'s id is :'+id); 
21. } 
22. } 
23. Class1.prototype={ 
24. propertyChange:function(propertyName,oldValue,newValue) 
25. { 
26. alert(propertyName+'/'s value changed from '+oldValue+' to '+newValue);  
27. } 
28. }; 
29. var c=new Class1(); 
30. c.setName('xu22'); 
31. c.setID('5'); 
32. c.display(); 

将对对象内部变量(私有变量)的赋值操作提取到了方法中，而在该方法中触发相应的变量值更改回调方法。

按说这样搞就能监视变量 的更改了，但是在FireFox的官方网站上有一个叫Object.watch(unwatch)的东东，可以用来监视变量的变更。

非常可惜的是，这个方法在IE等浏览器下不能正常运行。俺到网上搜了一番，在

http://stackoverflow.com/questions/1269633/javascript-watch-for-object-properties-changes

中找到如下东东：

1. if (!Object.prototype.watch) 
2. { 
3. Object.prototype.watch = function (prop, handler)  
4. { 
5. var oldval = this[prop], newval = oldval, 
6. getter = function () 
7. { 
8. return newval; 
9. }, 
10. setter = function (val)  
11. { 
12. oldval = newval; 
13. return newval = handler.call(this, prop, oldval, val); 
14. }; 
15. if (delete this[prop]) 
16. {  
17. if (Object.defineProperty) // ECMAScript 5 
18. {  
19. Object.defineProperty(this, prop, {get: getter,set: setter}); 
20. } 
21. else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__)  
22. { 
23. Object.prototype.__defineGetter__.call(this, prop, getter); 
24. Object.prototype.__defineSetter__.call(this, prop, setter); 
25. } 
26. } 
27. }; 
28. } 
29. if (!Object.prototype.unwatch) 
30. { 
31. Object.prototype.unwatch = function (prop)  
32. { 
33. var val = this[prop]; 
34. delete this[prop];  
35. this[prop] = val; 
36. }; 
37. } 

通过__defineSetter__来对赋值操作监听~~~

OK，好东西。收藏一下。

希望本文所述对大家的javascript程序设计有所帮助。