Object.observe()

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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.

The Object.observe() method is used for asynchronously observing the changes to an object. It provides a stream of changes in the order in which they occur.

Syntax

Object.observe(obj, callback[, acceptList])

Parameter

obj
Das Objekt, das beobachtet werden soll.
callback
The function called each time changes are made, with the following argument:
changes
An array of objects each representing a change. The properties of these change objects are:
  • name: The name of the property which was changed.
  • object: The changed object after the change was made.
  • type: A string indicating the type of change taking place. One of "add", "update", or "delete".
  • oldValue: Only for "update" and "delete" types. The value before the change.
acceptList
The list of types of changes to be observed on the given object for the given callback. If omitted, the array ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] will be used.

Description

callback is called each time a change is made to obj, with an array of all changes in the order in which they occurred.

Examples

Logging all six different types

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();
    }
  });
});

Custom change type

// 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

Specifications

Strawman proposal for ECMAScript 7.

Browser compatibility

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

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Godfather27, RichTech
 Zuletzt aktualisiert von: Godfather27,