Prototype: mastering JS object orientation without classes

Presentation used in JSDay Recife 2015

Transcript

1. Prototype Mastering JS object orientation without classes
2. @lulzaugusto Front-end developer at Tago.io
3. class Person { constructor(props) { this.name = props.name; this.age = props.age; } introduce() { console.log(`Hi. My name is ${this.name}. I am ${this.age} years old.`); } getOlder() { this.age += 1; } } const p1 = new Person({ name: 'John', age: 20 }); p1.getOlder(); p1.introduce(); // My name is John. I am 21 years old.
4. Syntax sugar
5. { name: 'John', age: 20 } class Person { constructor(props) { this.name = props.name; this.age = props.age; } introduce() { … } getOlder() { … } } const p1 = new Person({ name: 'John', age: 20 }); p1.getOlder(); p1.introduce(); // My name is John. I am 21 years old. Object.getPrototypeOf(p1); { introduce() { ... }, getOlder() { ... } }
6. Object.getPrototypeOf({}); { hasOwnProperty() { ... }, isPrototypeOf() { ... }, propertyIsEnumerable() { ... }, toLocaleString() { ... }, toString() { ... }, valueOf() { ... } }
7. const p1 = new Person({ name: 'John', age: 20 }); const p2 = new Person({ name: 'Doe', age: 40 }); const p3 = new Person({ name: 'Foo', age: 30 }); ... const p1000 = new Person({ name: 'Thousand', age: 18 }); Object.getPrototypeOf(p1); Object.getPrototypeOf(p2); Object.getPrototypeOf(p3); ... Object.getPrototypeOf(p1000); { introduce() { ... }, getOlder() { ... } }
8. const personProto = { introduce() { console.log(`Hi. My name is ${this.name}. I am ${this.age} years old.`); }, getOlder() { this.age += 1; } }; const p1 = Object.create(personProto); p1.name = 'John'; p1.age = 20;
9. Factories to the rescue…
10. const personProto = { introduce() { console.log(`Hi. My name is ${this.name}. I am ${this.age} years old.`); }, getOlder() { this.age += 1; } }; function person(props) { const p = Object.create(personProto); p.name = props.name; p.age = props.age; return p; } const p1 = person({ name: 'John', age: 20 });
11. And there is more…
12. function person(state) { return { introduce() { console.log(`Hi. My name is ${state.name}. I am ${state.age} years old.`); }, getOlder() { state.age += 1; } } } const p1 = person({ name: 'John', age: 20 }); p1.getOlder(); p1.introduce(); // Hi. My name is John. I am 21 years old. p1.name; // undefined p1.age; // undefined
13. Extends…
15. "Favor object composition over class inheritance” The Gang of Four (Design Patterns 1994)
16. What is it?
17. What does it do?
18. Fun fun fun…
19. class Dog { poop() {} bark() {} } class Cat { poop() {} meow() {} } Inheritance class Animal { poop() {} } class Dog extends Animal { bark() {} } class Cat extends Animal { meow() {} }
20. Inheritance class CleaningRobot { drive() {} clean() {} } class MurderRobot { drive() {} murder() {} } class Robot { drive() {} } class CleaningRobot extends Robot { clean() {} } class MurderRobot extends Robot { murder() {} }
21. MurderRobotDog
22. Composition to the rescue
23. Barker + Pooper Dog
24. Meower + Pooper Cat
25. Cleaner + Driver CleaningRobot
26. Killer + Driver MurderRobot
27. Barker + Killer + Driver MurderRobotDog
28. function barker(state) { return { bark() { console.log(`Woof, I am ${state.name}`); } }; } function driver(state) { return { drive() { state.position += state.speed; } }; } function killer(state) { return { kill() { console.log('Just killed something'); } }; }
29. function murderRobotDog(name) { const state = { name, speed: 100, position: 0 }; return Object.assign({}, barker(state), driver(state), killer(state)); } const rex = murderRobotDog('Rex'); rex.bark(); // Woof, I am Rex rex.kill(); // Just killed something rex.drive();
30. Prototype Cloning
31. You are not a prophet
32. Composition is flexible and dynamic
33. The end function presententionEnder() { return { end() {} }; } const the = presententionEnder(); the.end();