An implementation of new operator in JS

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

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

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

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

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

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

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

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

Modiﬁed point function GVODUJPOQPJOU Y Z \ DPOTUPCK\YY ZZ^ GPS
DPOTUOBNFJOQPJOU.FUIPET \ PCK<OBNF>QPJOU.FUIPET<OBNF> ^ SFUVSOPCK ^ 9

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

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

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

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

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

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

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

Updating create methods GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET
\ PCK<OBNF>UFNQMBUFNFUIPET<OBNF> ^ UFNQMBUFBQQMZ PCK "SSBZQSPUPUZQFTMJDFBQQMZ BSHT SFUVSOPCK ^ 17

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

Naive (and incomplete) implementation of kindOf GVODUJPOLJOE0G PCK UFNQMBUF \
GPS DPOTUOBNFJOUFNQMBUFNFUIPET \ JG PCK<OBNF>OVMM \ SFUVSOGBMTF ^ ^ SFUVSOUSVF ^ 19

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

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

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

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

An implementation of new operator in JS

An implementation of new operator in JS

chikoski

More Decks by chikoski

Other Decks in Technology

Featured

Transcript

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

Today's topic: what happens when we use new operator? DMBTT1PJOU\

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

A function to create object GVODUJPOQPJOU Y Z \ SFUVSO\

Create objects with methods' deﬁnitions GVODUJPOQPJOU Y Z \ SFUVSO\

Modiﬁcation: shared function objects DPOTUEGVODUJPO QU \ DPOTUEYUIJTYQUY DPOTUEZUIJTZQUZ SFUVSO.BUIBCT

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

A chunk of methods for objects created with point function

Modiﬁed point function GVODUJPOQPJOU Y Z \ DPOTUPCK\YY ZZ^ GPS

Separating object creation process from its initialization GVODUJPODSFBUF JOJUJBMJ[FS BSHT

create function usage GVODUJPOQPJOU Y Z \ UIJTYY UIJTZZ GPS

Parameterize methods chunk GVODUJPODSFBUF JOJUJBMJ[FS NFUIPET BSHT \ DPOTUPCK\^ GPS

Calls againt modiﬁed create function GVODUJPOQPJOU Y Z \ UIJTYY

Gathering initializer and method chunk into 1 object DPOTU1PJOU\ JOJUJBMJ[FSGVODUJPO

Modify create function to use "object template" GVODUJPODSFBUF UFNQMBUF BSHT

Function is also an object, so it can have attributes

Updating create methods GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^ GPS DPOTUOBNFJOUFNQMBUFNFUIPET

How examine a object created with given template? DPOTUQDSFBUF 1PJOU

Naive (and incomplete) implementation of kindOf GVODUJPOLJOE0G PCK UFNQMBUF \

Add special ﬁeld to objects GVODUJPODSFBUF UFNQMBUF BSHT \ DPOTUPCK\^

An implementation of kindOf using special ﬁeld in objects GVODUJPOLJOE0G

Now we have implemented object creation system 22 Function /

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