Ö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
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!
Özellik | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Temel Destek | 36 | No support | No support | 23 | No support |
Özellik | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Temel Destek | No support | 36 | No support | No support | 23 | No support |