Object.observe()

Object.observe() được sử dụng để đồng bộ quan sát những thay đổi cho một đối tượng. Nó cung cấp một dòng thay đổi trong thứ tự mà chúng xảy ra.

Cú pháp

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

Tham số

obj

Đối tượng được quan sát.

callback

Hàm được gọi mỗi lần có thay đổi trong obj, với những tham số sau:

changes

Một mảng các đối tượng mô tả sự thay đổi. Mỗi đối tượng chứa cá thuộc tính:

• name: Tên thuộc tính đã thay đổi.
• object: Đối tượng được thay đổi.
• type: Một chuỗi cho biết loại thay đổi đang diễn ra. Có thể là "add", "update", hoặc "delete".
• oldValue: Chỉ có trong loại "update" và "delete". Cho biết giá trị trước khi thay đổi.

acceptList

Danh sách các loại thay đổi được quan sát. Nếu bỏ qua, mặc định là ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"].

Mô tả

Hàm callback được gọi mỗi khi có thay đổi trong obj, với một mảng các đối tượng chứa thông tin về sự thay đổi.

Ví dụ

Ghi lại tất cả sau loại thay đổi khác nhau

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

Ràng buộc dữ liệu

// Mô hình user
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Lời chào tới user
function updateGreeting() {
  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Bất kỳ khi nào tên hoặc danh hiệu thay đổi, gọi updateGreeting()
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

Loại thay đổi tùy chỉnh

// Một điểm trên một mặt phẳng
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // Thực hiện thay đổi tùy chỉnh
  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

Đặc tả

Strawman proposal for ECMAScript 7.

Khả năng tương thích trình duyệt

Xem thêm

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