当前位置：网站首页>Analysis of proxy usage of ES6 new feature

Analysis of proxy usage of ES6 new feature

2022-07-03 04:46:00 【Aurora Borealis night.】

One . What is? Proxy：

Proxy The object is ES6 A new feature , A proxy for creating an object , So as to achieve the interception and customization of basic operations （ Such as attribute search 、 assignment 、 enumeration 、 Function calls, etc ）.
What we need to know is , stay Vue2 Principle of bidirectional data binding in （ The data was hijacked ） use Object.defineProperty, And in the Vue3 The data hijacking principle in is Proxy agent .

Why? Proxy Will replace Object.defineProperty：

Object.defineProperty Only the properties of the object can be hijacked , Can't listen to arrays . Not right es6 A new creation Map,Set These data structures make listening . You can't listen to add and delete operations .
Proxy You can listen directly to the entire object instead of the attribute , You can monitor the changes of the array , Have as much as 13 Interception method in .

Use ：

let p = new Proxy(target, handler);

The parameter target Target object for packaging （ It can be any kind of object , Including native arrays , function , Even another agent ）.
The parameter handler For specific operation , It's actually an object , Its property is a function that defines the behavior of the agent when an operation is performed . That is to say, it writes various interception functions . Different interception methods intercept different operations .

Two . Specific interception methods ：

1.get Method ：

get（target, property, receiver） Method is used to block the read operation of a property , Three parameters are acceptable , They are the target objects 、 Attribute name and proxy The instance itself . See if the following example can intercept ：

      let obj = {
     name: "jack", age: "20" };
     //  to obj Set up an agent 
      let p = new Proxy(obj, {
    
        get(target, property) {
    
          console.log(" I stopped " + target + " Read " + property);
          console.log(" Its value is " + target[property]);
          //  Define the value you want to return 
          return target[property];
        },
      });
      
      // Read obj Of age Properties , Note that after defining the proxy, you have to use the proxy to call properties or methods 
      console.log(p.age);

give the result as follows , It can be found that when we want to output obj.age When I was proxy The agent intercepted , And we can act as agents get Method to customize what is actually returned . That is, although you read obj.age The value of is 20, But I can intercept through proxy , You can return as many as you want , Of course, what we return above is the real value target[property] ：

Insert picture description here

2. set Method ：

set(target, property, value, receiver) Method is used to block the assignment of a property , The four parameters are the target object in turn 、 Property name 、 Property values and Proxy The instance itself , The last parameter is optional . Here's an example ：

      let obj = {
     name: "jack", age: "20" };
      let p = new Proxy(obj, {
    
        set(target, property, value) {
    
          console.log(" To set object properties ？ I intercepted ~");
          console.log(" It's going to change to " + value + "?");
          console.log(" I won't change it for you , I changed it to 666");
          target[property] = 666;
        },
        get(target, property) {
    
          return target[property];
        },
      });
      // modify obj.age The value of is 30;
      p.age = 30;
      // Read obj Of age Properties , Note that after defining the proxy, you have to use the proxy to call properties or methods 
      console.log(p.age);

You can see , I want to change obj.age by 30, But it didn't work , Because I am intercepting set In the way age Value changed to 666 了 , therefore age The value has become 666：
Insert picture description here

3.apply Method ：

apply Method can intercept function calls 、call and apply operation .apply(target, thisArg, argumentsList) Three parameters , They are the target objects 、 Context object when called 、 Called parameter array . as follows ：

      function add(a, b) {
    
        console.log(a + b);
      }
      // to add Function to set a proxy 
      let p = new Proxy(add, {
    
        apply(target, thisArg, argumentsList) {
    
          console.log(" Intercept ");
          // Normally, it should be set as follows ：
          target.apply(this.Arg, argumentsList);
        },
      });
      p(1, 2);
      p.call(null, 13, 22);
      p.apply(null, [5, 3]);

You can see , Function call ,call call ,apply call , Have implemented the agent apply Code defined in method ：
Insert picture description here

4.constructor Method ：

construct(target, argumentsList, newTarget) Intercept is new operation ,target Target audience ,argumentsList parameter list ,newTarget Constructor originally called . Simply put, interception new A constructor method .

      function Animal(name) {
    
        this.name = name;
      }
      let p = new Proxy(Animal, {
    
        construct(target, argumentsList, newTarget) {
    
          // I directly return an empty object 
          return {
    };
        },
      });
      //new One Animal example 
      let dog = new p("dog");
      console.log(dog);

give the result as follows , Intercept successful , Modify and return ：
Insert picture description here
There will be no more demonstrations , It's all the same . in general Proxy The agent can realize the interception and customization of basic operations （ Such as attribute search 、 assignment 、 enumeration 、 Function calls, etc ）.

13 The two interception methods are as follows （ The following quotation is taken from Ruan Yifeng ES6 introduction ）：

1、get(target, propKey, receiver)：
Block the reading of object properties , such as proxy.foo and proxy[‘foo’].
2、set(target, propKey, value, receiver)： Setting of intercepting object properties , such as proxy.foo =
v or proxy[‘foo’] = v, Returns a Boolean value .
3、has(target, propKey)：
Intercept propKey in proxy The operation of , Returns a Boolean value .
4、deleteProperty(target, propKey)：
Intercept delete proxy[propKey] The operation of , Returns a Boolean value .
5、ownKeys(target)：
Intercept Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in loop , Returns an array . This method returns the property names of all the properties of the target object , and Object.keys() The return result of contains only the traversable properties of the target object itself .
6、getOwnPropertyDescriptor(target, propKey)：
Intercept Object.getOwnPropertyDescriptor(proxy, propKey), Returns the description object of the property .
7、defineProperty(target, propKey, propDesc)：
Intercept Object.defineProperty(proxy, propKey,
propDesc）、Object.defineProperties(proxy, propDescs), Returns a Boolean value .
8、preventExtensions(target)：
Intercept Object.preventExtensions(proxy), Returns a Boolean value .
9、getPrototypeOf(target)：
Intercept Object.getPrototypeOf(proxy), Return an object .
10、isExtensible(target)：
Intercept Object.isExtensible(proxy), Returns a Boolean value .
11、setPrototypeOf(target, proto)：
Intercept Object.setPrototypeOf(proxy,
proto), Returns a Boolean value . If the target object is a function , Then there are two additional operations to intercept .
12、apply(target, object, args)：
Intercept Proxy Instance as an operation of a function call , such as proxy(…args)、proxy.call(object,
…args)、proxy.apply(…).
13、construct(target, args)：
Intercept Proxy Operation called by instance as constructor , such as new proxy(…args).