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

An implementation of new operator in JS

An implementation of new operator in JS

This slide deck explains an implementation of JS new operation with JavaScript, which aims to explain its semantics to JS newbies.

00580f6c11851d2fff0b3e2f7392226b?s=128

chikoski

May 01, 2017
Tweet

More Decks by chikoski

Other Decks in Technology

Transcript

  1. Object creation without "new" operation We are JavaScripters #5 |

    April. 27th, 2017 | Mozilla Tech Speaker N.Shimizu (@chikoski)
  2. Today's topic: what happens when we use new operator? DMBTT1PJOU\

    DPOTUSVDUPS Y Z \ UIJTYY UIJTZZ ^ ^ DPOTUQOFX1PJOU     2
  3. Object literal DPOTUB\ Y  Z ^ DPOTU[FSP\ Y 

    Z ^ 3
  4. A function to create object GVODUJPOQPJOU Y Z \ SFUVSO\

    YY  ZZ  ^ ^ DPOTUB
 QPJOU    DPOTU[FSP QPJOU    4
  5. Create objects with methods' definitions GVODUJPOQPJOU Y Z \ SFUVSO\

    YY ZZ  EJTUBODFGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT EY  .BUIBCT EZ  ^ ^ 5
  6. Modification: shared function objects DPOTUEGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT

    EY  .BUIBCT EZ  ^ GVODUJPOQPJOU Y Z \ SFUVSO\YY ZZ EJTUBODFE^ ^ 6
  7. Shared function object 7 x: 10, y: 10 x: 0,

    y:0 function.. function.. x: 0, y:0 function.. x: 10, y: 10
  8. A chunk of methods for objects created with point function

    DPOTUQPJOU.FUIPET\ EJTUBODFGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT EY  .BUIBCT EZ  ^ OPSNGVODUJPO \ SFUVSOUIJTEJTUBODF \Y Z^  ^ ^ 8
  9. Modified point function GVODUJPOQPJOU Y Z \ DPOTUPCK\YY ZZ^ GPS

    DPOTUOBNFJOQPJOU.FUIPET \ PCK<OBNF>QPJOU.FUIPET<OBNF> ^ SFUVSOPCK ^ 9
  10. Separating object creation process from its initialization GVODUJPODSFBUF JOJUJBMJ[FS BSHT

    \ DPOTUPCK\^ JOJUJBMJ[FSBQQMZ PCK  "SSBZQSPUPUZQFTMJDFBQQMZ BSHT  SFUVSOPCK ^ 10
  11. create function usage GVODUJPOQPJOU Y Z \ UIJTYY UIJTZZ GPS

    DPOTUOBNFJOQPJOU.FUIPET \ UIJT<OBNF>QPJOU.FUIPET<OBNF> ^ ^ DPOTUQDSFBUF QPJOU    DPOTU[FSPDSFBUF QPJOU    11
  12. Parameterize methods chunk GVODUJPODSFBUF JOJUJBMJ[FS NFUIPET BSHT \ DPOTUPCK\^ GPS

    DPOTUOBNFJONFUIPET \ PCK<OBNF>NFUIPET<OBNF> ^ JOJUJBMJ[FSBQQMZ PCK  "SSBZQSPUPUZQFTMJDFBQQMZ BSHT  SFUVSOPCK ^ 12
  13. Calls againt modified create function GVODUJPOQPJOU Y Z \ UIJTYY

    UIJTZZ ^ DPOTUQDSFBUF QPJOU QPJOU.FUIPET    DPOTU[FSPDSFBUF QPJOU QPJOU.FUIPET    13
  14. Gathering initializer and method chunk into 1 object DPOTU1PJOU\ JOJUJBMJ[FSGVODUJPO

    Y Z \ UIJTYY UIJTZZ ^  NFUIPET\ TOJQ ^ ^ 14
  15. Modify create function to use "object template" GVODUJPODSFBUF UFNQMBUF BSHT

    \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ PCK<OBNF>UFNQMBUFNFUIPET<OBNF> ^ UFNQMBUFJOJUJBMJ[FSBQQMZ PCK  "SSBZQSPUPUZQFTMJDFBQQMZ BSHT  SFUVSOPCK ^ 15
  16. Function is also an object, so it can have attributes

    GVODUJPO1PJOU Y Z \ UIJTYY UIJTZZ ^ 1PJOUNFUIPET\ NFUIPET ^ 16
  17. Updating create methods GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET

    \ PCK<OBNF>UFNQMBUFNFUIPET<OBNF> ^ UFNQMBUFBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT  SFUVSOPCK ^ 17
  18. How examine a object created with given template? DPOTUQDSFBUF 1PJOU

       LJOE0G Q 1PJOU USVF LJOE0G \Y Z [^ 1PJOU GBMTF 18
  19. Naive (and incomplete) implementation of kindOf GVODUJPOLJOE0G PCK UFNQMBUF \

    GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ JG PCK<OBNF>OVMM \ SFUVSOGBMTF ^ ^ SFUVSOUSVF ^ 19
  20. Add special field to objects GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^

    GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ PCK<OBNF>UFNQMBUFNFUIPET<OBNF> ^ UFNQMBUFBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT  PCKUFNQMBUFUFNQMBUF SFUVSOPCK ^ 20
  21. An implementation of kindOf using special field in objects GVODUJPOLJOE0G

    PCK UFNQMBUF \ SFUVSOPCKUFNQMBUFUFNQMBUF ^ 21
  22. Now we have implemented object creation system 22 Function /

    attributes Equivalent feature in JS syntax create new Template Consturctor Template.methods Function.prototype kindOf instanceof object.template object.constructor
  23. Symbol.species : Override constructor DMBTT.Z"SSBZFYUFOET"SSBZ\ MFO \ SFUVSOUIJTMFOHUI ^ TUBUJDHFU<4ZNCPMTQFDJFT>

    \SFUVSO"SSBZ^ ^ 23