JavaScript - Proxies: Panduan untuk Pemula

Hai teman-teman yang sedang belajar pemrograman! Hari ini, kita akan memulai sebuah perjalanan menarik ke dalam dunia Proxies di JavaScript. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - kita akan mulai dari dasar dan perlahan-lahan naik tingkat. Pada akhir tutorial ini, Anda akan menjadi mahir dalam seni menggunakan Proxies seperti seorang profesional!

Apa itu Proxy di JavaScript?

Mari kita mulai dengan sebuah analogi sederhana. Bayangkan Anda adalah seorang selebriti (karena mengapa tidak impikan besar, kan?). Anda begitu terkenal sehingga Anda memerlukan seseorang untuk mengelola janji Anda, surat penggemar, dan kegiatan sehari-hari lainnya. Orang ini yang bertindak atas nama Anda disebut proxy di dunia nyata.

Di JavaScript, Proxy bekerja dengan cara yang sama. Itu adalah sebuah objek yang membungkus objek lainnya ( mari kita sebutnya objek target) dan dapat menangkap serta mengubah operasi fundamental untuk objek itu. Menarik, kan?

Berikut adalah contoh dasar untuk memulai:

let target = {
name: "John Doe",
age: 30
};

let handler = {
get: function(target, property) {
console.log(`Mengambil properti ${property}`);
return target[property];
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);

Jika Anda menjalankan kode ini, Anda akan melihat:

Mengambil properti name
John Doe

mari kitauraikan ini:

1. Kita memiliki objek target dengan properti name dan age.
2. Kita membuat objek handler dengan penangkap get.
3. Kita membuat proxy menggunakan kontruktur Proxy, mengirimkan target dan handler kita.
4. Ketika kita mencoba mengakses proxy.name, penangkap get kita diterima, mencatat pesan sebelum mengembalikan nilai aktual.

Handler Proxy di JavaScript

Sekarang kita sudah mencicipi air, mari kita masuk lebih mendalam ke Handler Proxy. Sebuah handler adalah objek yang menentukan penangkap untuk Proxy kita. Penangkap adalah metode yang menyediakan pencarian properti, penugasan, penomeran, panggilan fungsi, dll.

Berikut adalah tabel dari beberapa penangkap handler umum:

Penangkap	Deskripsi
get	Menangkap akses properti
set	Menangkap penugasan properti
has	Menangkap operator in
deleteProperty	Menangkap operator delete
apply	Menangkap panggilan fungsi
construct	Menangkap operator new

Mari kita lihat contoh yang lebih komprehensif menggunakan beberapa penangkap:

let target = {
name: "Alice",
age: 25
};

let handler = {
get: function(target, property) {
console.log(`Mengakses properti ${property}`);
return target[property];
},
set: function(target, property, value) {
console.log(`Mengatur properti ${property} ke ${value}`);
target[property] = value;
return true;
},
has: function(target, property) {
console.log(`Memeriksa jika ${property} ada`);
return property in target;
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);  // Menimbulkan penangkap get
proxy.job = "Developer";  // Menimbulkan penangkap set
console.log("age" in proxy);  // Menimbulkan penangkap has

Menjalankan kode ini akan mengeluarkan:

Mengakses properti name
Alice
Mengatur properti job ke Developer
Memeriksa jika age ada
true

Apakah itu menarik? Proxy kita sekarang menangkap akses properti, penugasan, dan operator in!

Penggunaan Objek Proxy di JavaScript

Anda mungkin bertanya-tanya, "Ini menarik dan semuanya, tapi kapan saya sebenarnya akan menggunakannya?" Pertanyaan yang bagus! Proxies memiliki beberapa aplikasi praktis:

1. Validasi: Anda dapat menggunakan Proxies untuk memvalidasi data sebelum diatur pada objek.

let user = {
name: "Bob",
age: 30
};

let validator = {
set: function(obj, prop, value) {
if (prop === "age") {
if (typeof value !== "number") {
throw new TypeError("Umur harus berupa nomor");
}
if (value < 0 || value > 120) {
throw new RangeError("Umur harus antara 0 dan 120");
}
}
obj[prop] = value;
return true;
}
};

let proxiedUser = new Proxy(user, validator);

proxiedUser.age = 25;  // Ini berkerja
try {
proxiedUser.age = "tiga puluh";  // Ini melempar TypeError
} catch (e) {
console.log(e.message);
}
try {
proxiedUser.age = 150;  // Ini melempar RangeError
} catch (e) {
console.log(e.message);
}

2. Logging: Anda dapat menggunakan Proxies untuk mencatat akses ke properti objek.

let target = {
name: "Charlie",
age: 35
};

let logger = {
get: function(target, property) {
console.log(`Properti ${property} diakses pada ${new Date()}`);
return target[property];
}
};

let proxiedTarget = new Proxy(target, logger);

console.log(proxiedTarget.name);
console.log(proxiedTarget.age);

3. Nilai Default: Anda dapat menggunakan Proxies untuk menyediakan nilai default untuk properti yang tidak ada.

let handler = {
get: function(target, property) {
return property in target ? target[property] : "Properti tidak ditemukan";
}
};

let proxy = new Proxy({}, handler);

proxy.name = "David";
console.log(proxy.name);  // Mengeluarkan: David
console.log(proxy.age);   // Mengeluarkan: Properti tidak ditemukan

Daftar Handler Proxy

Untuk mengakhiri perjalanan kita ke dalam dunia JavaScript Proxies, mari kita lihat daftar komprehensif dari semua penangkap handler yang tersedia:

Handler Trap	Deskripsi
get	Menangkap pengambilan nilai properti
set	Menangkap penugasan nilai properti
has	Menangkap operator in
deleteProperty	Menangkap operator delete
apply	Menangkap panggilan fungsi
construct	Menangkap operator new
getPrototypeOf	Menangkap Object.getPrototypeOf
setPrototypeOf	Menangkap Object.setPrototypeOf
isExtensible	Menangkap Object.isExtensible
preventExtensions	Menangkap Object.preventExtensions
getOwnPropertyDescriptor	Menangkap Object.getOwnPropertyDescriptor
defineProperty	Menangkap Object.defineProperty
ownKeys	Menangkap Object.getOwnPropertyNames dan Object.getOwnPropertySymbols

Dan itu adalah! Kita telah menutupi dasar-dasar JavaScript Proxies, mengeksplor penggunaan praktis mereka, dan bahkan melihat semua penangkap handler yang tersedia. Ingat, seperti semua alat yang kuat, Proxies harus digunakan dengan bijak. Mereka sangat baik untuk beberapa kasus penggunaan, tetapi mereka datang dengan peningkatan overhead performa.

Saya harap tutorial ini telah membantu Anda untuk mengungkap rahasia JavaScript Proxies. Terus latih, terus coding, dan sebelum Anda tahu, Anda akan menjadi mahir dalam menggunakan proxy! Selamat coding!

Credits: Image by storyset