11

Tengo una duda interesante, qué diferencia hay entre el patrón Prototype() y el Constructor() en JavaScript a la hora de crear objetos?

¿Cómo afecta una manera y la otra en los atributos y las funciones de dichos objetos?

¿Puedo combinarlos para optimizar más la memoria?

1 respuesta 1

14
+200

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.

2
  • Muy buen aporte, lo voy a leer tranquilo. De momento dos comentarios. 1) C#, Python y Java son lenguajes multiparadigma (que incluye al procedural). 2) ECMAScript 6 tiene clases, acá el soporte en los navegadores.
    – El Asiduo
    Commented el 10 ene. 2017 a las 3:02
  • Gracias por tu comentario. Las clases que llegaron en ES2015 (aka ES6) son solo "azúcar sintáctica", es decir, no son clases en sí como en demás lenguajes, siguen siendo funciones con prototipo. La razón por la que añadieron ésta característica es para que devs que son principalmente de los lenguajes ya citados se sientan familiarizados. Sin embargo, como ya dije, es simplemente sintaxis; a nivel de core nada ha cambiado.
    – gugadev
    Commented el 10 ene. 2017 a las 11:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.