20190124 question:

How to understand Proxy in es6?

Test question analysis: the understanding of proxy may extend to the two-way binding of vue

Proxy definition

It can be understood that a layer of interception is set up for the target object, through which external access to the object must be intercepted

Simple example:

 const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return 'JS'
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = 'JS One question per day' 
 // set name
 // JS daily question
 
 obj.name 
 // Here, enter the callback function of get, and all directly return JS 

As can be seen from the above example, there is a mechanism for Proxy to overwrite external read and write operations

Proxy instance method

In addition to proxy get and set operations, proxy can also proxy other operations, as follows

handler.getPrototypeOf()

// This operation is triggered when the prototype of the proxy object is read, such as when the Object.getPrototypeOf(proxy) is executed.

handler.setPrototypeOf()

// This operation is triggered when setting the prototype of the proxy object, such as when executing Object.setPrototypeOf(proxy, null).

handler.isExtensible()

// This operation is triggered when judging whether a proxy object is extensible, such as when executing Object.isExtensible(proxy).

handler.preventExtensions()

// This operation is triggered when making a proxy object non extensible, such as when executing Object.preventExtensions(proxy).

handler.getOwnPropertyDescriptor()

// This operation is triggered when the property description of a property of the proxy object is obtained, for example, when the Object.getOwnPropertyDescriptor(proxy, "foo") is executed.

handler.defineProperty()

// This operation is triggered when defining a property description of a proxy object, such as when executing Object.defineProperty(proxy, "foo", {}).

handler.has()

// This operation is triggered when judging whether the proxy object has a certain attribute, such as when performing "foo" in proxy.

handler.get()

// This operation is triggered when a property of the proxy object is read, such as when executing proxy.foo.

handler.set()

// This operation is triggered when a property of the proxy object is assigned, such as when proxy.foo = 1 is executed.

handler.deleteProperty()

// This operation is triggered when a property of the proxy object is deleted, such as when delete proxy.foo is executed.

handler.ownKeys()

// This operation is triggered when all the property keys of the proxy object are obtained, such as when the Object.getOwnPropertyNames(proxy) is executed.

handler.apply()

// This operation is triggered when a proxy object whose target object is a function is called, such as when executing proxy().

handler.construct()

// This operation is triggered when constructing an instance of a proxy object whose target object is a constructor, such as when executing new proxy().

Why use Proxy

• Block and monitor external access to objects
• Reduce the complexity of a function or class
• Verify operations or manage required resources before complex operations

Out of question

How to implement two-way binding with proxy?

Past period

JS daily question: what is the front-end cache? What scenarios are applicable? What's the difference?
JS daily question: the use and difference of Call, Apply and bind. How to implement a bind?
JS daily question: talk about your understanding of front-end modularity
JS daily question: what are the means of web security attacks? And how to prevent

About JS daily question

JS daily question can be regarded as a voice answering community
Use fragment time to complete the test questions in 60 seconds every day
The group leader pushes the reference answer of the day at 0 o'clock the next day

• Note: it is not only limited to completing the task of the day, but also to find out and fill in the gaps and learn the excellent ideas of other students in the group

Click to join the question