Object.observe()

Object.observe() 메소드는 객체의 변화를 비동기로 감시하는데에 사용된다. 이 메소드는 변화들이 발생한 순서대로 그 흐름을 제공한다.

문법

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

파라미터

obj

감시될 객체입니다.

callback

obj의 변경이 일어났을 때마다 호출될 함수입니다. 다음과 같은 인자를 갖습니다.

changes

변경 사항을 나타내는 객체의 배열입니다. 그 객체의 프로퍼티는 다음과 같습니다.

• name: 변경된 프로퍼티의 이름입니다.
• object: 변경이 일어난 뒤의 객체입니다.
• type: 변경의 종류를 의미하는 string입니다. "add", "update", "delete" 중 하나입니다.
• oldValue: 변경되기 이전의 값입니다. "update"와 "delete" 타입에만 존재합니다.

acceptList

감시할 변경의 종류를 의미하는 리스트입니다.  주어지지 않은 경우, 배열 ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] 이 이용될 것입니다.

설명

callback은 obj에 변경이 있을 때마다 실행되며, 모든 변경 사항이 일어난 순서대로 담긴 배열이 전달됩니다.

예제

Logging all six different types

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}]

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'}
// ]

데이터 바인딩

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

// Create a greeting for the user
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Any time name or title change, update the greeting
    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

Specifications

Strawman proposal for ECMAScript 7.

브라우저 호환성

[1]: See bug 800355

[2]: See relevant MS Edge platform status entry

같이 보기

• Object.unobserve()
• Array.observe()