Dalam tutorial ini, anda akan belajar mengenai proksi JavaScript dengan bantuan contoh.
Dalam JavaScript, proksi (objek proksi) digunakan untuk membungkus objek dan mentakrifkan semula pelbagai operasi ke dalam objek seperti membaca, memasukkan, pengesahan, dll. Proksi membolehkan anda menambahkan tingkah laku tersuai pada objek atau fungsi.
Membuat Objek Proksi
Sintaks proksi adalah:
new Proxy(target, handler);
Di sini,
new Proxy()- pembina.target- objek / fungsi yang anda mahu proksihandler- dapat mentakrifkan semula tingkah laku khas objek
Sebagai contoh,
let student1 = ( age: 24, name: "Felix" ) const handler = ( get: function(obj, prop) ( return obj(prop) ? obj(prop) : 'property does not exist'; ) ) const proxy = new Proxy(student1, handler); console.log(proxy.name); // Felix console.log(proxy.age); // 24 console.log(proxy.class); // property does not exist
Di sini, get()kaedah digunakan untuk mengakses nilai harta benda objek. Dan jika harta itu tidak terdapat dalam objek, harta itu tidak ada.
Seperti yang anda lihat, anda boleh menggunakan proksi untuk membuat operasi baru untuk objek tersebut. Kes mungkin timbul ketika anda ingin memeriksa apakah objek mempunyai kunci tertentu dan melakukan tindakan berdasarkan kunci itu. Dalam kes seperti itu, proksi boleh digunakan.
Anda juga boleh melepasi penangan kosong. Apabila pengendali kosong dilalui, proksi berperilaku sebagai objek asal. Sebagai contoh,
let student = ( name: 'Jack', age: 24 ) const handler = ( ); // passing empty handler const proxy1 = new Proxy(student, ()); console.log(proxy1); // Proxy (name: "Jack", age: 24) console.log(proxy1.name); // Jack
Pengendali proksi
Proksi menyediakan dua kaedah pengendali get()dan set().
dapatkan () pengendali
The get()kaedah yang digunakan untuk mengakses ciri-ciri objek sasaran. Sebagai contoh,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( return obj(prop); ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack
Di sini, get()kaedah mengambil objek dan harta sebagai parameternya.
pengendali set ()
Yang set()kaedah digunakan untuk menetapkan nilai objek. Sebagai contoh,
let student = ( name: 'John' ) let setNewValue = ( set: function(obj, prop, value) ( obj(prop) = value; return; ) ); // setting new proxy let person = new Proxy(student, setNewValue); // setting new key/value person.age = 25; console.log(person); // Proxy (name: "John", age: 25)
Di sini, harta baru ageditambahkan pada objek pelajar.
Penggunaan Proksi
1. Untuk Pengesahan
Anda boleh menggunakan proksi untuk pengesahan. Anda boleh memeriksa nilai kunci dan melakukan tindakan berdasarkan nilai tersebut.
Sebagai contoh,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( // check condition if (prop == 'name') ( return obj(prop); ) else ( return 'Not allowed'; ) ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack console.log(proxy.age); // Not allowed
Di sini, hanya harta nama objek pelajar yang boleh diakses. Lain, ia kembali Tidak dibenarkan.
2. Hanya Baca Paparan Objek
Mungkin ada kalanya anda tidak mahu membiarkan orang lain membuat perubahan pada objek. Dalam kes sedemikian, anda boleh menggunakan proksi untuk menjadikan objek hanya dapat dibaca. Sebagai contoh,
let student = ( name: 'Jack', age: 23 ) const handler = ( set: function (obj, prop, value) ( if (obj(prop)) ( // cannot change the student value console.log('Read only') ) ) ); const proxy = new Proxy(student, handler); proxy.name = 'John'; // Read only proxy.age = 33; // Read only
Dalam program di atas, seseorang tidak dapat merubah objek dengan cara apa pun.
Sekiranya seseorang cuba memutasikan objek dengan cara apa pun, anda hanya akan menerima rentetan yang mengatakan Hanya Baca.
3. Kesan Sampingan
Anda boleh menggunakan proksi untuk memanggil fungsi lain apabila syarat dipenuhi. Sebagai contoh,
const myFunction = () => ( console.log("execute this function") ); const handler = ( set: function (target, prop, value) ( if (prop === 'name' && value === 'Jack') ( // calling another function myFunction(); ) else ( console.log('Can only access name property'); ) ) ); const proxy = new Proxy((), handler); proxy.name = 'Jack'; // execute this function proxy.age = 33; // Can only access name property
Proksi JavaScript diperkenalkan dari versi JavaScript ES6 . Beberapa penyemak imbas mungkin tidak menyokong penggunaannya sepenuhnya. Untuk mengetahui lebih lanjut, lawati proksi JavaScript.
