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.

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
observe
非推奨非標準
Chrome 未対応 36 — 52Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なしnodejs 未対応 なし

凡例

未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報