In-depth Understanding of ES6 012 [Study Notes]

Table of Contents

• Proxy and Reflection API
  • Using the set trap to validate properties

Proxy and Reflection API

A proxy is a wrapper that can intercept and modify underlying JavaScript engine operations. In new languages, it exposes internal operational objects, allowing developers to create built-in objects.

Proxy Trap	Overridden Feature	Default Feature
get	Read a property value	Reflect.get()
set	Write a property value	Reflect.set()
has	in operator	Reflect.has()
deleteProperty	delete operator	Reflect.deleteProperty()
getPropertyOf	Object.getPropertyOf()	Reflect.getPropertyOf()
setPropertyOf	Object.setPropertyOf()	Reflect.setPropertyOf()
isExtensible	Object.isExtensible()	Reflect.isExtensible()
preventExtensions	Object.preventExtensions()	Reflect.preventExtensions()
getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor()	Reflect.getOwnPropertyDescriptor()
defineProperty	Object.defineProperty()	Reflect.defineProperty()
ownKeys	Object.keys()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()	Reflect.ownKeys()
apply	Call a function	Reflect.apply()
construct	Call a function with new	Reflect.construct()

## Creating a simple proxy

 let target = {}
 let proxy = new Proxy(target,{}),

 proxy.name = "proxy";
 console.log(proxy.name) // proxy
 console.log(target.name) // proxy

 target.name = "target"
console.log(proxy.name) // target
 console.log(target.name) // target

Using the set trap to validate properties

Accepts 4 arguments

• trapTarget: The object that receives the property (the proxy’s target)
• key: The property key to be written
• value: The value of the property being written
• receiver: The object on which the operation occurred (usually the proxy)

let target = {
  name:"target"
}
let proxy = new Proxy(target,{
  set(trapTarget,key,value,recevier){
    // Ignore existing properties that are not intended to be affected
    if(!trapTarget.hasOwnProperty(key)){
      if(isNaN(value)){
        throw new TypeError('Property must be a number')
      }
    }
    // Add property
    return Reflect.set(trapTarget,key,value,recevier)
  }
})
proxy.count = 1;
console.log(proxy.count) // 1
console.log(target.count) // 1

// Since the target already has a name property, it can be assigned a value
proxy.name = "proxy"
console.log(proxy.name) // proxy
console.log(target.name) // proxy
// Assigning a value to a non-existent property will throw an error
proxy.otherName = "proxy"

I don’t want to look at the rest… maybe later.