Back to Basics: Discussing Prototypes with the Terminator

Skynet, er, frameworks have taken over the world. With the help of the Terminator you will learn how to stabilise humanity again. Or at least to stabilise your understanding of object-oriented JavaScript.

Learn the difference between class-based OO languages and prototypal languages. Understand why it is worth learning the prototypal way of doing OO and how it can help you write cleaner and simpler code.

Transcript

1. November 18, 2016 Back to Basics: Discussing Prototypes with the Terminator Christoph Gockel @ChristophGockel
3. Pairing
4. “It is nice to meet you.”
5. “I’m a friend of Sarah Connor.”
6. “I wanna ask you a bunch of questions. And I want to have them answered immediately.”
7. JavaScript
8. 10 days in 1995
9. Brendan Eich
10. Perl Scheme Java Self
12. “Old, but not obsolete.”
13. WAT
14. “Assembly of the Web”
15. ES6
16. Classes
17. class
18. “TAKE IT BACK!”
19. Classes
20. Classes in ES6 class Person { constructor(name) { this.name = name; } sayName() { console.log(this.name); } } let person = new Person("Christoph"); person.sayName(); // logs "Christoph" console.log(person instanceof Person); // true console.log(person instanceof Object); // true
21. typeof Person // "function"
22. Syntactic Sugar
23. Class Equivalent in ES6 let Person = (function() { "use strict"; const Person = function(name) { if (typeof new.target === "undefined") { throw new Error("Constructor must be called with new."); } this.name = name; } Object.defineProperty(Person.prototype, "sayName", { value: function() { console.log(this.name); }, enumerable: false, writable: true, configurable: true }); return Person; }());
24. Constant Class Names
25. Constant Class Names class Foo { constructor() { Foo = "bar";// throws an error } } Foo = "baz"; // ¯\_(ϑ)_/¯
26. “AHHHHHhhhhhh…”
27. “Assembly of the Web”
28. Prototypal Inheritance
29. Classical Inheritance
30. Object Orientation
31. What is it about?
32. Alan Kay
33. “OOP to me means only messaging,
 local retention
 and protection and hiding of state-process,
 and extreme late binding of all things.” ― Alan Kay
34. Kristen Nygaard
35. “A program execution is regarded as a physical model, simulating the behavior of either a real or imaginary part of the world.” ― Kristen Nygaard
36. Terms
37. “I need your clothes, your boots and your motorcycle.”
38. Class Object Prototype
39. Class
40. Generator of Objects
41. Cookie Cutter
42. “PUT THE COOKIE DOWN! NOW!”
43. Abstract Example
44. Every Language Differs
45. Object
46. Instance
47. Runtime Representation
48. Fully Encapsulated
49. Sometimes Rigid
50. Sometimes Flexible
51. Every Language Differs (again)
52. Prototype
54. Prototype != Class
55. Prototype == Object
56. http://www.mikebechtle.com/why-we-like-model-homes/ http://www.infrastructuur.net/houses-blueprint.html
57. { }
58. Creating new Objects let thePrototype = {}; let theObject = Object.create(thePrototype); let anotherObject = Object.create(theObject);
59. Concrete Example
60. Class ⟷ Object
61. Class Methods of String [:try_convert, :allocate, :new, :superclass, :freeze, :===, :==, :<=>, :<, :<=, :>, :>=, :to_s, :inspect, :i ncluded_modules, :include?, :name, :ancestors, :instan ce_methods, :public_instance_methods, :protected_insta nce_methods, :private_instance_methods, :constants, :c onst_get, :const_set, :const_defined?, :const_missing, :class_variables, :remove_class_variable, :class_varia ble_get, :class_variable_set, :class_variable_defined? , :public_constant, :private_constant, :singleton_clas .methods String
62. Methods of a String [:<=>, :==, :===, :eql?, :hash, :casecmp, :+, :*,:%, : [], :[]=, :insert, :length, :size, :bytesize, :empty?, :=~, :match, :succ, :succ!, :next, :next!, :upto, :ind ex, :rindex, :replace, :clear, :chr, :getbyte, :setbyt e, :byteslice, :scrub, :scrub!, :freeze, :to_i, :to_f, :to_s, :to_str, :inspect, :dump, :upcase, :downcase, : capitalize, :swapcase, :upcase!, :downcase!, :capitali ze!, :swapcase!, :hex, :oct, :split, :lines, :bytes, : chars, :codepoints, :reverse, :reverse!, :concat, :<<, .methods String.new
63. Runtime Behaviour
64. Class Based Lookup
65. C B A + foo class A attr_reader :foo end class B < A end class C < B end thing = C.new thing.foo
66. “Who is your daddy and what does he do?”
67. B Object BasicObject A + foo class A attr_reader :foo end class B < A end class C < B end thing = C.new thing.foo C B A + foo
68. Prototype Based Lookup
69. :thing # __proto__ :thing # __proto__ + foo let other = { bar: 42 }; :other # __proto__ + bar let thing = Object.create(other); thing.foo = "hello"; thing.foo thing.bar // "hello"
70. “Who is your daddy and what does he do?”
71. :thing # __proto__ :thing # __proto__ + foo let other = { bar: 42 }; :other # __proto__ + bar let thing = Object.create(other); thing.foo = "hello"; thing.foo // "hello" thing.bar null // 42
72. Similarities to
 Classical Inheritance
73. Recap
74. Classes Prototypes Categorisation Classification Behaviour Specific Examples
75. “Object-Oriented Programming”
76. Anything
77. “Thanks for the tip.”
78. “Object-Oriented Programming” … with Prototypes
79. Behaviour
80. Conclusion
81. TOOWTDI
82. TIMTOWTDI
83. There should be one
 — and preferably only one —
 obvious way to do it.
84. “STOP IT!”
85. Don’t Fight the Language
86. Prototype Chain is the
 Ultimate Delegation
87. Composition over Inheritance as a Language Feature
88. Creating Objects based on other Objects
89. Doesn’t Get More OO Than That
90. “Alright, enough philosophy. I better get going.”
91. Questions
92. “I’ll be back.”
93. Thank You Christoph Gockel @ChristophGockel