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，好东西。收藏。

 

转载于:https://www.cnblogs.com/McJeremy/archive/2010/06/18/1760385.html