If we want to monitor the read and write of attributes in an Object, we can use methods like object.defineProperty provided in ES5 to add attributes to our Object so that we can capture the read and write of attributes in the Object. This method is very widely used, in vUE 3.0 before the use of such a method to achieve two-way data binding. In ES2015, there is a new type called Proxy, which is specifically used to set access proxies for objects. Think of an agent as a gatekeeper, which means you have to pass through such an agent whenever you go in to get something or put something in. Proxy makes it easy to monitor the read and write process of objects and is more powerful and convenient to use than defineProperty Proxy. The first argument to the Proxy constructor is the target object for which the Proxy is needed; The second argument is also an object that can be called a proxy processing object, in which the get method is used to monitor the access to properties, and the set method is used to monitor the write of properties to objects.

const person = { name: 'zce', age: 20,} const personProxy = new Proxy(person, {get(target, property) { // The return value of this method can be used as the result of external access to this property. target[property] : If (property === 'age') {if (! Number.isInteger(value)) { throw new TypeError(`${value} is not a int`) } } target[property] = value } })Copy the code

After understanding the basic usage of Proxy, let’s explore the advantages of Proxy over Object.defineProperty.

The first and most obvious advantage is that the Proxy is more powerful. This power is in that defineProperty can only monitor read and write properties. The Proxy can monitor more object operations, such as delete operations or method calls in the image, etc.

const personProxy = new Proxy(person, { deleteProperty (target, Property) {// This method automatically executes delete target[property]}}) delete personProxy.age when an external delete operation is performed on the current proxy objectCopy the code

The following figure shows the Proxy operation document

Secondly, Proxy better supports the monitoring of array objects. In the past, the most common way to monitor array operations through defineProperty is to re-array operations. This is also the approach used in VUE. The general idea is to override methods like push and shift on the array prototype object with custom methods, hijacking the corresponding method call process at once.

const list = []; Const listProxy = new Proxy(list, {set (target, property, value) {const listProxy = new Proxy(list, {set (target, property, value) { Target [property] = value return true}}) listProxy.push(100) listProxy.push(100)Copy the code

Finally, one advantage Proxy has over Object.defineProperty is that Proxy regulates the read and write of the whole Object in a non-intrusive way, that is, a defined Object can be monitored without doing anything to the Object itself. Object.definepropery requires us to define the properties that need to be monitored in the Object in a specific way. For an existing Object, we need to do a lot of extra work to monitor its properties.

const person = {}; Object.defineproperty (person, 'name', {get () {console.log('name accessed '); return person._name }, Set (value) {console.log('name set ') person._name = value}}) person.name = 'jack' console.log(person.name)Copy the code