[英]Object.observe — not supported by all major browsers, what can I use as an alternative?
I have this function that works in Chrome, which prints to the console when a variable called finishedLoading changes values. 我有这个功能在Chrome中工作,当一个名为finishedLoading的变量改变值时,它会打印到控制台。
Object.observe(finishedLoading, function(id, oldval, newval) {
console.log('finished loading' + id + ' went from ' + oldval + ' to ' + newval);
}
This doesn't work in a bunch of other modern browsers (eg firefox, safari). 这在一堆其他现代浏览器中不起作用(例如firefox,safari)。 Is there an alternative I can use that would be better supported?
有没有我可以使用的替代方案可以更好地支持? Thanks!
谢谢!
A more widely supported approach could be Object.defineProperty . 更广泛支持的方法可以是Object.defineProperty 。 defineProperty can be used to have some control on a certain property of an object for instance:
例如,defineProperty可用于对对象的某个属性进行某些控制:
var o = { prop: '' };
Object.defineProperty(o, 'prop', {
get: function() { return this.value; },
set: function(newValue) {
// a certain property is being changed
alert('is changed');
this.value = newValue;
}
});
o.prop = 'Johnson';
The above example shows how you can use defineProperty and when prop of object o is altered a defined setter ( set ) is called. 上面的示例显示了如何使用defineProperty,并且当对象o的 prop更改时,将调用定义的setter( set )。
At the bottom of this reference you can see that even IE-8 supports it but only under certain conditions (IE8 only support Object.defineProperty to be used on DOM nodes). 在此参考的底部,您可以看到即使IE-8支持它,但仅在某些条件下(IE8仅支持在DOM节点上使用Object.defineProperty)。
But be careful when using it because this would assign a property to the window object as well because of a missing this : 但是在使用它时要小心,因为这会将一个属性分配给window对象,因为它缺少这个 :
var o = { b:''};
Object.defineProperty(o, 'b', {
get: function() { return value; },
set: function(newValue) { value = newValue; },
});
o.b = 'abc';
console.log(window.value); // 'abc'
Way to track old value of a property 跟踪财产的旧价值的方法
This matches more your request: 这符合您的更多要求:
var o = { prop: '' };
Object.defineProperty(o, 'prop', {
get: function() { return this.propValue; },
set: function(newValue) {
// an certain property is being changed
console.log('old-value: ',this['oldprop']);
console.log('new-value: ',newValue);
this.propValue = newValue;
this['oldprop'] = this.propValue;
}
});
o['prop'] = 'joseph';
console.log(o);
o['prop'] = 'jack';
console.log(o);
o['prop'] = 'john';
console.log(o);
Observe whole Object by using Object.defineProperty 使用Object.defineProperty观察整个Object
And in addition to that you could make a function that tracks a whole object and whether any property is being changed: 除此之外,您还可以创建一个跟踪整个对象的函数以及是否正在更改任何属性:
function observeObject(obj){
var keys = Object.keys(obj);
for(var k=0; k < keys.length; k++){
var key = keys[k];
(function(key){
var keyName = key+'value';
var oldKeyName = 'old'+key+'value';
obj[oldKeyName] = obj[key];
Object.defineProperty(obj, key, {
get: function() { return this[keyName]; },
set: function(newValue) {
console.log('old-value: ',this[oldKeyName]);
console.log('new-value: ',newValue);
this[keyName] = newValue;
this[oldKeyName] = this[keyName];
}
});
})(key);
}
}
var person = { name : 'jack', age: 26 };
observeObject(person);
person.name = 'john';
person['age'] = 27;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.