Object.observe()

Object.observe() 메소드는 객체에 변화가 생기는 것을 감지하는 곳에 사용됩니다.

observe 메소드는 객체내에 변화가 생겼을 때 명령을 내리는 것을 제공합니다.

사담 : Object.observer() 메소드는 ECMAScript7 에서 지원하는 것이므로 2016년에 배포될 예정입니다.

브라우저 지원은 포스팅하는 지금 시점에는 크롬 46버전 부터 지원하는 것으로 알려져있습니다.

현재 크롬 최신 버전은 47 버전이므로 크롬으로 테스트하실경우 테스트가 가능합니다.

문법

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

매개변수

obj

감시할 객체.

callback

콜백함수는 아래와같은 변수변화가 생길때 호출됩니다.

changes

changes 배열객체의 프로퍼티들은 아래의 객체들과 같습니다.

name: name 프로퍼티는 변화가 생긴 프로퍼티 이름 입니다.
object: 객체의 변화가 생긴 후의 객체를 가리킵니다. 즉, 변화가 생긴 객체.
type: 문자열인 이 프로퍼티는 "add", "update" 혹은 "delete" 중 어떤 변화인지 나타냅니다.
oldValue: "update"와 "delete" 타입에서만 값이 할당되며 변화되기 이전의 값을 나타냅니다.

acceptList

The list of types of changes to be observed on the given object for the given callback. If omitted, the array ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]will be used.

설명

콜백은 객체의 변화가 있을 때 호출 됩니다.

예시

6가지 모든 타입을 기록합니다.

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();
    }
  });
});

직접 변화를 시켜보겠습니다.

// 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