Gözlemlenebilir (Observable)

Bir nesneyi “gözlemlenebilir” yapan ve bir proxy döndüren makeObservable(target) fonksiyonunu oluşturun.

Şöyle çalışmalı:

function makeObservable(target) {
  /* kodunuz */
}

let user = {};
user = makeObservable(user);

user.observe((key, value) => {
  alert(`SET ${key}=${value}`);
});

user.name = "John"; // alerts: SET name=John

Başka bir deyişle, makeObservable tarafından döndürülen nesnede observe(handler) metodu bulunur.

Bir özelliğin değeri değiştiğinde, ilgili özelliğin adı ve değeri ile handler(key, value) çağrılır.

Not: Bu görevde yalnızca bir özelliğe değer atamayı (yazmayı) ele alın. Diğer işlemler benzer şekilde uygulanabilir. Ek Not: Handler’ları saklamak için global bir değişken veya global bir yapı kullanabilirsiniz. Burada bu uygundur. Gerçek hayatta, böyle bir fonksiyon kendi global kapsamına sahip bir modülde yaşar.

Çözüm iki bölümden oluşur:

.observe(handler) çağrıldığında, handler’ı daha sonra çağırabilmek için bir yerde saklamamız gerekir. Bunu, sembolümüzü anahtar olarak kullanarak doğrudan nesnede saklayabiliriz.
Herhangi bir değişiklik durumunda handler’ları çağırmak için set tuzağına sahip bir proxy’ye ihtiyacımız var.

let handlers = Symbol('handlers');

function makeObservable(target) {
  // 1. Handler'ları saklamak için alanı başlat
  target[handlers] = [];

  // Handler fonksiyonunu ileride çağırmak için diziye ekle
  target.observe = function(handler) {
    this[handlers].push(handler);
  };

  // 2. Değişiklikleri yakalamak için bir proxy oluştur
  return new Proxy(target, {
    set(target, property, value, receiver) {
      let success = Reflect.set(...arguments); // İşlemi nesneye ilet
      if (success) { // Özellik atanırken hata yoksa
        // Tüm handler'ları çağır
        target[handlers].forEach(handler => handler(property, value));
      }
      return success;
    }
  });
}

let user = {};

user = makeObservable(user);

user.observe((key, value) => {
  alert(`SET ${key}=${value}`);
});

user.name = "John";