Proxy dan Reflect

Intersep operasi objek + API refleksi terpadu.

Pahami konsepnya

Proxy membungkus objek dan mencegat operasi padanya: get (baca properti), set (tulis properti), has (in operator), deleteProperty, dan lainnya. Ini fondasi framework reactivity (Vue 3, MobX) dan validasi otomatis.

const p = new Proxy(target, handler) — handler berisi trap: get(target, prop) { ... return Reflect.get(target, prop) }. Reflect menyediakan method yang sama dengan Proxy trap — gunakan keduanya bersama.

Symbol.iterator sebagai generator method membuat objek custom bisa di-for-of dan di-spread. Symbol.toPrimitive mengatur konversi objek ke primitif (number/string). Well-known symbols ini adalah pintu ke metaprogramming tingkat lanjut.

Coba contoh kode

// Proxy: log semua akses
const data = { nama: "Ari", umur: 17 };

const proxy = new Proxy(data, {
  get(target, prop) {
    console.log(`baca: ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, nilai) {
    console.log(`tulis: ${prop} = ${nilai}`);
    return Reflect.set(target, prop, nilai);
  },
});

console.log(proxy.nama);    // log: "baca: nama" lalu "Ari"
proxy.umur = 18;            // log: "tulis: umur = 18"

Trap get mencegat SETIAP pembacaan properti; set mencegat penulisan. Reflect.get/set melakukan operasi asli setelah logging. Ini cara framework melacak perubahan data secara otomatis.

Latihan singkat

Uji: Proxy yang uppercase setiap get — proxy.nama harus `ARI`.