Panduan Awal Mengenai Proksi JavaScript

Hai teman-teman yang sedang belajar pemrograman! Hari ini, kita akan memulai perjalanan menarik ke dunia Proksi JavaScript. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - kita akan mulai dari dasar dan mencapai tingkat yang lebih tinggi. Pada akhir panduan ini, Anda akan menjadi ahli dalam seni menggunakan Proksi seperti seorang profesional!

Apa Itu Proksi di JavaScript?

mari mulai dengan analogi sederhana. Bayangkan Anda adalah seorang selebriti (kenapa tidak mimpi besar, kan?). Anda begitu terkenal sehingga Anda memerlukan seseorang untuk mengatur janji, surat penggemar, dan aktivitas sehari-hari lainnya. Orang ini yang bertindak atas nama Anda disebut proksi di dunia nyata.

Di JavaScript, Proksi bekerja dengan cara yang mirip. Itu adalah objek yang membungkus objek lain ( mari kita sebutnya objek target) dan dapat menangkap dan mendefinisikan ulang 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(`Mengakses properti ${property}`);
return target[property];
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);

Jika Anda menjalankan kode ini, Anda akan melihat:

Mengakses properti name
John Doe

mariuraikan 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 diterapkan, mencatat pesan sebelum mengembalikan nilai aktual.

Handler Proksi JavaScript

Sekarang kita sudah mencicipi air, mari masuk lebih dalam ke Handler Proksi. Sebuah handler adalah objek yang mendefinisikan penangkap untuk Proksi 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 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(`Menetapkan 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
Menetapkan properti job ke Developer
Memeriksa jika age ada
true

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

Penggunaan Objek Proksi di JavaScript

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

1. Validasi: Anda dapat menggunakan Proksi untuk memvalidasi data sebelum ditetapkan 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 Proksi untuk mencatat akses 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 Proksi 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);  // Keluaran: David
console.log(proxy.age);   // Keluaran: Properti tidak ditemukan

Daftar Handler Proksi JavaScript

Untuk mengakhiri perjalanan kita ke dunia JavaScript Proxies, mari lihat daftar komprehensif 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 saja! Kita telah menutupi dasar-dasar JavaScript Proxies, mengeksplor penggunaan praktis mereka, dan bahkan melihat semua penangkap handler yang tersedia. Ingat, seperti segala alat yang kuat, Proksi harus digunakan dengan hati-hati. Mereka sangat cocok untuk beberapa kasus penggunaan, tapi mereka juga datang dengan peningkatan performa.

Saya harap panduan ini membantu Anda untuk memahami JavaScript Proxies. Terus latih, terus kode, dan sebelum Anda tahu, Anda akan menjadi ahli dalam menggunakan Proksi! Selamat coding!

Credits: Image by storyset