在浏览 Javascript 文档时，我发现以下两个函数在一个 Javascript 对象上看起来很有趣：
.watch - 监视属性被赋值并在该情况下运行函数。
.unwatch - 删除使用 watch 方法设置的观察点。
更新：弃用警告
不要使用watch()和unwatch()！这两种方法仅在 Firefox 版本58之前实现，它们已被弃用并在Firefox 58+中已删除。
示例用法:
o = { p: 1 };
o.watch("p", function (id,oldval,newval) {
console.log("o." + id + " changed from " + oldval + " to " + newval)
return newval;
});
每当我们更改“p”属性值时，此函数将被触发。
o.p = 2; //logs: "o.p changed from 1 to 2"
我过去几年一直在使用JavaScript，但从未使用过这些函数。
请问有人能提供一些这些函数派上用场的好例子吗？
现在是2018年，这个问题的答案有点过时:
今天，你可以使用Proxy对象来监控（和拦截）对对象的更改。它是专门为OP所尝试的操作而构建的。下面是一个基本示例:
var targetObj = {};
var targetProxy = new Proxy(targetObj, {
set: function (target, key, value) {
console.log(`${key} set to ${value}`);
target[key] = value;
return true;
}
});
targetProxy.hello_world = "test"; // console: 'hello_world set to test'
Proxy 对象唯一的缺点是：
Proxy 对象在旧版浏览器（例如 IE11）中不可用，而 polyfill 无法完全复制 Proxy 的功能。Date），Proxy 对象并不总是按预期行事 —— Proxy 对象最好与普通对象或数组配对使用。如果您需要观察嵌套对象所做的更改，则需要使用专门的库，例如我编写的 Observable Slim。它的工作方式如下：
var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
console.log(JSON.stringify(changes));
});
p.testing.blah = 42; // console: [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]
Proxy，您可以实现完全相同的结果。但是，是的，您是正确的，您没有观察到直接对目标对象进行的更改 - 这是由名称 Proxy 暗示的。 - Elliot B.手表的真正设计目的是验证属性值。例如，您可以验证某些内容是否为整数：
obj.watch('count', function(id, oldval, newval) {
var val = parseInt(newval, 10);
if(isNaN(val)) return oldval;
return val;
});
你可以使用它来验证字符串的长度：
obj.watch('name', function(id, oldval, newval) {
return newval.substr(0, 20);
});
然而，这些仅在最新版本的SpiderMonkey JavaScript引擎中可用。如果你正在使用Jaxer或嵌入SpiderMonkey引擎，那很好，但除非你正在使用FF3，否则在浏览器中并不真正可用。
watch 和 unwatch 已经被弃用，请不要使用它。 - RenjithObject.defineProperty和Object.prototype.\__defineGetter__(或者\__defineSetter__)，了解这个功能的发展方向。
Object.defineProperty很快就会在所有现代浏览器中可用。Object.defineProperty并添加了一些事件调用程序。我最近制作了这个库。它添加了一些on[event]属性，可以像HTML对象的on[event]属性一样使用。它还具有简单的类型检查，如果失败，将调用onerror事件。根据您的代码，它可能会产生以下结果：var o = {}
Object.defineProperty(o, "p", {
value:1,
writable:true,
onchange:function(e){
console.log("o." + e.target + " changed from " + e.previousValue + " to " + e.returnValue);
}
})
var o = {
_p: 0,
get p() {
return this._p;
},
set p(p){
console.log(`Changing p from ${this._p} to ${p}`);
this._p = p;
return this._p;
}
}
o.p = 4;
o.p = 5;o.p = [1,2,3]，然后o.p.length = 1。 - vsync如果您的目标浏览器不支持Promise，请移除Promise并仅保留回调函数。
1）请注意在使用Promise时的异步行为。
2）Object.defineProperty不会触发回调函数，只有赋值操作符'='才会。
Object.onPropertySet = function onPropertySet(obj, prop, ...callback_or_once){
let callback, once;
for(let arg of callback_or_once){
switch(typeof arg){
case "function": callback = arg; break;
case "boolean": once = arg; break;
}
}
let inner_value = obj[prop];
let p = new Promise(resolve => Object.defineProperty(obj, prop, {
configurable: true,
// enumerable: true,
get(){ return inner_value; },
set(v){
inner_value = v;
if(once){
Object.defineProperty(obj, prop, {
configurable: true,
// enumerable: true,
value: v,
writable: true,
});
}
(callback || resolve)(v);
}
}));
if(!callback) return p;
};
// usage
let a = {};
function sayHiValue(v){ console.log(`Hi "${v}"`); return v; }
// do
Object.onPropertySet(a, "b", sayHiValue);
a.b = 2; // Hi "2"
a.b = 5; // Hi "5"
// or
Object.onPropertySet(a, "c", true).then(sayHiValue).then(v => {
console.log(a.c); // 4 // because a.c is set immediatly after a.c = 3
console.log(v); // 3 // very important: v != a.c if a.c is reassigned immediatly
a.c = 2; // property "c" of object "a" is re-assignable by '=' operator
console.log(a.c === 2); // true
});
a.c = 3; // Hi "3"
a.c = 4; // (Nothing)
不必使用代理，因此不需要直接“监听”原始对象，您可以使用以下方法：
const obj = {};
obj.state = {
isLoaded: false,
isOpen: false,
};
obj.setState = (newState) => {
// Before using obj.setState => result Object { isLoaded: false, isOpen: false }
console.log(obj.state);
obj.state = { ...obj.state, ...newState };
// After using obj.setState ex. obj.setState({new:''}) => result Object { isLoaded: false, isOpen: false, new: "" }
console.log(obj.state);
};
这种方法在ReactJS中的工作方式或多或少是如此，您在此示例中有源对象obj.state和setter obj.setState
您不必像我一样将两者都放在一个对象中，但似乎是组织事物的好方法
你可以使用 setInterval
Object.prototype.startWatch = function (onWatch) {
var self = this;
if (!self.watchTask) {
self.oldValues = [];
for (var propName in self) {
self.oldValues[propName] = self[propName];
}
self.watchTask = setInterval(function () {
for (var propName in self) {
var propValue = self[propName];
if (typeof (propValue) != 'function') {
var oldValue = self.oldValues[propName];
if (propValue != oldValue) {
self.oldValues[propName] = propValue;
onWatch({ obj: self, propName: propName, oldValue: oldValue, newValue: propValue });
}
}
}
}, 1);
}
}
var o = { a: 1, b: 2 };
o.startWatch(function (e) {
console.log("property changed: " + e.propName);
console.log("old value: " + e.oldValue);
console.log("new value: " + e.newValue);
});