Objek proxy JavaScript memungkinkan Anda mencegat dan menyesuaikan perilaku objek lain, tanpa mengubah aslinya.
Menggunakan objek proxy, Anda dapat memvalidasi data, menyediakan fungsionalitas ekstra, dan mengontrol akses ke properti dan fungsi.
Cari tahu semua tentang penggunaan objek proxy dan cara membuatnya dalam JavaScript.
Membuat Objek Proksi
Di JavaScript, Anda dapat membuat objek proxy menggunakan Proksikonstruktor. Konstruktor ini mengambil dua argumen: a target objek untuk membungkus proxy dan a pawang objek yang propertinya menentukan perilaku proxy saat Anda melakukan operasi.
Dibutuhkan argumen ini dan membuat objek yang dapat Anda gunakan sebagai pengganti objek target. Objek yang dibuat ini dapat mendefinisikan kembali operasi inti seperti mendapatkan, menyetel, dan mendefinisikan properti. Anda juga dapat menggunakan objek proxy ini untuk mencatat akses properti dan memvalidasi, memformat, atau membersihkan input.
Misalnya:
const objek asli = {
foo: "batang"
}const pawang = {
mendapatkan: fungsi(target, properti){
kembali target[properti];
},
mengatur: fungsi(target, properti, nilai){
target[properti] = nilai;
}
};
const proksi = baruProksi(Objek asli, penangan)
Kode ini membuat objek target, originalObject, dengan satu properti, foo, dan objek penangan, pawang. Objek handler berisi dua properti, mendapatkan Dan mengatur. Properti ini dikenal sebagai perangkap.
Perangkap objek proxy adalah fungsi yang dipanggil setiap kali Anda melakukan tindakan tertentu pada objek proxy. Perangkap memungkinkan Anda mencegat dan menyesuaikan perilaku objek proxy. Mengakses properti dari objek proxy memanggil mendapatkan trap, dan memodifikasi atau memanipulasi properti dari objek proxy memanggil mengatur perangkap.
Terakhir, kode membuat objek proksi dengan Proksi konstruktor. Itu berlalu originalObject Dan pawang sebagai objek target dan handler, masing-masing.
Menggunakan Objek Proksi
Objek proxy memiliki beberapa kegunaan dalam JavaScript, beberapa di antaranya adalah sebagai berikut.
Menambahkan Fungsionalitas ke Objek
Anda dapat menggunakan objek proxy untuk membungkus objek yang sudah ada dan menambahkan fungsionalitas baru, seperti logging atau penanganan kesalahan, tanpa memodifikasi objek aslinya.
Untuk menambahkan fungsionalitas baru, Anda harus menggunakan Proksi konstruktor dan tentukan satu atau lebih jebakan untuk tindakan yang ingin Anda cegat.
Misalnya:
const objekpengguna = {
nama depan: "Kennedy",
nama keluarga: "Martin",
usia: 20,
};const pawang = {
mendapatkan: fungsi(target, properti){
menghibur.catatan(`Mendapatkan properti "${properti}"`);
kembali target[properti];
},
mengatur: fungsi(target, properti, nilai){
menghibur.catatan(`Menetapkan properti "${properti}" untuk menilai "${nilai}"`);
target[properti] = nilai;
},
};const proksi = baruProksi(userObject, penangan);
menghibur.log (proxy.firstName); // Mendapatkan properti "firstName" Kennedy
menghibur.log (proxy.lastName); // Mendapatkan properti "lastName" Martins
proxy.umur = 23; // Mengatur properti "usia" untuk menilai "23"
Blok kode ini menambahkan fungsionalitas melalui perangkap proxy, mendapatkan Dan mengatur. Sekarang, ketika Anda mencoba mengakses atau mengubah properti dari userObject, objek proxy pertama-tama akan mencatat operasi Anda ke konsol sebelum mengakses atau memodifikasi properti.
Memvalidasi Data Sebelum Mengaturnya pada Objek
Anda dapat menggunakan objek proxy untuk memvalidasi data dan memastikannya memenuhi kriteria tertentu sebelum menyetelnya pada objek. Anda dapat melakukannya dengan mendefinisikan logika validasi di a mengatur perangkap di pawang obyek.
Misalnya:
const objekpengguna = {
nama depan: "Kennedy",
nama keluarga: "Martin",
usia: 20,
};const pawang = {
mendapatkan: fungsi(target, properti){
menghibur.catatan(`Mendapatkan properti "${properti}"`);
kembali target[properti];
},
mengatur: fungsi(target, properti, nilai){
jika (
Properti "usia" &&
jenis nilai == "nomor" &&
nilai > 0 &&
nilai < 120
) {
menghibur.catatan(`Menetapkan properti "${properti}" untuk menilai "${nilai}"`);
target[properti] = nilai;
} kalau tidak {
melemparkanbaruKesalahan("Parameter tidak valid. Harap tinjau dan perbaiki.");
}
},
};
const proksi = baruProksi(userObject, penangan);
proxy.umur = 21;
Blok kode ini menambahkan aturan validasi ke mengatur perangkap. Anda dapat menetapkan nilai apa pun ke usia properti pada a userObject contoh. Namun, dengan aturan validasi tambahan, Anda hanya dapat menetapkan nilai baru ke properti usia jika berupa angka, lebih besar dari 0, dan kurang dari 120. Nilai apa pun yang Anda coba atur di usia properti yang tidak memenuhi kriteria yang dibutuhkan akan memicu kesalahan dan mencetak pesan kesalahan.
Mengontrol Akses ke Properti Objek
Anda dapat menggunakan objek proxy untuk menyembunyikan properti tertentu dari suatu objek. Lakukan dengan mendefinisikan logika pembatasan di mendapatkan jebakan untuk properti yang aksesnya ingin Anda kontrol.
Misalnya:
const objekpengguna = {
nama depan: "Kennedy",
nama keluarga: "Martin",
usia: 20,
telepon: 1234567890,
surel: "[email protected]",
};const pawang = {
mendapatkan: fungsi(target, properti){
jika (Properti "telepon" || Properti "surel") {
melemparkanbaruKesalahan("Akses ke info ditolak");
} kalau tidak {
menghibur.catatan(`Mendapatkan properti "${properti}"`);
kembali target[properti];
}
},
mengatur: fungsi(target, properti, nilai){
menghibur.catatan(`Menetapkan properti "${properti}" untuk menilai "${nilai}"`);
target[properti] = nilai;
},
};const proksi = baruProksi(userObject, penangan);
menghibur.log (proxy.firstName); // Mendapatkan properti "firstName" Kennedy
menghibur.log (proxy.email); // Melempar kesalahan
Blok kode di atas menambahkan batasan tertentu ke mendapatkan perangkap. Awalnya, Anda dapat mengakses semua properti yang tersedia di userObject. Aturan tambahan mencegah akses ke informasi sensitif seperti email atau telepon pengguna. Mencoba mengakses salah satu properti ini akan memicu kesalahan.
Perangkap Proksi Lainnya
Itu mendapatkan Dan mengatur jebakan adalah yang paling umum dan berguna, tetapi ada 11 jebakan proxy JavaScript lainnya. Mereka:
- menerapkan: The menerapkan trap berjalan saat Anda memanggil fungsi pada objek proxy.
- membangun: The membangun trap berjalan saat Anda menggunakan operator baru untuk membuat objek dari objek proxy.
- hapusProperti: The hapusProperti perangkap berjalan saat Anda menggunakan menghapus operator untuk menghapus properti dari objek proxy.
- memiliki - The memiliki perangkap berjalan saat Anda menggunakan di dalam operator untuk memeriksa apakah ada properti pada objek proxy.
- ownKeys - The ownKeys trap berjalan saat Anda memanggil salah satu Objek.getOwnPropertyNames atau Object.getOwnPropertySymbols berfungsi pada objek proxy.
- getOwnPropertyDescriptor - The getOwnPropertyDescriptor jebakan berjalan saat Anda memanggil Object.getOwnPropertyDescriptor berfungsi pada objek proxy.
- defineProperty - The defineProperty jebakan berjalan saat Anda memanggil Object.defineProperti berfungsi pada objek proxy.
- preventExtensions - The preventExtensions jebakan berjalan saat Anda memanggil Object.preventExtensions berfungsi pada objek proxy.
- dapat diperluas - The dapat diperluas jebakan berjalan saat Anda memanggil Object.isExtensible berfungsi pada objek proxy.
- getPrototypeOf - The getPrototypeOf jebakan berjalan saat Anda memanggil Object.getPrototypeOf berfungsi pada objek proxy.
- setPrototypeOf - The setPrototypeOf jebakan berjalan saat Anda memanggil Object.setPrototypeOf berfungsi pada objek proxy.
Seperti mengatur Dan mendapatkan traps, Anda dapat menggunakan traps ini untuk menambahkan lapisan baru fungsionalitas, validasi, dan kontrol ke objek Anda tanpa memodifikasi aslinya.
Kontra Objek Proksi
Objek proxy bisa menjadi alat yang ampuh untuk menambahkan fungsionalitas khusus atau validasi ke objek. Tetapi mereka juga memiliki beberapa kelemahan potensial. Salah satu kelemahan tersebut adalah kesulitan dalam melakukan debug, karena sulit untuk melihat apa yang terjadi di balik layar.
Objek proxy juga bisa sulit digunakan, terutama jika Anda tidak terbiasa dengannya. Anda harus hati-hati mempertimbangkan kelemahan ini sebelum menggunakan objek proxy dalam kode Anda.
