JavaScript Academy · Pelajaran

Perangkap get dan set

Sesuaikan pembacaan dan penulisan properti.

Perangkap get dan set adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Perangkap get dan set

Perangkap get dan set adalah pengait proksi yang paling sering digunakan. Keduanya mencegat pembacaan dan penulisan properti, sehingga Anda dapat mengubah nilai, memvalidasi input, atau mencatat akses.

Signature Perangkap get

get(target, property, receiver) dijalankan setiap kali properti dibaca. Kembalikan apa pun yang ingin Anda tampilkan kepada pemanggil.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Nilai Default melalui get

Perangkap get dapat menyediakan nilai fallback untuk properti yang hilang, alih-alih mengembalikan undefined.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

Mengubah Nilai saat Dibaca

Perangkap get dapat mengubah bentuk nilai saat dikembalikan, misalnya mengubah string menjadi huruf besar.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Signature Perangkap set

set(target, property, value, receiver) dijalankan setiap kali terjadi penulisan. Perangkap ini harus mengembalikan true saat berhasil; jika tidak, mode ketat akan melempar galat.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Validasi dalam set

Penggunaan klasik perangkap set adalah validasi: menolak nilai yang tidak valid sebelum nilai tersebut mencapai target.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Mengonversi Nilai dalam set

Selain menolak, perangkap set dapat menormalkan input, misalnya dengan memangkas spasi string sebelum menyimpannya.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Mencatat Kedua Operasi

Gabungkan get dan set untuk melacak setiap akses. Hal ini sangat berguna untuk men-debug cara sebuah objek digunakan.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

Menerapkan Hanya-Baca

Perangkap set yang selalu menolak penulisan mengubah proksi menjadi tampilan hanya-baca dari targetnya.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Kunci Simbol dan Internal

Perangkap juga dijalankan untuk kunci simbol. Berhati-hatilah: mencatat setiap properti, termasuk simbol internal, dapat menghasilkan terlalu banyak catatan, jadi lakukan penyaringan bila diperlukan.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Mengapa get dan set Penting

Bersama-sama, perangkap ini memungkinkan validasi, properti terhitung, nilai default, pencatatan, dan reaktivitas, semuanya tanpa mengubah target. Namun, menulis target[prop] = value secara manual di dalam perangkap memiliki kasus khusus. Antarmuka Reflect, yang akan dibahas berikutnya, menanganinya dengan benar.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Pemeriksaan Singkat

Apa yang harus dikembalikan oleh perangkap set untuk menandakan penugasan yang berhasil?

Ringkasan: Perangkap get dan set

Anda telah mempelajari perangkap inti proksi:

get(target, prop, receiver) mencegat pembacaan; kembalikan nilai apa pun.
set(target, prop, value, receiver) mencegat penulisan; kembalikan true saat berhasil.
Gunakan keduanya untuk nilai default, transformasi, validasi, dan pencatatan.
Untuk penanganan internal yang benar di dalam perangkap, gunakan Reflect, yang akan dibahas berikutnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Perangkap get dan set” gratis?

Ya — teks lengkap “Perangkap get dan set” 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 “Perangkap get dan set”?

Sesuaikan pembacaan dan penulisan properti. 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 2 dari 4.

Berapa lama pelajaran “Perangkap get dan set” 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

← Kembali ke JavaScript Academy