Object.observe()

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

Сводка

Метод Object.observe() используется для асинхронного обзора изменений в объекте. Он предоставляет поток изменений в порядке их возникновения.

Синтаксис

Object.observe(obj, callback)

Параметры

obj
Обозреваемый объект.
callback
Функция, вызываемая при возникновении изменений в объекте, принимает следующий аргумент:
changes
Массив объектов, представляющих одно изменение. Объекты с изменениями содержат следующие свойства:
  • name: имя изменённого свойства.
  • object: изменённый объект после изменения.
  • type: строка, указывающая тип произошедшего изменения. Может принимать одно из значений: "add", "update" или "delete".
  • oldValue: только для типов "update" и "delete". Значение до изменения.

Описание

Функция 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 = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

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

Пример: привязка данных

// Пользовательская модель
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();
    }
  });
});

 

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

 

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

Черновое предложение к обсуждению для ECMAScript 7.

Совместимость с браузерами

 
Update compatibility data on GitHub
КомпьютерыМобильныеServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung InternetNode.js
observe
УстаревшаяНестандартная
Chrome Нет поддержки 36 — 52Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нетnodejs Нет поддержки Нет

Легенда

Нет поддержки  
Нет поддержки
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах

Смотрите также