JavaScript Prototype Programming

"JavaScript Prototype Programming" is a short talk on how to properly use the prototype aspect of JavaScript to code effectively.

Transcript

1. PROTOTYPE PROGRAMMING JAVASCRIPT @RMARIUZZO JAN 13TH, 19:00, COWORKING
2. X-TEAM / WEB DEVELOPER RUBENS MARIUZZO
3. PROTOTYPE PROGRAMMING
4. A style of object-oriented programming in which behavior reuse is performed via a process of cloning existing objects that serve as prototypes. — Wikipedia
5. A style of object-oriented programming in which inheritance is performed via delegation to existing objects that serve as prototypes. — Wikipedia
6. OOP class—based prototype—based
7. OOP class—based prototype—based
8. Class—based OOP parent child child child
9. Prototype—based OOP parent child child child
10. OBJECTS Everything starts with
11. In JavaScript “there are multiple ways to create objects, but only two atomic mechanisms are used”
12. var obj = { key: value } 1. Creating an object from literal
13. var Fun = function() { this.key = value; }; var obj = new Fun(); 2. Creating an object from function
14. IMPLICIT PROTOTYPE LINK
15. Almost all objects has a prototype link, at the time of their creation. That implicit prototype link is a reference to another object.
16. var obj = {}; obj.foo; // Output: ?
17. var obj = {}; obj.foo; // Output: unknow
18. var obj = {}; obj.toString(); // Output: ?
19. var obj = {}; obj.toString(); // Output: [object Object]
20. WHY?
21. WHY? IMPLICIT PROTOTYPE LINK
22. - foo obj1 - foo obj2 PROTOTYPE LINK
23. - foo obj1 - foo obj2 obj1.foo resolves to obj2.foo because obj1 delegates to obj2 PROTOTYPE LINK
24. By default, for all objects the implicit prototype link points to: Object.prototype
25. var obj = {}; var proto = Object.getPrototypeOf(obj); proto === Object.prototype; // Output: true
26. HOW CAN WE DELEGATE USING IMPLICIT PROTOTYPE LINK?
27. var obj = {}; obj.foo; // Output: undefined Object.prototype.foo = 123;
28. var obj = {}; obj.foo; // Output: undefined Object.prototype.foo = 123; obj.foo; // Output: 123
29. Adding methods to Object.prototype has a very high risk of breaking something. Don’t do that. Point.
30. EXPLICIT PROTOTYPE PROPERTY
31. A prototype property is automatically created for every function. That explicit prototype property is a reference to a prototype for new objects.
32. var Foo = function () {} - prototype Foo {}
33. var Foo = function () {}; Foo.prototype; // Output: {}
34. var Foo = function () {}; Foo.prototype.bar = 123;
35. var Foo = function () {}; Foo.prototype.bar = 123; var obj = new Foo(); obj - prototype Foo
36. var Foo = function () {}; Foo.prototype.bar = 123; var obj = new Foo(); obj.bar; // Output: 123
37. PROTOTYPAL INHERITANCE
38. var A = function() {}; A.prototype.p1 = 101; var B = function() {}; B.prototype.p2 = 202;
39. var A = function() {}; A.prototype.p1 = 101; var B = function() {}; B.prototype = Object.create(A.prototype); B.prototype.p2 = 202;
40. var A = function() {}; A.prototype.p1 = 101; var B = function() {}; B.prototype = Object.create(A.prototype); B.prototype.p2 = 202; var obj = new B(); obj.p1; // Output: 101 obj.p2; // Output: 202
41. alla ES5
42. var A = {}; A.p1 = 101; var B = {}; B.p2 = 202;
43. var A = {}; A.p1 = 101; var B = Object.create(A); B.p2 = 202;
44. var A = {}; A.p1 = 101; var B = Object.create(A); B.p2 = 202; var b1 = Object.create(B); b1.p1; // Output: 101 b1.p2; // Output: 202
45. PROPERTIES
46. var obj1 = { a: 1 };
47. var obj1 = { a: 1 }; var obj2 = Object.create(obj1); obj2.a++; // Output: ?
48. var obj1 = { a: 1 }; var obj2 = Object.create(obj1); obj2.a++; // obj1.a: 1 // obj2.a: 2
49. PROPERTIES can be shadowed using [[Put]] operation
50. ✓ Prototype Programming is a style of OOP. ✓ Objects has implicit prototype link, when created. ✓ Properties are resolved through prototype chain. ✓ Functions has an explicit prototype property. SUMMARY
51. THANKS!