An article to understand the use of proxies in JavaScript

What is an agent

Definition on MDN: Proxy objects are used to define custom behaviors for basic operations (such as property lookup, assignment, enumeration, function calls, etc.).

The official definition is always so obscure and boring, so what exactly can Proxy do?

1. The concept of agent comes from metaprogramming, which is a kind of program that can read, modify, analyze, and even generate new programs. JS can perform JS metaprogramming through the two objects Proxy and Reflect! !

2.Proxy is a proxy. When it is inconvenient for us to access an object or we are not satisfied with simple access, the proxy can act as a "middleman" to help us better control the operation of the object! !

Basic knowledge of Proxy

grammar:

const handler = {};
let target = {}; //Target object let userProxy = new Proxy(target,handler); //Proxy is implemented successfully! !
userProxy.a = 1;
console.log(target.a);//1
console.log(target == userProxy); //false

target : the target object to be wrapped with Proxy

handle r: An object that usually has functions as attributes, where the functions in each attribute define the behavior of the agent when performing various operations.

OK! Then congratulations, you have mastered the definition of Proxy.

In use, we need to pay more attention to the code of the proxy behavior in the handler, which can help us use Proxy better

Handler object methods

const handler = {
	get(target,prop,receiver){
		console.log('get!');
		return 'a';
	}
}
let target = {name:'tar'};
let userProxy = new Proxy(target,handler);
userProxy.name

Of course, there are many other methods, please refer to MDN: Methods of handler objects

What Proxy can achieve

Tracking property access

When we need to know when an object is accessed or modified.

 let target = {
	name:'ww'
	}
 const handlers = {
    get(tar, prop){
     	console.log('get');
     	return Reflect.get(...arguments); 
     },
     set(tar,prop){
		console.log('set');
		return Reflect.set(...arguments);
	 }
  }
  let userProxy = new Proxy(target, handlers);
  userProxy.name;
  userProxy.name = 'wqw';

Solve the problem of object properties being undefined

let target = {}
  let handlers = {
    get: (target, property) => {
      target[property] = (property in target) ? target[property] : {}
      if (typeof target[property] === 'object') {
        return new Proxy(target[property], handlers)
      }
      return target[property]
    }
  }
  let proxy = new Proxy(target, handlers)
  console.log('z' in proxy.xy) // false (In fact, this step has created an xy attribute for `target`)
  proxy.xyz = 'hello'
  console.log('z' in proxy.xy) // true
  console.log(target.xyz) // hello

We proxy get and perform logical processing inside it. If the value we want to get comes from a non-existent key, we will create the corresponding key in target and then return a proxy object for this key.

This ensures that our value-taking operation will not throw can not get xxx from undefined

However, this will have a small disadvantage, that is, if you really want to determine whether the key exists, you can only use the in operator to determine it, and you cannot directly determine it through get.

References:

MDN-Proxy

JS-Design Patterns

What interesting things can Proxy do?

Metaprogramming

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!