Object.observe()

This translation is incomplete. Please help translate this article from English.

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() đượ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

Tính năng Chrome Firefox (Gecko) Internet Explorer Opera Safari
Hỗ trợ cơ bản 36 Not supported Not supported 23 Not supported
Tính năng Android Chrome dành cho Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Hỗ trợ cơ bản Not supported 36 Not supported Not supported 23 Not supported

Xem thêm

Document Tags and Contributors

 Contributors to this page: Khai96_
 Last updated by: Khai96_,