MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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.

Ö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(objcallback[, 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

Özellik Chrome Firefox (Gecko) Internet Explorer Opera Safari
Temel Destek 36 Not supported Not supported 23 Not supported
Özellik Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Temel Destek Not supported 36 Not supported Not supported 23 Not supported

Ayrıca bakınız

Document Tags and Contributors

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