Veraltet
Dieses Feature ist veraltet. Obwohl es in manchen Browsern immer noch funktioniert, wird von seiner Benutzung abgeraten, da es jederzeit entfernt werden kann. Es sollte daher nicht mehr verwendet werden.
Die Object.observe()
Methode kann genutzt werden, um auf Änderungen an einem Objekt asynchron zu reagieren. Sie bietet einen Stream der Änderungen in der Reihenfolge ihres Auftretens. Da die Methode veraltet ist und Beschränkungen aufweist, sollte lieber ein Proxy
Objekt verwendet werden.
Syntax
Object.observe(obj, callback[, acceptList])
Parameter
obj
- Das Objekt, das beobachtet werden soll.
callback
- Eine Callback-Funktion, die jedes mal aufgerufen wird, wenn eine Änderung am Objekt vorgenommen wird
changes
- Ein Array von Objekten, die die vorgenommenen Änderungen repräsentieren. Die Eigenschaften der Objekte sind jeweils
name
: Der Name der Eigenschaft, welche geändert wurdeobject
: Das (bereits) geänderte Objekt.type
: Ein String der Angibt, welcher Art die vorgenommene Änderung war. Entspricht"add"
,"update"
, oder"delete"
.oldValue
: Existiert nur, wenn der type"update"
oder"delete"
ist. Der ursprüngliche Wert vor der Änderung.
acceptList
- Eine Liste von Änderungstypen die für das gegebene Objekt und jeweilige Callback beobachtet werden sollen. Standardmäßig
["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]
.
Beschreibung
callback
wird jedes mal aufgerufen, wenn das obj
geändert wird. Die Funktion erhält dabei die Liste aller Änderungen in chronologischer Reihenfolge ihres Auftretens.
Beispiele
Ausgabe aller sechs Änderungsarten
var obj = {
foo: 0,
bar: 1
};
Object.observe(obj, function(changes) {
console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]
obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]
Object.defineProperty(obj, 'foo', {writable: false});
// [{name: 'foo', object: <obj>, type: 'reconfigure'}]
Object.setPrototypeOf(obj, {});
// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}]
Object.seal(obj);
// [
// {name: 'foo', object: <obj>, type: 'reconfigure'},
// {name: 'bar', object: <obj>, type: 'reconfigure'},
// {object: <obj>, type: 'preventExtensions'}
// ]
Data Binding
// A user model
var user = {
id: 0,
name: 'Brendan Eich',
title: 'Mr.'
};
// Create a greeting for the user
function updateGreeting() {
user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();
Object.observe(user, function(changes) {
changes.forEach(function(change) {
// Any time name or title change, update the greeting
if (change.name === 'name' || change.name === 'title') {
updateGreeting();
}
});
});
Eigens definierter Änderungstyp
// A point on a 2D plane
var point = {x: 0, y: 0, distance: 0};
function setPosition(pt, x, y) {
// Performing a custom change
Object.getNotifier(pt).performChange('reposition', function() {
var oldDistance = pt.distance;
pt.x = x;
pt.y = y;
pt.distance = Math.sqrt(x * x + y * y);
return {oldDistance: oldDistance};
});
}
Object.observe(point, function(changes) {
console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);
setPosition(point, 3, 4);
// Distance change: 5
Spezifikationen
Browserunterstützung
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 36 | Nicht unterstützt [1] | Nicht unterstützt [2] | 23 | Nicht unterstützt |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | Nicht unterstützt | 36 | Nicht unterstützt [1] | Nicht unterstützt [2] | 23 | Nicht unterstützt |
[1]: See Bug 800355
[2]: See relevant MS Edge platform status entry