Composition vs Inheritance LimaJS - 21/04/2017 - @lupomontero 

Qué son la herencia y la composición? ● Son técnicas de reuso de código ● Son formas de abstraer ● Son formas de pensar en la semántica de nuestro dominio 

En qué se diferencian? Herencia ● Qué es? ● Sustantivos ● Es un(a) … Composición ● Qué hace? ● Verbos ● Tiene un(a) ... 

Veámos un ejemplo Dog { bark() {} poop() {} } Cat { meow() {} poop() {} } 

function Dog() {} Dog.prototype.bark = function () {}; Dog.prototype.poop = function () {}; function Cat() {} Cat.prototype.meow = function () {}; Cat.prototype.poop = function () {}; Sin Herencia 

Con herencia Dog { bark() {} poop() {} } Cat { meow() poop() } Animal { poop() {} } Dog extends Animal { bark() {} } Cat extends Animal { meow() {} } 

Implementación con Herencia function Animal() {} Animal.prototype.poop = function () { console.log('💩'); }; function Cat() {} Cat.prototype = Object.create(Animal. prototype); Cat.prototype.constructor = Cat; Cat.prototype.meow = function () { console.log('meow'); }; function Dog() {} Dog.prototype = Object.create(Animal. prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function () { console.log('woof'); }; 

Nuestra app crece... RobotLimpiador { drive() {} clean() {} } RobotAsesino { drive() kill() } Robot { drive() {} } RobotLimpiador extends Robot { clean() {} } RobotAsesino extends Robot { kill() {} } 

Nuestra app crece... function Robot() {} Robot.prototype.drive = function () {}; function MurdererRobot() {} MurdererRobot.prototype = Object.create(Robot.prototype); MurdererRobot.prototype.constructor = MurdererRobot; MurdererRobot.prototype.kill = function () {}; function CleaningRobot() {} CleaningRobot.prototype = Object.create(Robot.prototype); CleaningRobot.prototype.constructor = CleaningRobot; CleaningRobot.prototype.clean = function () {}; 

Ahora nos piden añadir un RobotPerroAsesino!!! 

Dónde lo ponemos? Animal Robot Perro Gato Limpiador Asesino 

Composición al rescate!! 

Composición dog = pooper + barker cat = pooper + meower cleaningRobot = driver + cleaner murdererRobot = driver + killer murdererRobotDog = driver + killer + barker 

Aislamos la “funcionalidad” con “Factory Functions” const barker = (state) => ({ bark: () => console.log('woof! my name is ' + state.name) }); barker({name: 'lupo'}).bark(); // woof! my name is lupo 

Aislamos la “funcionalidad” con “Factory Functions” const driver = (state) => ({ drive: () => state.position = state.position + state.speed }); const killer = (state) => ({ kill: () => console.log('time to kill!') }); 

const murderRobotDog = (name) => { const state = { name: name, speed: 100, position: 0 }; return Object.assign({}, barker(state), driver(state), killer(state)); }; Componemos la funcionalidad... 

… y además... 

function Persona(nombre, edad) { this.nombre = nombre; this.habla = function () { console.log('Hola, soy ' + this.nombre); }; } var persona = new Persona(‘lupo’); persona.habla(); // hola soy lupo setTimeout(persona.habla); // hola soy undefined setTimeout(persona.habla.bind(persona)); // hola soy lupo setTimeout(function () { persona.habla() }); setTimeout(() => persona.habla()); // Hola, soy lupo setTimeout(_ => persona.habla()); this is not your friend 

Notas... ● Una jerarquía de herencia requiere un montón de “diseño” al principio de un proyecto y puede crear rigidez en la evolución de la funcionalidad. Nos obliga a tratar de predecir el futuro. ● En otros lenguajes (por ej: Java o C#) estamos obligados a usar clases, en JavaScript no!!! ● A veces, cuando tenemos que instanciar muchos, muchos objetos - decenas de miles -, la herencia prototipal puede ser más apropiada y eficiente. 

Una curiosidad “At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.” React Docs: https://facebook.github.io/react/docs/composition-vs-inheritance.html 

FIN