Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use proxy in es6". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use 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 "intercept" in front of the target object, through which external access to the object must be intercepted. The syntax is "new Proxy (target, handler);".

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

What is the use of proxy in es6

Proxy can be understood as setting up a layer of "interception" in front of the target object, and external access to the object must first be intercepted through this layer, so it provides a mechanism to filter and rewrite external access. The original meaning of the word Proxy is agent, which is used here to mean to "delegate" certain operations, which can be translated as "agent". Here is a definition of proxy in the official documentation.

Let p = new Proxy (target, handler)

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

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

A new feature in ES6 is proxy, which is used to intercept specified operations on an object. This feature 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 a proxy object built by the proxy Proxy, and the second parameter passed in to Proxy is a handler function, which has multiple methods, such as get, set, and so on. The set method here can intercept all property assignments performed on the proxy object.

When we perform the following assignment:

Engineer.salary = 60

The processor will be triggered to output information:

Salary is changed to 60

Whenever the proxy object is assigned, the handler function is called so that it can be used to debug certain problems.

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

The author has used an agent in Sencha Touch. The code is as follows:

Proxy: {/ / data agent / / type:'localstorage',// id:'bills', / / limitParam:'limit', / / pageParam:'page', / / change the user agent to sql Solve the problem of 5MB storage limit of localstorage through websql type:'sql', database:'myDB', table:'bill',}, / / filters: [{property: "kind", value: "none"}], / / filter attribute listeners: {removerecords:function () {console.log ("data deleted") }, addrecords:function () {console.log ("data appended");}, updaterecord:function () {console.log ("data modified");},}

As you can see, it uses a way to listen to setter and getter, while in Angular it uses dirty detection. When we have Proxy, we can simplify these specific detection methods for simple data model binding.

At this point, I believe you have a deeper understanding of "how to use proxy in es6". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.