在Web开发中，对JavaScript变量进行监视是一项常见的需求。通过监视变量的变化，开发者可以执行特定的操作，例如响应用户的输入、跟踪应用状态的变更或是调试程序。在C#等其他编程语言中，监视变量或属性的变更相对简单，因为有现成的机制如事件委托和FileSystemWatcher等。然而，在JavaScript中实现变量监视则需要一些技巧。
可以使用JavaScript的对象原型方法watch来监视变量的变化。Object.prototype.watch方法允许开发者为对象的属性添加一个处理函数，当属性值发生变化时，该处理函数会被自动调用。以下是一个简单的使用watch方法的示例：
```javascript
function Class1() {
var name = 'xu';
var id = '1';
this.setName = function(n) {
this.name = n;
};
this.setID = function(n) {
this.id = n;
};
this.display = function() {
alert(this.name + ' id is: ' + this.id);
};
}
Class1.prototype = {
propertyChange: function(propertyName, oldValue, newValue) {
alert(propertyName + ' changed from ' + oldValue + ' to ' + newValue);
}
};
var obj = new Class1();
obj.watch('name', function(prop, oldValue, newValue) {
this.propertyChange('name', oldValue, newValue);
});
obj.watch('id', function(prop, oldValue, newValue) {
this.propertyChange('id', oldValue, newValue);
});
obj.setName('xu22');
obj.setID('5');
obj.display();
```
在这个示例中，我们定义了一个Class1类，并为它的name和id属性分别设置了setter函数。通过调用原型上的watch方法，我们为name和id属性添加了监视，当这些属性被设置新值时，会触发propertyChange方法，从而可以执行相应的逻辑。
但是需要注意的是，watch方法并不是所有浏览器都支持。例如，Internet Explorer浏览器就不支持此方法。为了在这些浏览器上实现类似的功能，可以使用Object.defineProperty方法，它是ECMAScript 5的一个特性，可以定义新的属性特性或修改现有的属性特性，包括getter和setter函数。通过这两个函数，开发者可以监视属性的读取和赋值操作。以下是如何在不支持watch方法的浏览器中使用defineProperty来监视属性的例子：
```javascript
if (!Object.prototype.watch) {
Object.prototype.watch = function(prop, handler) {
var oldval = this[prop], newval = oldval,
getter = function() {
return newval;
},
setter = function(val) {
oldval = newval;
return newval = handler.call(this, prop, oldval, val);
};
if (delete this[prop]) {
if (Object.defineProperty) { // ECMAScript 5
Object.defineProperty(this, prop, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
} else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) {
this.__defineGetter__(prop, getter);
this.__defineSetter__(prop, setter);
}
}
};
}
```
以上代码通过定义getter和setter函数来监视对象属性的读取和赋值。当属性被赋予新值时，可以执行监视器中定义的逻辑，从而达到监视变量的目的。
由于Object.prototype.watch方法在IE等浏览器上不被支持，文章还提到了一个替代方案，即通过Object.prototype.__defineGetter__和__defineSetter__来模拟watch行为。这两个方法用于在IE和一些老版本浏览器中定义属性的getter和setter函数，从而使开发者可以监视属性值的变化。然而，随着浏览器的不断更新，推荐使用ECMAScript 5中定义的Object.defineProperty方法，因为它具有更好的跨浏览器兼容性和更多的功能。
通过这些方法，我们可以实现JavaScript中的变量监视，监控变量值的变化并做出相应的处理。这对于开发复杂的Web应用来说是一个重要的技巧，可以帮助开发者更好地管理应用状态并提高用户体验。
