JavaScript Proxy

Trong hướng dẫn này, bạn sẽ tìm hiểu về proxy JavaScript với sự trợ giúp của các ví dụ.

Trong JavaScript, proxy (đối tượng proxy) được sử dụng để bọc một đối tượng và xác định lại các hoạt động khác nhau vào đối tượng như đọc, chèn, xác thực, v.v. Proxy cho phép bạn thêm hành vi tùy chỉnh vào một đối tượng hoặc một hàm.

Tạo một đối tượng proxy

Cú pháp của proxy là:

 new Proxy(target, handler);

Đây,

  • new Proxy() - người xây dựng.
  • target - đối tượng / chức năng mà bạn muốn ủy quyền
  • handler - có thể xác định lại hành vi tùy chỉnh của đối tượng

Ví dụ,

 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

Ở đây, get()phương thức được sử dụng để truy cập giá trị thuộc tính của đối tượng. Và nếu thuộc tính không có sẵn trong đối tượng, nó trả về thuộc tính không tồn tại.

Như bạn thấy, bạn có thể sử dụng proxy để tạo các hoạt động mới cho đối tượng. Một trường hợp có thể phát sinh khi bạn muốn kiểm tra xem một đối tượng có một khóa cụ thể hay không và thực hiện một hành động dựa trên khóa đó. Trong những trường hợp như vậy, proxy có thể được sử dụng.

Bạn cũng có thể vượt qua một trình xử lý trống. Khi một trình xử lý trống được chuyển qua, proxy sẽ hoạt động như một đối tượng gốc. Ví dụ,

 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

Trình xử lý proxy

Proxy cung cấp hai phương thức xử lý get()và set().

get () xử lý

Các get()phương pháp được sử dụng để truy cập vào các thuộc tính của một đối tượng mục tiêu. Ví dụ,

 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

Ở đây, get()phương thức nhận đối tượng và thuộc tính làm tham số của nó.

set () xử lý

Các set()phương pháp được sử dụng để thiết lập giá trị của một đối tượng. Ví dụ,

 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)

Ở đây, một thuộc tính mới ageđược thêm vào đối tượng student.

Sử dụng Proxy

1. Để xác thực

Bạn có thể sử dụng proxy để xác thực. Bạn có thể kiểm tra giá trị của một khóa và thực hiện một hành động dựa trên giá trị đó.

Ví dụ,

 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

Ở đây, chỉ có thuộc tính name của đối tượng student là có thể truy cập được. Khác, nó trả về Không được phép.

2. Chỉ đọc Chế độ xem của một đối tượng

Có thể có những lúc bạn không muốn để người khác thay đổi đối tượng. Trong những trường hợp như vậy, bạn có thể sử dụng proxy để làm cho một đối tượng chỉ có thể đọc được. Ví dụ,

 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

Trong chương trình trên, người ta không thể thay đổi đối tượng theo bất kỳ cách nào.

Nếu một người cố gắng thay đổi đối tượng theo bất kỳ cách nào, bạn sẽ chỉ nhận được một chuỗi thông báo Chỉ đọc.

3. Tác dụng phụ

Bạn có thể sử dụng proxy để gọi một hàm khác khi một điều kiện được đáp ứng. Ví dụ,

 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

Proxy JavaScript được giới thiệu từ phiên bản JavaScript ES6 . Một số trình duyệt có thể không hỗ trợ đầy đủ việc sử dụng nó. Để tìm hiểu thêm, hãy truy cập proxy JavaScript.

thú vị bài viết...