Unraveling JavaScript Prototypes

This is the presentation from JSPoland's talk on unraveling JavaScript prototypes. It explains JavaScript objects and prototypes.

If you need a copy of this PPT to learn it with animation, send me an email at debugmode@outlook.com

Transcript

1. Dhananjay Kumar Founder, Nomad</coder> | ng-India Unravelling JavaScript Prototypes
2. Every JavaScript function has a prototype object.
3. @debug_mode Output An empty object
4. This is why you can’t use an arrow function to create a new object
5. Output
6. You can’t use an arrow function to create a new object.
7. Every JavaScript function has an internal [[Constructor]] property
8. An arrow function does not have an internal [[Constructor]] property
9. You can’t use an arrow function to create a new object.
10. Constructor Invocation Pattern Call a function using the new operator to create a new object
11. Create objects
12. Create objects
13. This output clearly indicates a relationship between p1, p2, and Product.protoype
14. However, this output indicates a relationship between p1, p2, and Product function.
15. However, this output indicates a relationship between p1, p2, and Product function. p1.constructor
16. Objects p1 and p2 are CONSTRUCTED from the Product function but LINKED to the Product.prototype object.
17. Every newly created object is linked to an existing object.
18. Product
19. Product rating =9 prototype
20. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 p1 p2
21. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2
22. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2
23. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2
24. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2
25. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor
26. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor
28. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor
29. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor __proto__ __proto__
31. Product rating =9 prototype name= Pen price = 10 name= Book price = 20 constructor constructor p1 p2 constructor __proto__ __proto__
32. rating =9 name= Pen price = 10 name= Book price = 20 rating = 90 p1 p2 __proto__ __proto__ Read in the prototype chain
33. 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
34. Write operation in the prototype chain
35. This was my 100th Conference Talk, so thank you for being part of it @debug_mode
36. As an assignment – implement inheritance between two function constructors
37. Dhananjay Kumar Connect me for Training and Consulting. Email – Dhananjay@nomadcoder.ai @debug_mode