廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

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.

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 36 [1] 未サポート [2] 未サポート [3] 23 未サポート
機能 Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート (有) [1] 未サポート [2] 未サポート [3] 23 未サポート 36[1]

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

[2] バグ 800355 を参照。

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: Marsf, x2357, shide55
最終更新者: Marsf,