Concepts related to Proxy

Proxy is used to modify the default behavior of certain operations (that is, programming a programming language, also known as metaprogramming)

Another way to think about it: Compares the object you created is a big star, then the Proxy is like the big star's agent, now have advertisers want to look for the big star, advertisers will have to look for the agent, then the agent think, this advertisement is quite good, can meet, then go to the big star, if the agent think the advertisers do not have what the sincerity, You can just say no to the advertiser.Copy the code

Proxy acts as the role of the broker. All external access to the object must pass the interception first. Therefore, external access can be filtered and rewritten.

Of course, you could also say that there is no way that an advertiser will find the star without an agent. So, in this case, there's no broker, there's no blocking, there's no filtering, rightCopy the code

That is, for the proxy to work, you must operate on the proxy instance, not the target object. (That is, you should talk to an agent, not a celebrity)

Okay, so now that we know a little bit about proxy, let’s see how to use proxy.

A Proxy constructor is provided in ES6 to generate a Proxy instance.

Const proxy = new proxy (target,handler); The target is our target object (the big star in the above example), and the handler is used to customize the blocking behavior.Copy the code

A few tips

tips: 1: if the handler is not set to intercept the operation, will fall on the target object directly, according to the original way of producing results (for example, light agent take salary, don't work, throw everything to the big star) 2: of course, specify what agent is doing too much or too little (agent, after all, also want to go off work) 3: Const proxy = new proxy ({},{get:function(target,propKey){return 35; } }) let obj = Object.create(proxy); Obj. Time //35 here we create a proxy object. When we get time, obj does not have this property now, so it will look up on the prototype chainCopy the code

13 kinds of operations

Of course, brokers are not omnipotent and do not necessarily have all kinds of things. At present, brokers can do 13 kinds of things

1: get(target, propKey, receiver) : intercepts reading of object properties, such as proxy.foo and proxy['foo']. 2: set(target, propKey, value, receiver) : Intercepts the setting of object properties, such as proxy.foo = v or proxy['foo'] = v, and returns a Boolean value. 3: has(target, propKey) : Intercepts the propKey operation in proxy and returns a Boolean value. 4: deleteProperty(target, propKey) : intercepts the operation of delete Proxy [propKey] and returns a Boolean value. 5: ownKeys (target) : interception Object. GetOwnPropertyNames (proxy), Object. GetOwnPropertySymbols (proxy), the Object. The keys (proxy), for... The in loop returns an array. This method returns the property names of all of the target Object's own properties, whereas object.keys () returns only the traversable properties of the target Object itself. 6: getOwnPropertyDescriptor (target, propKey) : interception Object. GetOwnPropertyDescriptor (proxy, propKey), returns the attributes describe objects. DefineProperty (target, propKey, propDesc) : Intercepts Object.defineProperty(proxy, propKey, propDesc), Object.defineProperties(proxy, propDescs), and returns a Boolean value. 8: preventExtensions(target) : intercept object. preventExtensions(proxy), return a Boolean. 9: getPrototypeOf(target) : Intercepts object.getProtoTypeof (proxy) and returns an Object. 10: isExtensible(target) : Intercepts Object. IsExtensible (proxy), returning a Boolean value. 11: setPrototypeOf(target, proto) : Intercepts object. setPrototypeOf(proxy, proto) and returns a Boolean value. If the target object is a function, there are two additional operations that can be intercepted. 12: Apply (target, object, args) : intercepts Proxy instances as function calls, such as Proxy (... The args), proxy. Call (object,... The args), proxy. Apply (...). . Construct (Target, args) : construct(target, args) : intercepts operations called by Proxy instances as constructors, such as new Proxy (... The args).Copy the code

For more details, visit es6.ruanyifeng.com/#docs/proxy

Okay, when a star wants to fire his agent, what do you do?

Proxy.revocable() — Cancel the Proxy

The proxy.revocable () method returns a Proxy instance that can be canceled

For example, const target = {}; const handler = {}; const {proxy,revoke} = Proxy.revocable(target,handler); proxy.foo = 123; proxy.foo //123 revoke(); Foo // TypeError:Revoke The proxy. revocable method returns an object whose proxy property is a proxy instance, and the Revoke () property is a function to Revoke a proxy instance. Accessing the Proxy instance after executing REVOKE will result in an error.Copy the code

This points to the

Although the Proxy can Proxy access to the target object, it is not a transparent Proxy for the target object (that is, without any interception, it cannot be guaranteed to behave the same as the target object).

The main reason is that the this keyword inside the target object points to the proxy

Const target = {m:function (){console.log(this === proxy)}} const handler = {}; Const proxy = new proxy (target,handler) target.m() //false proxy.m() // true Not Target.Copy the code

There are also some internal properties of native objects that can only be retrieved with the correct this,

So proxy can’t proxy these native object properties either, but you can solve this problem by binding the original object.

Reference: es6.ruanyifeng.com/#docs/proxy