Unraveling JavaScript Prototypes

Slide 1

Slide 1 text

Dhananjay Kumar Founder, Nomad | ng-India Unravelling JavaScript Prototypes

Slide 2

Slide 2 text

Every JavaScript function has a prototype object.

Slide 3

Slide 3 text

@debug_mode Output An empty object

Slide 4

Slide 4 text

This is why you can’t use an arrow function to create a new object

Slide 5

Slide 5 text

Output

Slide 6

Slide 6 text

You can’t use an arrow function to create a new object.

Slide 7

Slide 7 text

Every JavaScript function has an internal [[Constructor]] property

Slide 8

Slide 8 text

An arrow function does not have an internal [[Constructor]] property

Slide 9

Slide 9 text

You can’t use an arrow function to create a new object.

Slide 10

Slide 10 text

Constructor Invocation Pattern Call a function using the new operator to create a new object

Slide 11

Slide 11 text

Create objects

Slide 12

Slide 12 text

Create objects

Slide 13

Slide 13 text

This output clearly indicates a relationship between p1, p2, and Product.protoype

Slide 14

Slide 14 text

However, this output indicates a relationship between p1, p2, and Product function.

Slide 15

Slide 15 text

However, this output indicates a relationship between p1, p2, and Product function. p1.constructor

Slide 16

Slide 16 text

Objects p1 and p2 are CONSTRUCTED from the Product function but LINKED to the Product.prototype object.

Slide 17

Slide 17 text

Every newly created object is linked to an existing object.

Slide 18

Slide 18 text

Product

Slide 19

Slide 19 text

Product rating =9 prototype

Slide 20

Slide 20 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 p1 p2

Slide 21

Slide 21 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2

Slide 22

Slide 22 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2

Slide 23

Slide 23 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2

Slide 24

Slide 24 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2

Slide 25

Slide 25 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor

Slide 26

Slide 26 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor

Slide 29

Slide 29 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor __proto__ __proto__

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor __proto__ __proto__

Slide 32

Slide 32 text

rating =9 name= Pen price = 10 name= Book price = 20 rating = 90 p1 p2 __proto__ __proto__ Read in the prototype chain

Slide 33

Slide 33 text

Read in prototype chain • Reads in the current object • If it does not find it goes to the object’s __proto__ object • It goes further up to the prototype chain if it does not find it. • If it does not find it in Object.prototype returns undefined

Slide 34

Slide 34 text

Write operation in the prototype chain

Slide 35

Slide 35 text

This was my 100th Conference Talk, so thank you for being part of it @debug_mode

Slide 36

Slide 36 text

As an assignment – implement inheritance between two function constructors

Slide 37

Slide 37 text

Dhananjay Kumar Connect me for Training and Consulting. Email – [email protected] @debug_mode