Proxy is a Proxy, and ES6 gives developers the ability to intercept and embed additional behavior into basic operations. Speaking is adding a layer of interception before setting access to a target object and so on, where you can do whatever you want and define what you want, you know what I mean?

grammar

const p = new Proxy(target, handler)
Copy the code

Target: the target object wrapped by Proxy.

Handler: An object whose attribute is a Trap function for the agent that fires a specified Trap function when operations are performed on the target object.

Using the example

let test = {
	name:'panda'}; test =new Proxy(test , {
	get(target,key) {
		console.log('I intercepted an attempt to access a property value in the test object')
		console.log(target) // {name:' panda '}
		console.log(key)  // name
		return target[key] 
	}
});

console.log(test.name) / / panda
Copy the code

In the example above, we first create a Test object with the name attribute inside. Then we wrap it with a Proxy and return it to Test. Test is now a Proxy instance and everything I do to it will be intercepted by the Proxy.

There are two parameters in Proxy. The first parameter is target, and the value passed in is the test object we have above. The second parameter is handler, which is filled with functions, commonly known as Trap. Each operation of the target function triggers a corresponding Trap function. For example, if I get the target object, I trigger the GET function. The set function is triggered by an assignment to an attribute of the target function. So we’ve got a get function here, but there’s a bunch of Trap functions. (Click below to learn the parameters and usage of each Trap function.)

As you can see, the last sentence is intercepted by the Proxy when we get the property name from the test object and output the value in the console, triggering the GET function located in the handler object.

Using the example

So let’s look at another example now that we understand the above

let test = {
	name:'panda'.id:'111'
};
test = new Proxy(test , {
	get(target,key) {
		return target[key] 
	},
     set(target,key,value){
         if ( key==='id' && typeofvalue! = ="string" ) {
         		throw Error('ID field must be string type')
         }
         target[key] = value
         return true}});console.log(test.name) / / panda
test.id = 222 
Copy the code

First, the operation of obtaining the name attribute value of the target function and outputting it to the console is intercepted by the Proxy, triggering the GET function in the handler object. Then the target function attribute value is re-assigned, which is intercepted by the Proxy, triggering the set function in the handler object. In the set function, the value type assigned to the attribute is judged, and if it is not a string type, an exception is thrown. Otherwise, it is a string and returns true on success and false on failure.

Reflect

The second example above could have been written the same way

.set(target,key,value){
         if ( key==='id' && typeofvalue! = ="string" ) {
         		throw Error('ID field must be string type')}return Reflect.set(target,key,value)
      }	
...
Copy the code

The set function evaluates the type of value assigned to an attribute and throws an exception if it is not a string. Otherwise it is a string and executes Reflect’s set function.

This Reflect is a built-in object that provides methods to intercept JS operations. These methods are the same as the proxy Handlers method.

So what’s the difference between the Reflect function and the Handlers function, you can click here and see Reflect

Attached original JS Proxy(Proxy) diffuse thinking