Quick understanding of reflection and proxy in ES6 in 5 minutes

Time:2021-4-20

Reflection: reflect

What is reflection?

Its essence is an object (JS built-in), in which there are some functions to call.

Why is it called reflection?

Because what it can do is very similar to reflection in other languages (Java, python, etc.). In other languages, it’s called reflection. That’s resonance

What can reflection do?

let animal = {
 name: "dog",
 age: 3
}
Reflect.get (animal, "name") // the parameter is: object, property name
//Equivalent to:
animal.name 

let say = function (type, sound) {
 console.log (${type} calls ${sound})
}
Reflect.apply (say, null, ["cat", "meow"] // parameters are: function, this point, and argument list
//Equivalent to:
Say ("cat", "meow")

After the above code, we deeply find that reflect is useless. If we have to say something, it will change our previous basic operations (such as obj) . Name) is implemented by calling the function. By the way, that’s what it means: reduce JS language magic and make the code purer.

How do I say this?

JS language magic: our operation seems unreasonable, extraordinary and difficult to explain.

Explain a wave, Reflect.get (animal, “name”) you look at the code. It’s wide and long. It looks as if we want to get the value of the name attribute in the animal object.

Look at animal . Name shocked! Just in this way, we can get the value of the attribute in the object. Although the partners who have studied JS think it’s normal, we can’t use language to describe what the code does. This is the meaning of language magic.

You must have a certain understanding of reflection. There are some other methods on the reflect object. You can look at the document and study how to use it,

Proxy: proxy

What is an agent?

We’ve all heard about agents and proxy servers. For example, for which proxy server, we can’t directly access the server. We have to access the proxy server. The proxy server will access the server instead of us. The data returned by the server should be returned to the proxy server first, and then returned to us by the proxy server.

This is also the meaning of proxy in ES6. We can proxy data of an object type (functions, objects, etc.) and then visit the proxy when we visit the object.

Why do we need to visit agents?

Because the proxy object provides us with a way to modify the underlying implementation, that is, we can do some operations on the proxy object and make some rules for us to access the object. Just like the proxy server can filter some access to the server and other functions.

How to operate?

The essence of proxy is a constructor,

new Proxy(obj, {
 //Some rules
})

In this way, we construct a proxy object of an obj object, and the second parameter is an object, which makes some rules and regulations for accessing obj objects.


new Proxy(obj, {
 get(target, prop){
  // some code
  return Reflect.get(target, prop)
 }
})

This is the scenario where rules are made when creating proxy objects. Do you want to compare reflection. Indeed, reflection is often used with proxy

Application:

For example:


function sum(num1, num2){
 return num1 + num2;
}

Now let’s make some rules for passing parameters to the sum function: the parameters must be of type number

const sunProxy = new Proxy(sum, {
 apply(target, thisArgument, arguments) {
  arguments.forEach(item => {
   Typeof item! = = number & & throw ("parameter type is not number")
  })
  return Reflect.apply(target, thisArgument, arguments)
 }
})
sunProxy(23, 32)

Encapsulate it and create a common type

function funcProxy(func, ...types) 
 //After executing this function, we return the proxy of a function, and the remaining parameters are the type of parameters we specify
  return new Proxy(func, {
  apply(target, thisArgument, argumentsList) {
   types.forEach((type, index) => {
   //Loop to judge whether each parameter type is legal
    typeof argumentsList [ index ] !==  type  &&  throw (" Parameter transfer type does not match ")
      }
     })
   return Reflect.apply(target, thisArgument, argumentsList);
    }
   })
  }

then:


const sumProxy = funcProxy(sum, "number", "number")
sumProxy(3, 5);

Using reflection, we can implement some underlying operations, and the agent can make rules for our calls.

Isn’t it interesting, everyone.

summary

The above is the whole content of this article, I hope the content of this article has a certain reference learning value for your study or work, thank you for your support to developer.