這篇文章主要介紹了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程序設計有所幫助。