What is the usage of proxy in es6

In es6, proxy is used to intercept specified operations on an object, and can filter and rewrite external access; Proxy sets up a layer of "interception" in front of the target object to prevent external access to the object. All must pass this layer of interception, and the syntax is "new Proxy(target, handler);".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the usage of proxy in es6

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. The original meaning of the word Proxy is agency. It is used here to mean that it "acts on behalf of" certain operations. It can be translated as "agent". The following is a definition of proxy from the official documentation.

let p = new Proxy(target, handler);

target: The target object that needs to be wrapped by Proxy (can be any type of object, including native arrays, functions, or even another proxy).

handler: An object whose properties are functions that define the behavior of the agent when an operation is performed (can be understood as some kind of trigger).

ES6 proposes a new feature, proxy, which is used to intercept specified operations on an object. This function is very useful. To give an example:

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

The engineer object is replaced by the proxy object constructed by the proxy Proxy. The second parameter passed into the Proxy is a processor function. A processor function has multiple methods, such as get, set and other methods. The set method here can intercept all property assignment operations performed on the proxy object.

When we perform the following assignment:

engineer.salary = 60;

will trigger the processor and output information:

salary is changed to 60

Whenever the proxy object is assigned a value, the processor function will be called, so that Can be used to debug certain problems.

Of course, Proxy was not born just for debugging. If you have used Sencha Touch or AngularJS, you will find that these frameworks have functions similar to data model binding.

The author has used a proxy in Sencha Touch. The code is as follows:

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql，通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

As you can see, it uses a method of monitoring setters and getters, while the one used in Angular It's a dirty test. . When we have Proxy, these specific detection methods can be simplified for simple data model binding.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the usage of proxy in es6. For more information, please follow other related articles on the PHP Chinese website!