Object.observe()

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

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"] 이 이용될 것입니다.

설명

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

예제

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.

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 36 No support [1] No support [2] 23 No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 36 No support [1] No support [2] 23 No support

[1]: See bug 800355

[2]: See relevant MS Edge platform status entry

같이 보기

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: NessunKim, keikeiem
 최종 변경: NessunKim,