[ECMAScript7] Object.observe()

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.

추가적인 사담이 존재합니다.

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

특징

Strawman proposal for ECMAScript 7.

ECMAScript7 에 포함될 예정입니다.

브라우저 지원

• Desktop
 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	36	Not supported [1]	Not supported [2]	23	Not supported

[1]: See bug 800355

[2]: See relevant MS Edge platform status entry

See also

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