Basic understanding of proxy in js

basic concept

The original meaning of the word Proxy is proxy, and it is used here to indicate that it will "proxy" certain operations, which can be translated as "agent";

let proxy = new Proxy(target,handle);

All usages of the Proxy object are in the above form, the only difference is the way of writing the handle parameter.
Among them, new Proxy() indicates to generate a Proxy instance, the target parameter indicates the target object to be intercepted, and the handler parameter is also an object, which is used to customize the interception behavior.
Proxy can be understood as setting up a layer of "interception" before the target object. External access to the object must first pass through this layer of interception. Therefore, a mechanism is provided to filter and rewrite external access.

var proxy = new Proxy({},{
get: function(){
return ‘’
}
})

As a constructor, Proxy accepts two parameters:
the first parameter is the target object to be proxied (the above example is an empty object), that is, if there is no intervention of Proxy, the object to be accessed is the original operation; the second parameter
is A configuration object. For each proxy operation, a corresponding processing function needs to be provided, which will intercept the corresponding operation.

If the handler does not set any interception, it is equivalent to directly leading to the original object.

Proxy's interception operation list

get operation

get(target, propKey, receiver): intercepts the reading of object properties, such as proxy.foo and proxy['foo'].
The get method is used to intercept the read operation of a certain attribute, and can accept three parameters, which are the target object, the attribute name and the proxy instance itself (strictly speaking, it is the object targeted by the operation behavior, that is, the so-called receiver). The last parameter is optional.
The get method can be inherited.

let obj = { a: 1 };
Let proxy = new proxy(obj, {
get:function(target, attr){
return target[attr]
}
})
Console.log(proxy.a);            // 1

Simulation chain operation of classic example of get operation

function stack(){
let funcStack = [];
let proxy = new proxy({},{
get:function(target, attrs){
  If(attrs=== ‘get’){
return funcStack .reduce(function(val,fn){
return fn(val)
}, value);
}
funcStack.push(window[attrs]);
return proxy;
}
})
return proxy;
}

let double = n => n * 2;
let pow = n => n * n;
let reverseInt = n => n.toString().split(“”).reverse().join(‘’) | 0;
stack(3).double.pow.reverseInt .get;    // 63

set operation

The set method is used to intercept the assignment operation of a certain attribute, and can accept four parameters, which are:
target object
attribute name
attribute value
Proxy instance itself
The last parameter is optional.
The set operation is generally used to filter, process or set permissions for the number to be assigned

let obj = { a:1, b: 2 };
let proxy = new Proxy(obj, {
get:function(target, attr, recevier){
return target[attr]
},
set:function(target,attr,value){
target[attr] = value
}
})

Author: Liu Guowei