Good helper of data hijacking – Proxy

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper also participates inProject DigginTo win the creative gift package and challenge the creative incentive money

preface

Hello, everyone. In ES5 there is an object.defineProperty () function that can be used to hijack attributes of an Object or add a new attribute to an Object. If you have seen the Vue2.0 source code, you should know that the data responsivity principle uses object.defineproperty to hijack attributes. But instead of focusing on Object.defineProperty today, we’ll focus on a new class in ES6 called -Proxy. The Object. DefineProperty function is mentioned first because the Proxy we are going to share provides some functionality similar to or even more powerful than Object.defineProperty!

The Proxy is a what

• The word Proxy translates to “Proxy.” Here we use it to mean “proxying” certain operations, such as “data hijacking” mentioned in the introduction. Can be understood as “proxy”. Proxy can be used to set up a layer of “interception” in front of the target object, when the outside world to access the object, must pass this layer of interception. At this point we can use this interception to do some necessary validation and restriction on access to the outside world.
• Proxy is a constructor in ES6, we use the new keyword to create a Proxy instance
• The Proxy constructor takes two parameters: target, which represents the target object to intercept, and handler, which is also an object used to customize the behavior of the intercept, such as overriding the GET or set functions.
• If handler does not pass the second argument or passes an empty object, it is equivalent to no interception, and accessing the Proxy instance is equivalent to accessing the original target object target
• Instances of Proxy can be used as prototypes for other objects
• The same interceptor (the second argument handler) can set up multiple intercepting operations at the same time
• Note that in order for Proxy to work, operations must be performed on the object of the Proxy instance, not on the original target object. Otherwise, interception is invalid

let obj = {name: "Yannis"}
let proxy = new Proxy(obj,{
	get(target, key){
		console.log('get')
		return 'Alvin'
	},
	set(target,key,val){
		console.log('set')
		target[key] = val
	}
});
// The interception rule does not take effect
obj.name // 'Yannis'
obj.name = 'Alvin'
obj.name // 'Alvin'(obj's name has been reassigned)

// Run the Proxy instance. The interception rule takes effect
proxy.name // 'Alvin' 'get'(interceptor output)
proxy.name = 'Yannis' // 'set'(interceptor output)
proxy.name //'Alvin' 'get' // always output 'Alvin' because get intercepts return 'Alvin'

// The Proxy instance acts as a prototype object for other objects
let proxy = new Proxy({}, {get(){
		return "Yannis"}});let obj = Object.create(proxy);
obj.name;//'Yannis'
obj.count;//'Yannis'
obj.time;//'Yannis'
// Obj does not have any of these attributes, but all of them return 'Yannis'. This is because the obJ object finds the proxy through the prototype chain and enters the interceptor, so no matter what attributes of obj are accessed, it always returns 'Yannis'.
Copy the code

Proxy Operations that can be intercepted

In the above code, we only demonstrate the interception of get and set in Proxy. In fact, not only these two can be intercepted, Proxy provides us with a total of 13 interception operation functions:

• Get (Target, key, receiver) : intercepts the operation of reading object attributes
• Set (Target, propKey, value, receiver) : Intercepts the setting operation of object properties
• Has (target, propKey) : Intercepts operations that determine whether a property exists, such as propKey in proxy, and returns a Boolean value.
• DeleteProperty (target, propKey) : Intercepts an operation to delete an attribute, such as delete Proxy [propKey], which returns a Boolean value.
• OwnKeys (target) : interception Object. GetOwnPropertyNames (proxy), Object. GetOwnPropertySymbols (proxy), the Object. The keys (proxy), for… The in loop returns an array
• GetOwnPropertyDescriptor (target, propKey) : interception Object. GetOwnPropertyDescriptor (proxy, propKey)
• DefineProperty (target, propKey propDesc) : Intercepting Object.defineProperty(proxy, propKey, propDesc), Object.defineProperties(proxy, propDescs)
• PreventExtensions (target) : intercept Object. PreventExtensions (proxy)
• GetPrototypeOf (target) : Intercepts object.getProtoTypeof (proxy)
• IsExtensible (Target) : Intercepting Object. IsExtensible (Proxy)
• SetPrototypeOf (target, proto) : Intercepts object. setPrototypeOf(proxy, proto)
• Apply (target, object, args) : intercepts operations called by Proxy instances as functions, such as Proxy (… The args), proxy. Call (object,… The args), proxy. Apply (…). .
• Construct (target, args) : intercepts operations called by Proxy instances as constructors, such as new Proxy (… The args).

conclusion

So much for Proxy. In addition, data responsiveness was optimized in Vue3.0 by using proxies instead of Object.defineProperty().

Like small partners welcome to praise the message plus attention oh!