Proxy and Reflect in JavaScript are two new objects in ES6, which can help us intercept and execute custom logic when objects are accessed and manipulated. In this article, we'll discuss the use of Proxy and Reflect's catchers (also known as interceptors), and show examples of what they do.
A catcher for Proxy objects
In JavaScript, the Proxy object can be used to proxy the access and operation of other objects. It provides some catchers (interceptors) to intercept the operation of the target object and execute custom logic. Here are some commonly used catchers:
get catcher
The get catcher can intercept the read operation of object properties and execute custom logic before reading. The get catcher receives two parameters, the target object and the property name.
Here's an example of using the Proxy.get catcher to intercept object property reading:
const obj = {
name: 'Alice',
age: 18,
};
const proxy = new Proxy(obj, {
get(target, prop) {
console.log(`读取属性 ${
prop}`);
return Reflect.get(target, prop);
},
});
console.log(proxy.name); // 读取属性 name，输出 Alice
console.log(proxy.age); // 读取属性 age，输出 18
In the above example, we use the Proxy.get method to intercept the read operation of the object property. Unlike the original object, we output a piece of information before reading the property. In the interceptor, we can perform arbitrary custom logic, such as validation, calculation, etc.
set catcher
The set catcher can intercept the setting operation of object properties and execute custom logic before setting. The set catcher receives three parameters, which are the target object, property name and property value.
Here is an example of using the Proxy.set catcher to intercept object property setting:
const obj = {
name: 'Alice',
age: 18,
};
const proxy = new Proxy(obj, {
set(target, prop, value) {
console.log(`设置属性 ${
prop} 的值为 ${
value}`);
return Reflect.set(target, prop, value);
},
});
proxy.name = 'Bob'; // 设置属性 name 的值为 Bob
proxy.age = 20; // 设置属性 age 的值为 20
In the above example, we use the Proxy.set method to intercept the setting operation of the object property. Unlike primitive objects, we output a piece of information before setting properties. In the interceptor, we can perform arbitrary custom logic, such as validation, calculation, etc.
has catcher
The has catcher can intercept the in operator operation and execute custom logic before the operation. The has catcher receives two parameters, the target object and the property name.
Here is an example of using the Proxy.has catcher to intercept the operation of the in operator:
const obj = {
name: 'Alice',
age: 18,
};
const proxy = new Proxy(obj, {
has(target, prop) {
console.log(`检查属性 ${
prop} 是否存在`);
return Reflect.has(target, prop);
},
});
console.log('name' in proxy); // 检查属性 name 是否存在，输出 true
console.log('gender' in proxy); // 检查属性 gender 是否存在，输出 false
In the above example, we use the Proxy.has method to intercept the in operator operation. Unlike the original object, we output a piece of information before checking the properties. In the interceptor, we can perform arbitrary custom logic, such as validation, calculation, etc.
apply catcher
The apply catcher can intercept the call operation of the function and execute custom logic before calling. The apply catcher receives three parameters, which are target function, target object and function parameter array.
Here is an example of intercepting a function call using the Proxy.apply trap:
function sum(a, b) {
return a + b;
}
const proxy = new Proxy(sum, {
apply(target, thisArg, args) {
console.log(`调用函数 ${
target.name}(${
args})`);
return Reflect.apply(target, thisArg, args);
},
});
console.log(proxy(1, 2)); // 调用函数 sum(1,2)，输出 3
In the above example, we use the Proxy.apply method to intercept the function call operation. Unlike the original function, we output a piece of information before calling the function. In the interceptor, we can perform arbitrary custom logic, such as validation, calculation, etc.
Capture for Reflect objects
The Reflect object is a new object in ES6, which provides a set of static methods for performing object operations. These methods have a one-to-one correspondence with Proxy's catchers and can be used to perform the same operations as catchers. Here are some commonly used Reflect methods:
Reflect. get method
The Reflect.get method is used to read the value of an object property, and its syntax is:
Reflect.get(target, propertyKey[, receiver])
Among them, target represents the target object, propertyKey represents the property name, and receiver represents the object where the property is located (optional).
Here is an example of using the Reflect.get method to read object properties:
const obj = {
name: 'Alice',
age: 18,
};
console.log(Reflect.get(obj, 'name')); // 输出 Alice
console.log(Reflect.get(obj, 'age')); // 输出 18
In the above example, we use the Reflect.get method to read the value of an object property. Unlike accessing properties using dots or square brackets, the Reflect.get method can read a property's value without knowing its name.
Reflect.set method
The Reflect.set method is used to set the value of an object property, and its syntax is:
Reflect.set(target, propertyKey, value[, receiver])
Among them, target represents the target object, and propertyKey represents:
const obj = {
name: 'Alice',
age: 18,
};
const proxy = new Proxy(obj, {
set(target, prop, value, receiver) {
console.log(`设置属性 ${
prop} 的值为 ${
value}`);
return Reflect.set(target, prop, value, receiver);
},
});
proxy.age = 20; // 设置属性 age 的值为 20，输出 "设置属性 age 的值为 20"
console.log(proxy.age); // 输出 20
In the above example, we use the Proxy.set method to intercept the setting operation of the property value. Unlike primitive objects, we output a piece of information before setting properties. In the interceptor, we can perform arbitrary custom logic, such as validation, calculation, etc.
Reflect.has method
The Reflect.has method is used to check whether the object contains the specified property, its syntax is:
Reflect.has(target, propertyKey)
Among them, target represents the target object, and propertyKey represents the property name.
Here is an example of checking object properties using the Reflect.has method:
const obj = {
name: 'Alice',
age: 18,
};
console.log(Reflect.has(obj, 'name')); // 输出 true
console.log(Reflect.has(obj, 'gender')); // 输出 false
In the above example, we use the Reflect.has method to check whether the object contains the specified property. Unlike using the in operator or the hasOwnProperty method, the Reflect.has method can return values other than boolean values, such as numbers, strings, and so on.
Reflect. apply method
The Reflect.apply method is used to call a function, and its syntax is:
Reflect.apply(target, thisArg, args)
Among them, target represents the target function, thisArg represents the this value of the function, and args represents the parameter array of the function.
Here is an example of calling a function using the Reflect.apply method:
function sum(a, b) {
return a + b;
}
console.log(Reflect.apply(sum, null, [1, 2])); // 输出 3
In the above example, we invoked the function using the Reflect.apply method. Different from calling the function directly, the Reflect.apply method can specify the this value of the function, and use the parameter array as the parameter of the function.