Прокси JavaScript

В этом руководстве вы узнаете о прокси JavaScript с помощью примеров.

В JavaScript прокси (прокси-объект) используются для обертывания объекта и переопределения различных операций в объекте, таких как чтение, вставка, проверка и т. Д. Прокси-сервер позволяет вам добавлять пользовательское поведение к объекту или функции.

Создание прокси-объекта

Синтаксис прокси:

 new Proxy(target, handler);

Вот,

  • new Proxy() - конструктор.
  • target - объект / функция, которую вы хотите проксировать
  • handler - может переопределить настраиваемое поведение объекта

Например,

 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

Здесь get()метод используется для доступа к значению свойства объекта. И если свойство недоступно в объекте, он возвращает свойство не существует.

Как видите, вы можете использовать прокси для создания новых операций над объектом. Может возникнуть ситуация, когда вы хотите проверить, имеет ли объект определенный ключ, и выполнить действие на основе этого ключа. В таких случаях можно использовать прокси.

Вы также можете передать пустой обработчик. Когда передается пустой обработчик, прокси ведет себя как исходный объект. Например,

 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

Обработчики прокси

Прокси предоставляет два метода обработки get()и set().

get () обработчик

get()Метод используется для доступа к свойствам целевого объекта. Например,

 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

Здесь get()метод принимает объект и свойство в качестве параметров.

set () обработчик

set()Метод используется для установки значения объекта. Например,

 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)

Здесь ageк объекту ученика добавляется новое свойство .

Использование прокси

1. Для проверки

Вы можете использовать прокси для проверки. Вы можете проверить значение ключа и выполнить действие на основе этого значения.

Например,

 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

Здесь доступно только свойство name объекта student. В противном случае возвращается значение "Не разрешено".

2. Просмотр объекта только для чтения

Бывают случаи, когда вы не хотите позволять другим вносить изменения в объект. В таких случаях вы можете использовать прокси, чтобы сделать объект доступным только для чтения. Например,

 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

В приведенной выше программе нельзя каким-либо образом изменить объект.

Если кто-то попытается каким-либо образом изменить объект, вы получите только строку «Только для чтения».

3. Побочные эффекты

Вы можете использовать прокси для вызова другой функции, когда выполняется условие. Например,

 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

Прокси-сервер JavaScript появился в версии JavaScript ES6 . Некоторые браузеры могут не полностью поддерживать его использование. Чтобы узнать больше, посетите прокси-сервер JavaScript.

Интересные статьи...