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 
30       var c=new Class1();
31       c.setName('xu22');
32       c.setID('5');
33       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 
30 if (!Object.prototype.unwatch)
31 {
32     Object.prototype.unwatch = function (prop) 
33     {
34         var val = this[prop];
35         delete this[prop]; 
36         this[prop] = val;
37     };
38 }

 

 通過__defineSetter__來對賦值操作監聽~~~

OK，好東西。收藏。