0Pricing
JavaScript Academy · Pelajaran

Kasus Penggunaan Praktis Proxy

Buat objek untuk validasi, logging, dan reaktivitas.

Kasus Penggunaan Praktis Proxy adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Proksi dalam Praktik

Sekarang Anda akan menggabungkan proksi dan Reflect untuk menyelesaikan masalah nyata: validasi, pencatatan, nilai default, dan lainnya. Setiap pola membungkus objek biasa tanpa mengubahnya.

Pembungkus Validasi

Terapkan skema: tolak setiap penulisan yang gagal memenuhi rule. Target tetap bersih karena data yang buruk tidak pernah masuk.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

Pembungkus Pencatatan

Lacak setiap pembacaan dan penulisan untuk proses debug dengan meneruskan operasi melalui Reflect setelah pencatatan.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

Nilai Default

Kembalikan fallback untuk setiap properti yang hilang, sehingga pembacaan tidak pernah menghasilkan undefined.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

Pengindeksan Array Negatif

Buat array mendukung indeks negatif bergaya Python dengan menerjemahkannya dalam perangkap get.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

Tampilan Hanya-Baca

Tampilkan objek yang dapat dibaca tetapi tidak pernah dapat ditulis, berguna untuk melindungi config bersama.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

Menghitung Akses

Lacak berapa kali setiap properti dibaca dengan menyimpan counts di luar target.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

Properti Virtual Terhitung

Tampilkan nilai turunan yang tidak disimpan, tetapi dihitung ulang setiap kali dibaca.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

Melempar Galat saat Pembacaan Tidak Dikenal

Temukan kesalahan ketik lebih awal dengan melempar galat saat kode membaca properti yang tidak ada.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

Menggabungkan Aspek

Pembungkus nyata sering menggabungkan validasi dan pencatatan dalam satu penangan, dengan setiap perangkap meneruskan operasi ke Reflect.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

Mengapa Pola Ini Penting

Proksi menambahkan perilaku lintas aspek, validasi, pencatatan, nilai default, dan kontrol akses tanpa mengotori objek original atau pemanggilnya. Inilah cara kerja sistem reaktif dalam kerangka kerja untuk mengamati perubahan state. Gunakan proksi saat Anda memerlukan intersepsi transparan.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

Pemeriksaan Singkat

Perangkap proksi mana yang akan Anda gunakan untuk menolak nilai yang tidak valid sebelum disimpan?

Ringkasan: Kasus Penggunaan Proksi Praktis

Anda telah menerapkan proksi pada masalah nyata:

  • Validasi dalam perangkap set menolak data yang buruk.
  • Pencatatan melacak pembacaan dan penulisan melalui Reflect.
  • Nilai default dan properti virtual berada dalam perangkap get.
  • Tampilan hanya-baca, penghitungan akses, dan pemeriksaan salah ketik yang ketat semuanya membungkus objek secara transparan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kasus Penggunaan Praktis Proxy” gratis?

Ya — teks lengkap “Kasus Penggunaan Praktis Proxy” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kasus Penggunaan Praktis Proxy”?

Buat objek untuk validasi, logging, dan reaktivitas. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Kasus Penggunaan Praktis Proxy” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Membuat Proxy
  2. Perangkap get dan set
  3. API Reflect
  4. Kasus Penggunaan Praktis Proxy
← Kembali ke JavaScript Academy