Understanding JavaScript Prototypes

Also see
http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/

Transcript

1. Understanding JS prototypes Sebastian Porto
2. + Prototypes
   ! + Object.create
   ! + Constructor functions ! + ES6
3. The wrong way to learn function Liquid() { } Liquid.prototype.fluid = true; ! function Beer() { Liquid.call(this); } ! Beer.prototype = Object.create(Liquid.prototype); Beer.prototype.alcohol = 5.1; ! var beer = new Beer();
4. __proto__
5. • var liquid = {}
 var beer = {} • beer.__proto__ = liquid A simple chain
6. A simple chain liquid beer __proto__ liquid is the prototype of beer
7. Property look-ups • var liquid = {
 fluid: true
 } • var beer = {}
 beer.__proto__ = liquid • beer.fluid //-> true
8. A simple chain liquid beer __proto__ fluid fluid? fluid?
9. A longer chain liquid coopers fluid fluid? beer drink
10. Long chain example • var liquid = { fluid: true } • var drink = {}
 drink.__proto__ = liquid • var beer = {}
 beer.__proto__ = drink • var coopers = {}
 coopers.__proto__ = beer • coopers.fluid; //-> true
11. Many object can have same prototype liquid beer __proto__ cider __proto__
12. Prototype can be shared • var liquid = { fluid: true } • var beer = {}
 beer.__proto__ = liquid • var cider = {}
 cider.__proto__ = liquid • beer.fluid; //-> true
 cider.fluid; //-> true
13. Prototypes are not copies • var beer = { tasty: true }; • var coopers = {};
 coopers.__proto__ = beer; • coopers.tasty; //-> true • beer.tasty = false; • cooper.tasty; //-> false
14. beer coopers ethanol Prototypes are dynamic .__proto__
15. Prototypes are dynamic • var beer = { alcohol: 6 }
 var ethanol = { alcohol: 100 } • var coopers = {}
 coopers.__proto__ = beer • coopers.alcohol //-> 6 • coopers.__proto__ = ethanol • coopers.alcohol //-> 100
16. Writing creates properties • var beer = { alcohol: 6 } • var coopers = {}
 coopers.__proto__ = beer • coopers.alcohol = 4 • beer.alcohol //-> still 6
17. Creates ‘own’ property beer coopers alcohol = 6 .alcohol = 4 alcohol = 4 “own” property
18. beer coopers alcohol = 6 alcohol = 4 creatures Same property can be in several places
19. Arrays • var beer = { 
 ingredients: [‘wheat’, ‘yeast’] 
 } • var coopers = {}
 coopers.__proto__ = beer • coopers.ingredients.push(‘oats’) • beer.ingredients
 //->[‘wheat’, ‘yeast’, ‘oats’];
20. Direct modification beer coopers ingredients .ingredients.push(‘oats’)
21. coopers.ingredients.push(‘oats’); ! creatures.ingredients; //-> [‘wheat’, ‘yeast’, ‘oats’]; Arrays are modified directly in the prototype beer coopers creatures ingredients ['wheat', 'yeast'] __proto__ __proto__
22. Objects are the same • var beer = { 
 ingredients: {wheat: 10, yeast: 20} 
 } • var coopers = {}
 coopers.__proto__ = beer • coopers.ingredients.wheat = 30 • beer.ingredients.wheat
 //-> 30
23. __proto__ == great for learning
    ! Not for use
24. Object.create
25. Object.create • var beer = { 
 tasty: true
 } • var coopers = Object.create(beer) • coopers.tasty //-> true
26. Object.create var coopers = Object.create(beer); ! Just like: ! var coopers = {}; coopers.__proto__ = beer;
27. Object.create
    is just setting __proto__ ! so same rules apply - not copies - dynamic
28. getPrototypeOf var beer = { tasty: true }; ! var coopers = Object.create(beer); ! ! Object.getPrototypeOf(coopers) //-> beer object
29. isPrototypeOf var beer = { tasty: true }; ! var coopers = Object.create(beer); ! ! beer.isPrototypeOf(coopers); //-> true
30. ES6 setPrototypeOf var beer = { tasty: true }; ! var coopers = {}; ! ! Object.setPrototypeOf(coopers, beer);
31. Constructor Functions
32. Functions as constructors function Beer(){ ! } ! var beer = new Beer(); Uppercase by convention
33. function Beer(){ ! ! ! ! ! } ! var beer = new Beer(); Implicit this ! var this = {} this.__proto__ = Beer.prototype (yield to your code) return this
34. Implicit this function Beer(){ var this = {}; this.__proto__ = Beer.prototype; this.tasty = true; return this; } ! var beer = new Beer(); ! beer.tasty; // true
35. function Beer(){ this.tasty = true; } ! var beer = new Beer(); ! beer.tasty; //-> true Implicit this
36. Don’t forget new function Beer(){ this.kind = ‘beer’; } ! var beer = Beer(); this will the global object
37. function Beer(){ ! this.__proto__ = Beer.prototype; ! } function.prototype
38. function.prototype function Beer(){ ! } ! Beer.prototype Every function has this special property
39. But this is not the prototype Beer.prototype !== Beer.__proto__ Call this ‘function prototype’
40. function.prototype function Beer(){ ! } ! var beer = new Beer(); beer.__proto__ ???? What is the __proto__ of beer?
41. It is assigned as the prototype of the instance function Beer(){ var this = {}; this.__proto__ = Beer.prototype; this.tasty = true; return this; } It is assigned as the prototype of the new created object
42. Function instance new __proto__ Function prototype .prototype
43. • function Beer(){} • Beer.prototype.tasty = true • var coopers = new Beer() • coopers.__proto__ == Beer.prototype
 //-> true • coopers.tasty //-> true It is the prototype assigned to the instance
44. function Beer(){ } ! Beer.prototype.brew = function () {} ! var coopers = new Beer(); var creatures = new Beer(); ! coopers.brew(); creatures.brew(); ! Useful for performance
45. • function Beer(){...} • Beer.prototype.ingredients = ['honey'] • var coopers = new Beer()
 var vb = new Beer() • coopers.ingredients.push('oats') • vb.ingredients //-> ['honey', 'oats'] Again, same rules!
46. • function Beer(){
 this.ingredients = [‘yeast’]
 } • var coopers = new Beer()
 var creatures = new Beer() • coopers.ingredients.push(‘wheat’) • creatures.ingredients
 //-> [‘yeast’] Isolation
47. function Beer(){ ! } ! var coopers = new Beer(); ! coopers instanceof Beer; //-> true ! instanceof
48. coopers instanceof Beer; ! ! Checks that ! coopers.__proto__ == Beer.prototype ! instanceof
49. var Beer = function () { ! }; ! Beer.findAll = function () { ... } ! Beer.findAll(); "Class methods"
50. ES6
51. class Beer { constructor(a) { this.alcohol = a; } ! drink() { ... } } ES6 Classes
52. ES6 Classes function Beer(a){ this.alcohol = a; } ! Beer.prototype.drink = function () { ... } ! var beer = new Beer(5) class Beer { constructor(a) { this.alcohol = a; } ! drink() { ... } } ! var beer = new Beer(5)
53. Questions? Thanks