Prototypical inheritance in ECMAScript 6

An overview of new ECMAScript 6 features related to the prototypical inheritance model: __proto__ updates, super references, real methods and more.

Transcript

1. @jevzee June 18, 2015 Prototypical inheritance in ES6
2. @jevzee
3. ECMAScript is getting awesome
4. prototype changes
5. Prototype 101
6. {} everything is an object
7. var criminal = {}; everything is an object
8. criminal = new Object(); everything is an object
9. constructor call prototype rules
10. #1 every function has shared storage
11. #2 every object has prototype chain
12. function Criminal () { console.log("new crime suspect is in town."); } Criminal.prototype.murder = function(person) { console.log(`Killing ${person} softly.`); } var lee_oswald = new Criminal(); // (A) lee_oswald.murder("John F. Kennedy"); construct & new
13. no such thing as constructor function. Only constructor call.
14. function newCriminal () { var _this = {}; // a new object is created. Used as `this` in the function context _this.__proto__ = Criminal.prototype; // a special __proto__ property is set Criminal.call(_this); return _this; // newly created object is returned } var some_dude = newCriminal(); some_dude.murder("George Woosh"); fake new function newCriminal () { var _this = {}; // (A) _this.__proto__ = Criminal.prototype; // (B) Criminal.call(_this); return _this; // (C) } var some_dude = newCriminal(); some_dude.murder("George Woosh");
15. linked list
16. objects have photo chain
17. … every object
18. Prototype goodies in ES6
19. __proto__ accessors
20. var lee_oswald = new Criminal(); Object.getPrototypeOf(lee_oswald) // Criminal.prototype lee_oswald.__proto__; // Criminal.prototype __pr0to!
21. function President () { } President.prototype.speak = function () { console.log("Yes, we can!”); }; var lee_oswald = new Criminal(); Object.setPrototypeOf(lee_oswald, President.prototype); lee_oswald.__proto__ = President.prototype; lee_oswald.speak(); // OK, this is awkward __pr0to!
22. superman keyword
23. Object.getPrototypeOf(this).murder.call(this,arguments); clean? code
24. this.__proto__.murder.call(this, arguments); cleaner code
25. super.murder(); cleaner-er! code
26. Object.getPrototypeOf(this).murder.call(this,arguments); this.__proto__.murder.call(this, arguments); super.murder(); cleaner-er! code
27. var thief = { __proto__: Criminal.prototype, bully(name) { // (A) super.bully(name); console.log(“steal their food!!!”); } } stealing…
29. concise properties & methods
30. // ES 5 crime = { victim: victim, location: location, commit: function () { // ... } } props / meh!dots // ES 6 crime = { victim, location, commit () { // ... } }
31. soo…. what’s next
32. ECMAScript 6 classes
34. why ? classes
35. 3 drawbacks of prototypes
36. 1. fragile
37. 2. updating prototype is an extra step
38. 3. prototype chaining is complicated
39. class example
40. class Criminal { constructor(name) { this.name = name; } sayName() { // ... } } clazz function Criminal (name) { this.name = name; } Criminal.prototype.sayName(){ // ... }
41. var carleone = new Criminal("Don Carleone"); carleone.sayName(); clazz
42. carleone.__proto__ === Criminal.prototype; // => true clazz => constructor
43. classes make code concise concise => ὑ
44. static methods
45. static methods class Criminal { constructor(name) { this.name = name; } static isCriminal() { // ... } } function Criminal { this.name = name; } Criminal.isCriminal = fun() { // ... }
46. Criminal.isCriminal(“Al Capone”); static methods
47. derived classes [extends]
48. class Politician extends Criminal
49. class Criminal { murder() {} }
 class Politician extends Criminal { fundraise() {} } Politician.prototype.__proto__ === Criminal.prototype wires __proto__ ref
50. … without extends
51. … with extends
53. class MyArray extends Array { first() { return this[0]; } } extending built-ins
54. tl;dr
55. classes are good™
56. sub-classing built-in JavaScript
57. backwards-compatible
58. easier for JavaScript beginners
59. Better tooling support
60. cautious must you be over do it not
61. thanks! @jevzee this presentation: https://speakerdeck.com/jevzee read more: • Understanding ES6 — Nicholas Zakas • You don’t know JS / ES6 & Beyond — Kyle Simpson (Getify) • Exploring ES6 — Axel Rauschmayer • JavaScript Allongé, the “Six” Edition — Reg Braithwaite