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
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
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