Proxy

The definition of Proxy in the tutorial is as follows: Proxy is used to modify the default behavior of some operations, that is, to modify the programming language level, which is “metaprogramming”. Proxy means “Proxy”, that is, before accessing an object, an “interception” is established, and any operation accessing the object will pass through this “interception”. Execute the methods defined in the Proxy.

(1) The basic usage of Proxy in ES6 is

支那

 let pro = new Proxy(target,handler);
Copy the code

Where new Proxy is equivalent to creating a Proxy instance, target is the target object to be intercepted, and handler is also an object, which defines the interception method to be carried out on the intercepted object.

The Proxy instance 1

支那

Let target = {name:"小 小 ", age: 15 } let handler = { get:(target,name,)=>{ return "success" } } let pro = new Proxy(target,handler); console.log(pro.name); // The printed result is SUCCESS;Copy the code

The target object is the object to be intercepted, and the handler object is the operation to be performed after intercepting the object. Here, the get method is the read operation, that is, the user wants to read the properties of the interception operation. Finally, I create a Proxy instance, because I set the read interception to return a “success” string, so when I try to read properties in Pro, the result always prints out a “success” string.

The Proxy instance 2

支那

Let target = {name:"小 小 ", age:15}; let handler = {}; let pro = new Proxy(target,handler); console.log(pro.name); // Result = xiaoming pro.name = "xiaoming "; console.log(pro.name); // The result is small redCopy the code

In this case, pro points directly to target. Accessing Pro is equivalent to accessing target, so the result is the result of target.

The Proxy instance 3

Proxy can also be used as a prototype object for other objects

支那

Let target = {name:"小 小 ", age:15} let handler = {get (target,name){return "success"; } } let pro = new Proxy(target,handler); let obj = Object.create(pro); console.log(obj.name); // Prints the result as SUCCESSCopy the code

Explanation: The above example uses Pro as a prototype object of OBj. Although OBJ itself does not have the name attribute, according to the prototype chain, the name attribute will be read on Pro, and then the corresponding interception operation will be performed.

(2) Commonly used interception methods of Proxy

1. The get(Target,name,property) method is used to intercept an operation to read a property. The first parameter is the target object, the second parameter is the property name, and the third parameter is the object (optional) against which the operation is performed.

支那

let handler = { get:function(target,name,property){ if(name in target){ cosnole.log("success"); }else{ console.log("error") } return Reflect.get(target,name,property); }} let target = {name:" ", age:15} let pro = new Proxy(target,handler); pro.name; // Result is success pro.grade; // The result is errorCopy the code

2, set target, name, value, the property), used to intercept a property assignment operation, the first parameter to the target object, the second parameter is the property name, the third argument for attribute values, the fourth parameter as shown in the practice object parameters (optional).

支那

let handler = { set:function(target,name,value,property){ if(typeof value ! = "number"){ console.log("error"); throw new TypeError('The age is not an integer'); }else{ console.log("success"); return Reflect.set(target,name,value,property); }} let target = {name:" ", age:15} let pro = new Proxy(target,handler); pro.age = 35; Pro.age = "12"; // If the result is error, an error is thrownCopy the code

3. Has (target,key), used to intercept the operation of whether the object has a certain attribute value. The first parameter is the target object, and the second parameter is the attribute name

支那

let handler = { has:function(target,key){ if(key[0] ! = "_"){ return false } return true; }} let target = {_name:" ", age:15} let pro = new Proxy(target,handler); console.log("_name" in pro); // Prints true console.log("age" in pro); // Prints falseCopy the code