Object.observe()

Özet

Object.observe() methodu bir objedeki değişimleri izlemenizi sağlar. Geri dönüş için belirlediğiniz fonksiyona, obje üzerinde gerçeklenen değişikleri, oluşma sırasına göre gönderir.

Söz Dizimi

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

Parametreler

obj

İzlenecek Obje.

callback

Değişiklikler her gerçekleştiğinde çağırılacak fonksiyon. Aşağıdaki argümanlar ile çağırılır,

changes

Her bir değişikliği temsilen bir objenin bulunduğu bir dizi döner. Objenin elemanları;

• name:  Değişen elemanın adı.
• object: Objenin yeni hali.
• type: Metin türünde değişim. Bu metin "add", "update", ve "delete" olabilir.
• oldValue: Eğer değiştirme ve ya silme işlemi gerçekleşti ise değişimden önceki değeri içerir.

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.

Açıklama

callback fonksiyonu objede gerçekleşen her değişimde çağırılır. Bir dizi içerisinde değişiklikleri içeren objeler bulunur.

Örnekler

Örnelk: 6 farklı tipi kayıt altına alma

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

Örnek: Veri bağlama

// bir kullanıcı sınıfı
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Kullanıcı için bir selemlama oluştur.
function updateGreeting() {
  user.greeting = 'Merhaba, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // isim yada soyisim her değiştiğinde oluşturulan selamlayı düzenle.
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

Örnek: Özel değişim türü

// 2 boyutlu düzlemde bir nokta
var point = {x: 0, y: 0, distance: 0};

function setPosition(pt, x, y) {
  // özel bir değişim gerçekleştir.
  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);
// Mesafe değişimi: 5

Özellikler

Strawman proposal for ECMAScript 7.

Tarayıcılar Arası Uyumluluk

Ayrıca bakınız

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