Proksi JavaScript

Dalam tutorial ini, Anda akan belajar tentang proxy JavaScript dengan bantuan contoh.

Dalam JavaScript, proxy (objek proxy) digunakan untuk membungkus objek dan mendefinisikan kembali berbagai operasi ke dalam objek seperti membaca, menyisipkan, validasi, dll. Proxy memungkinkan Anda menambahkan perilaku khusus ke objek atau fungsi.

Membuat Objek Proxy

Sintaks proxy adalah:

 new Proxy(target, handler);

Sini,

  • new Proxy() - konstruktor.
  • target - objek / fungsi yang ingin Anda proxy
  • handler - dapat mendefinisikan kembali perilaku kustom 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()metode digunakan untuk mengakses nilai properti objek. Dan jika properti tidak tersedia di objek, maka properti mengembalikan tidak ada.

Seperti yang Anda lihat, Anda dapat menggunakan proxy untuk membuat operasi baru untuk objek tersebut. Kasus mungkin muncul ketika Anda ingin memeriksa apakah suatu objek memiliki kunci tertentu dan melakukan tindakan berdasarkan kunci tersebut. Dalam kasus seperti itu, proxy dapat digunakan.

Anda juga bisa melewati penangan kosong. Ketika handler kosong dilewatkan, proxy berperilaku sebagai objek asli. 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

Penangan proxy

Proxy menyediakan dua metode penangan get()dan set().

get () handler

The get()metode yang digunakan untuk mengakses properti dari objek target. 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()metode mengambil objek dan properti sebagai parameternya.

set () handler

The set()metode yang digunakan untuk menetapkan nilai dari sebuah 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, properti baru ageditambahkan ke objek siswa.

Penggunaan Proxy

1. Untuk Validasi

Anda dapat menggunakan proxy untuk validasi. Anda dapat memeriksa nilai kunci dan melakukan tindakan berdasarkan nilai itu.

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 properti nama objek siswa yang dapat diakses. Lain, itu kembali Tidak diizinkan.

2. Tampilan Hanya Baca dari sebuah Objek

Ada kalanya Anda tidak ingin membiarkan orang lain membuat perubahan pada suatu objek. Dalam kasus seperti itu, Anda dapat menggunakan proxy untuk membuat 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 mengubah objek dengan cara apapun.

Jika seseorang mencoba untuk mengubah objek dengan cara apa pun, Anda hanya akan menerima string yang mengatakan Hanya Baca.

3. Efek Samping

Anda dapat menggunakan proxy untuk memanggil fungsi lain ketika suatu kondisi terpenuhi. 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 browser mungkin tidak mendukung sepenuhnya penggunaannya. Untuk mempelajari lebih lanjut, kunjungi proxy JavaScript.

Artikel yang menarik...