Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Proxy's Black Magic

5cba4bd1272c9595bd39ec58727ee41e?s=47 yayoc
November 23, 2017

Proxy's Black Magic

Slides to use at FR ropp-study

Examples
* 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

Measurement script: http://bit.ly/2hZnBEa

5cba4bd1272c9595bd39ec58727ee41e?s=128

yayoc

November 23, 2017
Tweet

Transcript

  1. Proxy’s Black Magic @yayoc FR ropp-study

  2. 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
  3. 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()
  4. Example: traceSetter 1. “Set” trap takes Object, Property and Value.

    2. Reflect can execute original setter method.
  5. 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
  6. Downside... Measurement script: http://bit.ly/2hZnBEa Around 14x slower rather than Object

    *I used Chrome to get an above score
  7. ▣ 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
  8. thanks! Any questions? You can find me at @yayoc hi@yayoc.com

  9. Credits Special thanks to all the people who made and

    released these awesome resources for free: ▣ Presentation template by SlidesCarnival ▣ Photographs by Unsplash