Fundamentos de POO en JS; Mixins y otras técnicas de reutilización

1. Fundamentos de POO en JS;
Mixins y otras técnicas de
reutilización
Maximiliano Fierro
@elmasse

2. Maximiliano Fierro
Solutions Architect

3. ECMAScript es un lenguaje
Orientado a Objetos
con herencia basada en delegación de prototipos

4. ¿Qué significa?

5. Todo Objeto referencia a un
prototipo

6. ¿Qué es un Objeto?
Un conjunto no ordenado de pares clave-valor.
Estos pares son llamados propiedades.
Cuando el valor de una propiedad es una función decimos
que es un método.

7. var obj = { msg : “hola”};

8. obj
msg “hola”
[[Prototype]] Object.prototype
…
[[Prototype]] null

9. [[Prototype]]
Propiedad interna que apunta al prototipo del
objeto. Algunas implementaciones proveen la
propiedad __proto__ (no-standard) como
referencia explícita.

10. obj.__proto__
> Object.prototype
Esto nos da acceso a las propiedades y métodos definidos en
Object.prototype:
obj.toString();
obj.hasOwnProperty();
etc..

11. Prototype Chain
Es el mecanismo de herencia en JavaScript.
Cuando le pedimos una propiedad a un objeto, se busca primero entre las
propiedades del objeto y luego si no existe, se sigue la cadena de
[[Prototype]] hasta encontrarlo.

12. Clases
Los objetos se crean mediante constructores.
Un constructor es una función que va a ser llamada con new.
El constructor tiene asociado un objeto llamado prototype.
El prototype se utiliza para definir propiedades de instancia.
Por defecto, el prototype es una instancia de Object, por lo tanto,
su [[Prototype]] apunta al Object.prototype.

13. constructor
Se utiliza para crear e inicializar un objeto.

14. // Constructor
function MyClass (msg) {
this.msg = msg;
};
// Instance method
MyClass.prototype.foo = function () {
console.log(this.msg);
};
var a = new MyClass(‘Hello!’);
a.foo(); // Hello!
MyClass.prototype
foo()
[[Prototype]
]
msg
a
[[Prototype]
]
[[Prototype]
]
Object.prototype
null
...

15. Herencia por Prototipos
La herencia se obtiene encadenando el prototype de
la clase con una instancia de la clase Padre.

16. // Constructor
function ClassA () {
// call parent constructor
MyClass.apply(this, arguments);
};
// inherit from MyClass
ClassA.prototype = Object.create(MyClass.prototype);
// Instance method
ClassA.prototype.bar = function () {
console.log(this.msg + ‘ from bar’);
};
var obj = new ClassA(‘Hello!’);
obj.foo(); // Hello!
obj.bar(); // Hello! from bar
MyClass.prototype
foo()
ClassA.prototype
bar()
[[Prototype]]
[[Prototype]]
msg
obj

17. Object.create
Object.create = function(Prototype) {
return { __proto__: Prototype };
};

18. Fácil, ¿no?

19. No tan rápido.
Hay algunos pequeños detalles que debemos tener
en cuenta, en especial al definir “propiedades”

20. El prototype es un objeto.
Accedemos al mismo prototype desde todas las
instancias de nuestra clase.

21. // Constructor
function MyClass () {
};
MyClass.prototype.array = [];
// Instance method
MyClass.prototype.foo = function () {
console.log(this.array);
};
var a = new MyClass();
var b = new MyClass();
a.foo(); // []
b.array.push(1);
b.array.push(2);
a.array.push(3);
a.foo(); // [1,2,3] ???
b.foo(); // [1,2,3] ???

22. a
[[Prototype]]
MyClass.prototype
foo fn()
array [1,2,3]
[[Prototype]] > Object
.protoype
b
[[Prototype]]

23. ¿Entonces?
No definan propiedades en el prototype.
Usen el constructor. Después de todo, es el
encargado de inicializar el objeto.

24. // Constructor
function MyClass () {
this.array = [];
};
// Instance method
MyClass.prototype.foo = function () {
console.log(this.array);
};
var a = new MyClass();
var b = new MyClass();
a.foo(); // []
b.array.push(1);
b.array.push(2);
a.array.push(3);
a.foo(); // [3]
b.foo(); // [1,2]

25. a
array [3]
[[Prototype]] MyClass.prototype
foo fn()
[[Prototype]] > Object
.protoype
b
array [1,2]
[[Prototype]]

26. Reutilizando Código en
Programación Orientada a
Objetos

27. “Using inheritance as a vehicle to
reuse code is a bit like ordering a
happy meal because you want the
plastic toy”
Angus Croll.

28. *Abstract*Class / *Base*Class
Usualmente cuando utilizamos algún framework
que provee clases de las cuales tenemos que
extender (por ej. Views, Components,
Controllers, etc.) y nos encontramos código que
se repite entre las subclases.

29. Problemas
• Agregamos niveles de herencia.
• La clase Base/Abstracta se vuelve una
bolsa de funciones comunes.
• Las subclases acceden a mas funcionalidad
de la realmente requerida.
• Refactorizar se vuelve mas complejo.

30. Reutilizando Funciones
Toda función puede ser invocada con .call o
.apply (Borrowing)

31. “OK” en funciones simples...
var max = Math.max.apply(null, array);

32. … pero el código se vuelve verborrágico
var instance = {
msg: ‘Hello from instance’
};
//borrowing foo method from MyClass
MyClass.prototype.foo.apply(instance); // Hello from instance
//borrowing bar method from ClassA
ClassA.prototype.bar.apply(instance); // Hello from instance from bar
//borrowing foo method from ClassA inherited from MyClass
ClassA.prototype.foo.apply(instance); // Hello from instance

33. Mixins
Otra formas de reutilizar código

34. ¿Qué es un Mixin?
Un Mixin es una clase que, por lo general, no
está pensada para ser instanciada o extendida,
sino combinada en otra clase.
El Mixin es combinado en la clase a través de
un merge.
En JavaScript, podemos usar Objects como
Mixins.

35. Mixins: Beneficios
Incentivan la reutilización de código.
Pueden ser utilizados como una
solución alternativa a la herencia
múltiple.
Evitan la ambigüedad de herencia (The
diamond problem) linealmente.

36. Implementación
Object.assign (o polyfill)
- El Mixin es combinado en el prototipo de
la Clase.
- Un Mixin puede ser una Clase o un Objeto.

37. function MixedClass () {
// call mixin constructor
MyClass.apply(this, arguments);
};
// apply Mixin
Object.assign(MixedClass.prototype,
MyClass.prototype);
// Instance method
MixedClass.prototype.bar = function () {
console.log(this.msg + ‘ from bar’);
};
var obj = new MixedClass(‘Hello!’);
obj.foo(); // Hello!
obj.bar(); // Hello! from bar
MixedClass.prototype
foo()
[[Prototype]
]
msg
obj
[[Prototype]
]
[[Prototype]
]
Object.prototype
null
...
bar()

38. EventEmitter como Mixin
function MyClass() {
// call Mixin constructor
EventEmitter.call(this, arguments);
}
Object.assign(MyClass.prototype, EventEmitter.prototype);
var obj = new MyClass();
obj.on(‘event’, function ( ) { console.log(‘event!’); });
obj.emit(‘event’);

39. Functional Mixins
El Mixin no es una clase sino una función que decora el
prototipo a través de “this”.

40. // Functional Mixin
function WithFoo() {
this.foo = function () {
console.log(this.msg);
}
return this;
}
// MixedClass definition
function MixedClass(msg) {
this.msg = msg;
}
// Apply Mixin
WithFoo.call(MixedClass.prototype);
MixedClass.prototype.bar = function () {
console.log(this.msg + ‘ from bar’);
};
var obj = new MixedClass(‘Hello!’);
obj.foo(); // Hello!
obj.bar(); // Hello! from bar

41. The Diamond Problem
BaseClass
ClassA ClassB
DerivedClass
foo()
var d = new DerivedClass();
d.foo() // ¿¿ cuál foo ??
...
...
...
foo()

42. The Diamond Problem
Object.assign(DerivedClass.prototype, ClassA.prototype, ClassB.prototype);
var d = new DerivedClass();
d.foo() // from ClassB
Object.assign(DerivedClass.prototype, ClassB.prototype, ClassA.prototype);
var d = new DerivedClass();
d.foo() // from ClassA

43. Llamar a un Método Sobre-escrito
….
Object.assign(DerivedClass.prototype, ClassA.prototype, ClassB.prototype);
DerivedClass.prototype.foo = function() {
// call “overridden” foo from A
ClassA.prototype.foo.apply(this, arguments);
}

44. Problemas
Métodos y propiedades son sobre-escritos
basados en la posición de la declaración.
Refactoring (agregar/renombrar métodos) puede
causar “problemas silenciosos”.
Llamar a un metodo sobre-escrito es
verborragico y propenso a errores.

45. Traits
Una especie de “Mixins Inteligentes”

46. ¿Qué es un Trait?
Unidades de comportamiento que se
pueden componer.
Un tipo especial de clases sin estado.
Se los puede ver como clases incompletas.
Definen comportamiento y acceden al
estado a través de métodos requeridos.

47. Clase = Traits + Glue Code + State
(+ SuperClass)

48. Componiendo Comportamiento
Puede requerir un conjunto de métodos que
servirán como parámetros del comportamiento
ofrecido. (Clase incompleta)
Pueden ser compuestos por otros traits.
La colisión de nombres debe ser resuelta por el
desarrollador (usando alias y exclusiones)

49. Resolución de Conflictos
Un Conflicto aparece cuando combinamos dos o
mas traits que provean métodos llamados
idénticamente que no se originen en el mismo
trait.
Alias:Un método conflictivo se puede
“renombrar".
Exclusión: Podemos resolver el conflicto
excluyendo el método en cuestión.

50. MyList.prototype
+getCollection()
[[Prototype]
]
withFirst <Trait>
first()
*getCollection()
withLast <Trait>
last()
*getCollection()
withIterator <Trait>
iterator()
*getCollection()
@traits
[[Prototype]
]
collection:
[1,2,3,4,5]
list
var list = new MyList([1,2,3,4,5]);
console.log('collection: ', list.getCollection());
// [1,2,3,4,5]
console.log('first: ', list.first()); // 1
console.log('last: ', list.last()); // 5
console.log('iterate:');
var iterator = list.iterator();
var value;
while(value = iterator.next()){
console.log(value);
}
(*) Required Method
(+) Glue Code

51. MyList.prototype
getCollection()
[[Prototype]
]
first()
last()
iterator()
[[Prototype]
]
collection:
[1,2,3,4,5]
list

52. MyList.prototype
getCollection():
{Array}
[[Prototype]
]
withFirst <Trait>
first()
*getCollection()
withLast <Trait>
last()
*getCollection()
withIterator <Trait>
iterator()
*getCollection()
@traits
[[Prototype]
]
collection:
[1,2,3,4,5]
list
var list = new MyList([1,2,3,4,5]);
console.log('collection: ',
list.getCollection());
// [1,2,3,4,5]
console.log('first: ', list.first()); // 1
console.log('last: ', list.last()); // 5
console.log('iterate:');
var iterator = list.iterator();
var value;
while(value = iterator.next()){
console.log(value);
}
iterable <Trait>

53. MyList.prototype
getCollection():
{Array}
[[Prototype]
]
withFirst <Trait>
first()
*getCollection()
withLast <Trait>
last()
*getCollection()
withIterator <Trait>
iterator()
*getCollection()
@traits
[[Prototype]
]
collection:
[1,2,3,4,5]
list
ERROR! method “first” is defined twice!
iterable <Trait>
first()

54. Resolución de Conflictos:
Alias o Exclude
Podemos usar exclude en “first” del Trait iterable
o alias para renombrarlo en caso que queramos
usarlo (Una alternativa de llamar al metodo
sobre-escrito)

55. Implementaciones
Librerías:
• Traits.js
• CocktailJS
• (varias más en npm)

56. CocktailJS
npm install -s cocktail
cocktailjs.github.io

57. Annotations. Traits & Talents

58. Demo

59. Gracias!
@elmasse
github.com/elmasse