An implementation of new operator in JS

Slide 1

Slide 1 text

Object creation without "new" operation We are JavaScripters #5 | April. 27th, 2017 | Mozilla Tech Speaker N.Shimizu (@chikoski)

Slide 2

Slide 2 text

Today's topic: what happens when we use new operator? DMBTT1PJOU\ DPOTUSVDUPS Y Z \ UIJTYY UIJTZZ ^ ^ DPOTUQOFX1PJOU 2

Slide 3

Slide 3 text

Object literal DPOTUB\ Y Z ^ DPOTU[FSP\ Y Z ^ 3

Slide 4

Slide 4 text

A function to create object GVODUJPOQPJOU Y Z \ SFUVSO\ YY ZZ ^ ^ DPOTUB  QPJOU DPOTU[FSP QPJOU 4

Slide 5

Slide 5 text

Create objects with methods' deﬁnitions GVODUJPOQPJOU Y Z \ SFUVSO\ YY ZZ EJTUBODFGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT EY .BUIBCT EZ ^ ^ 5

Slide 6

Slide 6 text

Modiﬁcation: shared function objects DPOTUEGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT EY .BUIBCT EZ ^ GVODUJPOQPJOU Y Z \ SFUVSO\YY ZZ EJTUBODFE^ ^ 6

Slide 7

Slide 7 text

Shared function object 7 x: 10, y: 10 x: 0, y:0 function.. function.. x: 0, y:0 function.. x: 10, y: 10

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Modiﬁed point function GVODUJPOQPJOU Y Z \ DPOTUPCK\YY ZZ^ GPS DPOTUOBNFJOQPJOU.FUIPET \ PCKQPJOU.FUIPET ^ SFUVSOPCK ^ 9

Slide 10

Slide 10 text

Separating object creation process from its initialization GVODUJPODSFBUF JOJUJBMJ[FS BSHT \ DPOTUPCK\^ JOJUJBMJ[FSBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT SFUVSOPCK ^ 10

Slide 11

Slide 11 text

create function usage GVODUJPOQPJOU Y Z \ UIJTYY UIJTZZ GPS DPOTUOBNFJOQPJOU.FUIPET \ UIJTQPJOU.FUIPET ^ ^ DPOTUQDSFBUF QPJOU DPOTU[FSPDSFBUF QPJOU 11

Slide 12

Slide 12 text

Parameterize methods chunk GVODUJPODSFBUF JOJUJBMJ[FS NFUIPET BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJONFUIPET \ PCKNFUIPET ^ JOJUJBMJ[FSBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT SFUVSOPCK ^ 12

Slide 13

Slide 13 text

Calls againt modiﬁed create function GVODUJPOQPJOU Y Z \ UIJTYY UIJTZZ ^ DPOTUQDSFBUF QPJOU QPJOU.FUIPET DPOTU[FSPDSFBUF QPJOU QPJOU.FUIPET 13

Slide 14

Slide 14 text

Gathering initializer and method chunk into 1 object DPOTU1PJOU\ JOJUJBMJ[FSGVODUJPO Y Z \ UIJTYY UIJTZZ ^ NFUIPET\TOJQ^ ^ 14

Slide 15

Slide 15 text

Modify create function to use "object template" GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ PCKUFNQMBUFNFUIPET ^ UFNQMBUFJOJUJBMJ[FSBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT SFUVSOPCK ^ 15

Slide 16

Slide 16 text

Function is also an object, so it can have attributes GVODUJPO1PJOU Y Z \ UIJTYY UIJTZZ ^ 1PJOUNFUIPET\NFUIPET^ 16

Slide 17

Slide 17 text

Updating create methods GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ PCKUFNQMBUFNFUIPET ^ UFNQMBUFBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT SFUVSOPCK ^ 17

Slide 18

Slide 18 text

How examine a object created with given template? DPOTUQDSFBUF 1PJOU LJOE0G Q 1PJOU USVF LJOE0G \Y Z [^ 1PJOU GBMTF 18

Slide 19

Slide 19 text

Naive (and incomplete) implementation of kindOf GVODUJPOLJOE0G PCK UFNQMBUF \ GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ JG PCKOVMM \ SFUVSOGBMTF ^ ^ SFUVSOUSVF ^ 19

Slide 20

Slide 20 text

Add special ﬁeld to objects GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ PCKUFNQMBUFNFUIPET ^ UFNQMBUFBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT PCKUFNQMBUFUFNQMBUF SFUVSOPCK ^ 20

Slide 21

Slide 21 text

An implementation of kindOf using special ﬁeld in objects GVODUJPOLJOE0G PCK UFNQMBUF \ SFUVSOPCKUFNQMBUFUFNQMBUF ^ 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Symbol.species : Override constructor DMBTT.Z"SSBZFYUFOET"SSBZ\ MFO \ SFUVSOUIJTMFOHUI ^ TUBUJDHFU<4ZNCPMTQFDJFT> \SFUVSO"SSBZ^ ^ 23