Proxy’s Black Magic @yayoc FR ropp-study 

Proxy in ES6 Proxy is a special object which allow you customize operations. var p = new Proxy(target, handler); ▣ target ○ A target object ▣ handler ○ An object contains operations such as set and get 

Handler functions handler.apply() handler.construct() handler.defineProperty() handler.deleteProperty() handler.get() handler.getOwnPropertyDescriptor() handler.getPrototypeOf() handler.has() handler.isExtensible() handler.ownKeys() handler.preventExtensions() handler.set() handler.setPrototypeOf() 

Example: traceSetter 1. “Set” trap takes Object, Property and Value. 2. Reflect can execute original setter method. 

Use case ▣ Validator ○ http://bit.ly/2mVPIpx ▣ Throw an error when accessing unknown property ○ http://bit.ly/2zwpaB2 ▣ Negative index for Array ○ http://bit.ly/2iJ5W0u ▣ Immutability ○ http://bit.ly/2hKxp14 

Downside... Measurement script: http://bit.ly/2hZnBEa Around 14x slower rather than Object *I used Chrome to get an above score 

▣ Proxy has a potential to make codes more simply ▣ Low level injecting may let us confuse ▣ As all browsers don’t support, we need a polyfill ▣ From performance perspective, It’s not so good to use Proxy for frequently usage Object. Conclusion 

thanks! Any questions? You can find me at @yayoc [email protected] 

Credits Special thanks to all the people who made and released these awesome resources for free: ▣ Presentation template by SlidesCarnival ▣ Photographs by Unsplash