Object.observe()

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Метод Object.observe() використовувався для асинхронного спостереження за змінами у об'єкті. Він надавав послідовність змін у порядку виникнення. Однак, цей API застарілий та був прибраний з переглядачів. Ви можете, натомість, скористатись більш загальним об'єктом Proxy.

Синтаксис

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

Параметри

obj
Об'єкт для спостереження.
callback
Функція, яка викликається кожен раз, коли відбуваються зміни, з наступним аргументом:
changes
Масив об'єктів, кожен з яких відображає зміну. Властивості цих об'єктів змін:
  • name: Ім'я властивості, яка була змінена.
  • object: Змінений об'єкт після того, як відбулася зміна.
  • type: Строка, що вказує тип зміни. Один з "add", "update" або "delete".
  • oldValue: Тільки для типів "update" та "delete". Значення перед зміною.
acceptList
Список типів змін для спостереження на наданому об'єкті для наданої функції callback. Якщо не заданий, буде використаний масив ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].

Значення, що повертається

Об'єкт для спостереження.

Опис

Функція callback викликається кожен раз, коли у obj відбувається зміна, з масивом усіх змін у порядку, в якому вони відбувались.

Приклади

Логування усіх шістьох типів

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 = 'привіт';
// [{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'}
// ]

Зв'язування даних

// Модель користувача
var user = {
  id: 0,
  name: 'Брендан Айк',
  title: 'п.'
};

// Створити привітання для користувача
function updateGreeting() {
  user.greeting = 'Вітаю, ' + 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('Зміна відстані: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);

setPosition(point, 3, 4);
// Зміна відстані: 5

Специфікації

Strawman proposal specification.

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
observe
DeprecatedNon-standard
Chrome No support 36 — 52Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support Nonodejs No support No

Legend

No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Див. також