Membuat Proxy
Bungkus objek untuk mencegat operasi.
Membuat Proxy adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu Proksi?
Proksi membungkus objek dan memungkinkan Anda mencegat operasi dasar seperti membaca, menulis, dan menghapus properti.
Anda membuatnya dengan new Proxy(target, handler), dengan penangan yang mendefinisikan perangkap untuk menyesuaikan perilaku.
Penangan Kosong
Dengan penangan kosong, proksi berperilaku persis seperti target. Setiap operasi diteruskan langsung.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target dan Proksi Berbagi State
Proksi tidak menyalin target. Keduanya mereferensikan objek dasar yang sama, sehingga perubahan melalui salah satunya terlihat pada keduanya.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Menambahkan Perangkap get
Perangkap get mencegat pembacaan properti. Di sini setiap pembacaan dicatat sebelum nilainya dikembalikan.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Parameter Perangkap
Perangkap get menerima target, nama properti, dan receiver (proksi). Anda menentukan nilai yang akan dikembalikan.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Properti Terhitung saat Dibaca
Perangkap get dapat mengembalikan nilai yang sebenarnya tidak disimpan oleh target, dengan menghitungnya secara langsung.
const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
get(target, prop) {
if (prop === 'full') return target.first + ' ' + target.last;
return target[prop];
}
});
console.log(proxy.full);Menambahkan Perangkap set
Perangkap set mencegat penulisan. Anda harus mengembalikan true untuk menandakan keberhasilan; jika tidak, penugasan dianggap gagal.
const proxy = new Proxy({}, {
set(target, prop, value) {
console.log('setting ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.score = 42;
console.log(proxy.score);Perangkap has
Perangkap has mencegat operator in, sehingga Anda dapat menyesuaikan pemeriksaan keanggotaan.
const proxy = new Proxy({ a: 1 }, {
has(target, prop) {
console.log('checking ' + prop);
return prop in target;
}
});
console.log('a' in proxy);
console.log('b' in proxy);Perangkap deleteProperty
Perangkap deleteProperty mencegat delete. Kembalikan true jika berhasil.
const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
deleteProperty(target, prop) {
console.log('deleting ' + prop);
delete target[prop];
return true;
}
});
delete proxy.secret;
console.log(Object.keys(proxy));Banyak Perangkap yang Tersedia
Selain get dan set, proksi mendukung perangkap untuk has, deleteProperty, ownKeys, apply (untuk fungsi), construct, dan lainnya. Anda hanya perlu mengimplementasikan yang dibutuhkan.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Mengapa Proksi Penting
Proksi memungkinkan Anda menambahkan validasi, pencatatan, nilai fallback, dan reaktivitas tanpa mengubah objek target. Proksi mendukung sistem reaktivitas dalam kerangka kerja seperti Vue. Selanjutnya, Anda akan mempelajari perangkap get dan set secara lebih mendalam.
const logged = new Proxy({ v: 0 }, {
get: (t, p) => { console.log('get ' + p); return t[p]; },
set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);Pemeriksaan Singkat
Apa yang dibuat oleh new Proxy(target, handler)?
Ringkasan: Membuat Proksi
Anda telah mempelajari cara mencegat operasi objek:
new Proxy(target, handler)membungkus objek dengan perangkap.- Penangan kosong meneruskan semuanya; proksi dan target berbagi state.
- Perangkap umum:
get,set,has,deleteProperty,ownKeys. - Perangkap set dan delete harus mengembalikan
truesaat berhasil.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membuat Proxy” gratis?
Ya — teks lengkap “Membuat 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 “Membuat Proxy”?
Bungkus objek untuk mencegat operasi. 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 1 dari 4.
Berapa lama pelajaran “Membuat 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.