Object.observe()

Object.observe() メソッドは、オブジェクトの変更を非同期で監視するために使用されました。このメソッドは、発生順に並んだ一連の変更の流れを提供します。このメソッドによって発生順に一連の変更内容が生成されます。しかしながら、この API の使用は非推奨となり、ブラウザから削除されています。代わりに、一般的な Proxy オブジェクトを使用してください。

構文

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

引数

obj

監視対象のオブジェクト。

callback

変更のたびに呼ばれる関数。以下の引数とともに使われます:

changes

変更を表すオブジェクトからなる配列。これら変更オブジェクトのプロパティは次のとおり:

• name: 変更されたプロパティの名称。
• object: 変更後のオブジェクト。
• type: 変更の種類を示す文字列。"add"、"update"、"delete" のいずれか。
• oldValue: "update" と "delete" についてのみ。変更前の値。

acceptList

与えたコールバックに対し、引数に渡したオブジェクト上で監視された変更の種類のリスト。省略した場合、["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] という配列が使用される。

戻り値

監視されるオブジェクト。

説明

callback は、obj に変更があるたび呼び出され、発生順にすべての変更結果を含む配列が渡されます。

使用例

全 6 種類の変更のログ

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: , type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: , type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: , type: 'delete', oldValue: 2}]

Object.defineProperty(obj, 'foo', {writable: false});
// [{name: 'foo', object: , type: 'reconfigure'}]

Object.setPrototypeOf(obj, {});
// [{name: '__proto__', object: , type: 'setPrototype', oldValue: }]

Object.seal(obj);
// [
//   {name: 'foo', object: , type: 'reconfigure'},
//   {name: 'bar', object: , type: 'reconfigure'},
//   {object: , type: 'preventExtensions'}
// ]

データバインディング

// A user model
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// ユーザへの挨拶文を作成
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // 名前と肩書が変更されたら挨拶文を更新する
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

独自の変更タイプ

// 2 次元平面上の点
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // 独自のプロパティ変更を行う
  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

仕様

Strawman proposal specification.

ブラウザ実装状況

[1] Chrome 49 で非推奨となり、Chrome 50 でフラグがオフに設定され、Chrome 52 で完全に削除されました。

[2] バグ 800355 を参照。

[3] MS Edge プラットフォームの実装状況項目を参照。

関連情報

• Object.unobserve()
• Array.observe()
• Object.Observer の提案撤回