Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the reason why Proxy must be used with Reflect in js". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "Proxy in js must be used in cooperation with Reflect" can help you solve the problem.

Pre-knowledge

Proxy proxy, which has a series of "traps" built in to create a proxy for an object to intercept and customize basic operations (such as property lookups, assignments, enumerations, function calls, etc.).

Reflect reflection, which provides a way to intercept JavaScript operations. These methods are the same as those of Proxy.

To put it simply, we can create a proxy object for the original object through Proxy, thus using Reflect in the proxy object to intercept the original operation of JavaScript.

If you don't already know & then go to MDN to catch up on their knowledge.

After all, the core responsive module in the famous VueJs/Core is based on these two Api.

Using Proxy alone

For the first example, let's cook a simple appetizer using Proxy alone:

Const obj = {name: 'wang.haoyu',}; const proxy = new Proxy (obj, {/ / get trap where target represents the original object key represents the access attribute name get (target, key) {console.log (' hijack your data access'+ key); return target [key]},}); proxy.name / / hijack your data access name-> wang.haoyu

It looks simple, right? we created a proxy based on the obj object through Proxy and declared a get trap in Proxy.

When we visit proxy.name, the corresponding get trap is actually triggered. It executes the logic in the get trap, executes the logic in the corresponding trap, and finally returns the corresponding target [key], that is, the so-called wang.haoyu.

Receiver in Proxy

Everything seems to be going well in the Demo above, right? careful students may find that there is an extra parameter receiver in the get trap in Proxy when reading the MDN documents of Proxy.

So what exactly does the receiver here mean? Most students will understand it as a proxy object, but this is not comprehensive.

Next, let's use a simple example as a starting point:

Const obj = {name: 'wang.haoyu',}; const proxy = new Proxy (obj, {/ / get trap where target represents the original object key indicates the accessed attribute name get (target, key, receiver) {console.log (receiver = proxy); return target [key];},}); / / log: trueproxy.name

In the above example, we received the parameter receiver on the get trap of the Proxy instance object.

At the same time, we print console.log (receiver = = proxy) inside the trap; it prints out true, indicating that receiver is indeed equivalent to the proxy object.

So it is true that receiver can represent proxy objects, but this is only a case that receiver represents.

Let's take a look at another example:

Const parent = {get value () {return '19roomfengli;},}; const proxy = new Proxy (parent, {/ / get trap where target represents the original object key represents the access attribute name get (target, key, receiver) {console.log (receiver = proxy); return target [key];},}); const obj = {name:' wang.haoyu',}; / / sets obj inheritance and parent proxy object proxyObject.setPrototypeOf (obj, proxy) / / log: falseobj.value

I elaborate on the "masking" effect of the get/set property accessor that appears on the prototype in this article. I am not going to explain here.

We can see that the above code also prints console.log (receiver = = proxy) on the get trap of the proxy object; the result is false.

So you can think a little bit about what the receiver is here. In fact, this is also the significance of the existence of the third receiver of the get trap in proxy.

It is to pass the correct caller point, you can look at the following code:

Const proxy = new Proxy (parent, {/ / get trap where target represents the original object key represents the accessed attribute name get (target, key, receiver) {- console.log (receiver = proxy) / / log:false+ console.log (receiver = obj) / / log:true return target [key];},});.

In fact, to put it simply, the purpose of the existence of receiver in get traps is to pass context in the trap correctly.

When it comes to property access, don't forget that the get trap also triggers the corresponding property accessor, the so-called get accessor method.

We can clearly see that the above receiver represents the object that inherits from Proxy, that is, obj.

Seeing here, we understand that the receiver of the get trap in Proxy not only represents the Proxy proxy object itself, but also may represent the object that inherits Proxy.

In essence, it is to ensure the correct context access of the caller in the trap function, for example, the receiver here points to obj.

Of course, you should not confuse the this in the revceiver and get traps, where the this keyword represents the handler object of the proxy.

For example:

Const parent = {get value () {return '19roomfengli;},}; const handler = {get (target, key, receiver) {console.log (this = handler); / / log: true console.log (receiver = obj); / / log: true return target [key];},}; const proxy = new Proxy (parent, handler); const obj = {name:' wang.haoyu',} / / set the proxy object proxyObject.setPrototypeOf (obj, proxy) that obj inherits from parent; / / log: receiver in falseobj.valueReflect

After knowing the receiver of get traps in Proxy, let's talk about the receiver of Reflect reflecting get traps in API while the iron is hot.

We know that in Proxy (we all use get traps as an example below) the third parameter receiver represents the proxy object itself or the object inherited from the proxy object, and it represents the correct context when the trap is triggered.

Const parent = {name:'19 inherited fengli, get value () {return this.name;},}; const handler = {get (target, key, receiver) {return Reflect.get (target, key); / / equivalent to return target [key]},}; const proxy = new Proxy (parent, handler); const obj = {name: 'wang.haoyu',}; / / set proxyObject.setPrototypeOf (obj, proxy) where obj inherits from parent / / log: falseconsole.log (obj.value)

Let's analyze the code above a little bit:

When we call obj.value, the value attribute does not exist because obj itself does not exist.

There is a property access operator for value in the proxy object it inherits, so the masking effect occurs.

The get value () attribute access operation on the proxy is triggered.

At the same time, the get trap is triggered because the value property accessor on proxy is accessed.

When entering a trap, target is the source object, that is, parent, and key is value.

Returning Reflect.get (target,key) in a trap is equivalent to target [key].

At this point, unwittingly, the this point has been secretly modified in the get trap!

The original caller's obj is modified to the corresponding target, or parent, in the trap.

The corresponding parent [value], that is, 19Qingfeng, is printed out naturally.

This is obviously not what we expected, and when I visit obj.value, I want to correctly output the corresponding name attribute on itself, which is called obj.value = > wang.haoyu.

In that case, the receiver of the get trap in Relfect is magical.

Const parent = {name:'19 examples fenglish, get value () {return this.name;},}; const handler = {get (target, key, receiver) {- return Reflect.get (target, key); + return Reflect.get (target, key, receiver);},}; const proxy = new Proxy (parent, handler); const obj = {name: 'wang.haoyu',}; / / set proxyObject.setPrototypeOf (obj, proxy) for obj inheritance and parent / / log: wang.haoyuconsole.log (obj.value)

The principle of the above code is actually very simple:

First of all, we mentioned earlier that the receiver of the get trap in Proxy represents not only the proxy object itself, but also the object inherited from the proxy object, which needs to be different from the caller. Here it is obviously an obj that points to inheritance and proxy objects.

Second, the third parameter in the get trap in Reflect passes receiver in Proxy, that is, obj, as a formal parameter, which modifies the this point at the time of the call.

You can simply interpret Reflect.get (target, key, receiver) as a target [key]. Call (receiver), but this is a piece of pseudo code, but it may be easier for you to understand.

I believe you already understand what the receiver stands for in Relfect. Yes, it can modify the this in property access to point to the incoming receiver object.

This is the end of the content about "the reason why Proxy must be used with Reflect in js". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.