Ö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
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 |