En JavaScript la POO es basada en prototipos, no hay concepto de
"clases". Lo que conoces como clase en lenguajes
procedurales como C#, Java o Python en JavaScript no existe.
Es muy común que nuevos desarrolladores o desarrolladores que vienen de lenguajes no funcionales se confundan, y no es para menos, el concepto de orientación a objetos es bastante particular en JavaScript.
Prototipos
Casi todos los objetos en JavaScript tienen un prototipo
. Un prototipo es simplemente un objeto "dentro de otro", pero no cualquier objeto, si no un objeto especial; dentro de éste objeto se almacenan las propiedades. Cuando se pide una propiedad de un objeto (objeto.propiedad
) lo que pasa es que se empezará a buscar primero en el objeto, si no está allí, lo buscará en el prototipo, y así en cadena.
Dado que cuando se busca una propiedad en un objeto, éste buscará también en los prototipos que existan dentro del objeto, es una buena práctica usar hasOwnProperty
, el cuál devolverá true si el objeto es dueño directo de dicha propiedad
Una pregunta interesante es: si el objeto es vacío y tiene un prototipo, ¿a quién pertenece? La respuesta es al prototipo padre: Object.prototype
. Haz una prueba con la siguiente instrucción:
console.log(Object.getPrototypeOf({}));
Lo que verás en consola será: Object.prototype
. Pero si en su lugar, haces Object.prototypeOf(Object.prototype)
verás que imprime null
, porque Object.prototype
es el padre de todos los prototipos y como es obvio, no tiene un prototipo integrado.
A éste prototipo se le debe la disponibilidad de métodos "universales" como toString
y valueOf
. También hay objetos que no necesariamente tienen Object.prototype
, si no en su lugar Function.prototype
como es el caso de isNaN
.
Constructores
Una nota interesate es que Object.prototype
tiene una función llamada constructor
, ésta función es llamada cuando haces uso de new
y retorna una instancia de la función con this
asociada a ésta. Así mismo, cada instancia tendrá un prototipo derivado de Object.prototipo
.
Hay una diferencia importante entre los prototipos de los objetos y de Constructor: todos los objetos tienen un prototipo derivado de Object.prototype
, mientras que el prototipo de Constructor
es Function.prototype
, debido a que es una función.
Considera éste ejemplo:
function Car () {
}
var ferrari = new Car();
console.log(Object.getPrototypeOf(ferrari)) // object
console.log(Object.getPrototypeOf(Car.prototype.constructor)) // function
Como ves, a pesar que constructor
tiene un prototipo de tipo function, a la instancia de Car se le asigna un prototipo de tipo object.
Anexo
Problema Banana/Gorila
"El problema con los lenguajes orientados a objetos es que tienen todo éste entorno implícito que llevan consigo. Tu quieres una banana pero lo que obtienes es un gorila manteniendo la banana y la jungla entera." - Joe Amstrong
Creo que Joe Amstrong no pudo resumir con una analogía más acertada el problema de la herencia. Pero, ¿qué quiere decir con ésto? La respuesta es sencilla:
"Para obtener una funcionalidad específica, debes hacerte cargo de lo demás implícitamente"
Cuando se trabaja con herencia clásica, es muy común realizar un diseño inicial y a medida que cambien los requirimientos, refactorizar las clases y jerarquías con el riesgo de romper todo. Además, no es modular, ¿qué si necesitas características de clase A
y C
pero no quieres heredar toda su funcionalidad? Aquí es donde toma importancia la composición.
Herencia funcional o composición
El gran Douglas Crockford habla de los "peligros de la herencia clásica y this" en JavaScript. Él plantea las factory functions, que son funciones que crean objetos y que no necesita the this
. Éste "patrón" es muy utilizado por desarrolladores JavaScript "anti-classes". Por ejemplo:
const Dog = (name) => {
return {
name,
description() {
return `Hi, my name is ${this.name} and I'm a ${this.race}`
}
};
};
const Rottweiler = (name) => {
const dog = Dog(name);
return Object.assign({}, dog, {
race: 'Rottweiler'
});
}
const bobby = Rottweiler('Bobby');
console.log(bobby.description()); // Hello, my name is Bobby and I'm a Rottweiler
Como podemos observar en el código anterior, la herencia funcional o composición es mucho más modular, es como lego, solo usas las piezas que necesitas usar. Éste tipo de herencia es mucho más sencilla de refactorizar.
Object.assign vs Object.create
¿Cómo afecta una manera y la otra en los atributos y las funciones de dichos objetos?
Cuando haces uso de constructor para crear instancias, a menudo deberás usar hasOwnPoperty
para saber si un objeto tiene determinada propiedad (y que no busque en prototipos interos), lo cual si lo olvidas puedes cometer un error de lógica. Lo mismo ocurre con objetos creados mediante Object.create
. Por otro lado, creando objetos asignando nuevos valores a un prototipo mediante Object.assign
te evitas éste inconveniente.
Mira el siguiente ejemplo:
const Human = (name) => {
return {
name,
sayHi () {
return `Hello, my name is ${this.name} and I'm a ${this.gender}`;
}
};
}
const Man = (name) => {
const human = Human(name);
return Object.assign({}, human, { gender: 'man' });
};
const Woman = (name) => {
const human = Human(name);
const woman = Object.create(human);
woman.gender = 'woman';
return woman;
};
const man = Man('Sebastián');
const woman = Woman('Milett');
console.log(man.hasOwnProperty('name')); // true
console.log(woman.hasOwnProperty('name')); // false
Nota: Se puede emular Object.assign
haciendo uso de Object.setPrototypeOf
.
Rendimiento
¿Puedo combinarlos para optimizar más la memoria?
Sobre rendimiento no tengo mucha idea; sin embargo, no creo sea un punto importante en la mayoría de ocasiones a no ser que estés creando muchos objetos (y digo, muuuuuchos objetos). Puedes hacer una prueba para salir de dudas.