Prototipo en JavaScript: Fundamentos y Uso Práctico

En JavaScript cada objeto tiene una propiedad interna llamada prototipo. El sistema de prototipos es lo que permite la reutilización de propiedades y métodos a través de la herencia prototípica, una de las características clave del lenguaje. A diferencia de otros lenguajes orientados a objetos que usan clases (aunque JavaScript también las incluye en ES6), JavaScript permite que los objetos hereden directamente de otros objetos.

En este artículo, exploraremos qué es el prototipo, cómo funciona en JavaScript y cómo puedes utilizarlo para hacer tu código más eficiente y reutilizable.

¿Qué es el Prototipo en JavaScript?

En JavaScript, el prototipo es un mecanismo que permite que los objetos hereden características de otros objetos. Cada objeto tiene una propiedad interna llamada [[Prototype]] (accesible como __proto__ en la mayoría de los navegadores), que apunta al prototipo del cual el objeto hereda métodos y propiedades.

Diagrama básico de herencia prototípica:

Objeto -> [[Prototype]] -> Prototipo (Objeto Padre)

Cuando se intenta acceder a una propiedad o método de un objeto y este no lo tiene, JavaScript buscará esa propiedad en su prototipo. Este proceso continúa hasta encontrar la propiedad o hasta llegar a null, que es el final de la cadena prototípica.

Ejemplo básico del prototipo:

const animal = {
  tipo: 'mamífero',
  hacerSonido: function() {
    console.log('Sonido genérico');
  }
};

const perro = {
  nombre: 'Fido',
  ladrar: function() {
    console.log('Guau guau');
  }
};

perro.__proto__ = animal;

perro.hacerSonido();
console.log(perro.tipo);

"Sonido genérico"
"mamífero"

En el ejemplo anterior perro hereda del objeto animal. Aunque el objeto perro no tiene una propiedad llamada tipo ni un método llamado hacerSonido(), hereda ambos del prototipo (animal).

¿Cómo funciona la cadena de prototipos?

La cadena de prototipos es la secuencia de objetos que JavaScript sigue cuando se intenta acceder a una propiedad o método en un objeto. Si el objeto no tiene la propiedad buscada, JavaScript seguirá subiendo en la cadena hasta llegar al prototipo. Si no se encuentra en ningún punto de la cadena, se devolverá undefined.

Ejemplo de la cadena prototípica:

const objetoBase = {
  metodoBase: function() {
    console.log('Método en objeto base');
  }
};

const objetoIntermedio = Object.create(objetoBase);
objetoIntermedio.metodoIntermedio = function() {
  console.log('Método en objeto intermedio');
};

const objetoFinal = Object.create(objetoIntermedio);
objetoFinal.metodoFinal = function() {
  console.log('Método en objeto final');
};

objetoFinal.metodoBase();

"Método en objeto base"

Aquí, objetoFinal hereda de objetoIntermedio, que a su vez hereda de objetoBase. Aunque objetoFinal no tiene el método metodoBase(), JavaScript lo encuentra en objetoBase, lo que demuestra el funcionamiento de la cadena de prototipos.

El Prototipo de una Función Constructora

Cuando creas un objeto usando una función constructora, el prototipo del objeto creado será el prototipo del constructor. Este es el lugar ideal para definir métodos que pueden ser compartidos por todas las instancias del objeto.

Ejemplo con función constructora y prototipo:

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

Persona.prototype.saludar = function() {
  console.log(`Hola, soy ${this.nombre}`);
};

const juan = new Persona('Juan', 25);
const ana = new Persona('Ana', 30);

juan.saludar();
ana.saludar();

"Hola, soy Juan"
"Hola, soy Ana"

Como vemos saludar() está definido en el prototipo de Persona, por lo que todas las instancias creadas con la función constructora Persona comparten el mismo método saludar().

Acceso al prototipo con Object.getPrototypeOf()

El método Object.getPrototypeOf() permite obtener el prototipo de un objeto de manera segura y es la forma recomendada en lugar de acceder directamente a la propiedad __proto__, que es específica de los navegadores y no está estandarizada.

Ejemplo de uso de Object.getPrototypeOf():

const gato = {
  nombre: 'Tom',
  maullar: function() {
    console.log('Miau miau');
  }
};

const otroGato = Object.create(gato);
console.log(Object.getPrototypeOf(otroGato) === gato);

true

Object.getPrototypeOf(otroGato) devuelve el prototipo del objeto otroGato, que en este caso es gato.

Cambiar el prototipo de un objeto con Object.setPrototypeOf()

Puedes cambiar el prototipo de un objeto en tiempo de ejecución usando el método Object.setPrototypeOf(), aunque esta práctica no es recomendada debido al impacto en el rendimiento.

Ejemplo de Object.setPrototypeOf():

const ave = {
  volar: function() {
    console.log('Puedo volar');
  }
};

const pez = {
  nadar: function() {
    console.log('Puedo nadar');
  }
};

const pato = {};

Object.setPrototypeOf(pato, ave);
pato.volar();

Object.setPrototypeOf(pato, pez);
pato.nadar();

"Puedo volar"
"Puedo nadar"

En el ejemplo anterior el prototipo de pato se cambia primero a ave, permitiéndole volar, y luego a pez, permitiéndole nadar.

Diferencias entre __proto__ y prototype

Es importante no confundir la propiedad __proto__ con prototype. Aunque están relacionadas, tienen propósitos diferentes:

1. __proto__: Es una propiedad interna de cada objeto que apunta a su prototipo. Es la cadena que sigue JavaScript para encontrar propiedades y métodos heredados.
2. prototype: Es una propiedad de las funciones constructoras. Define el prototipo que será asignado a los objetos creados por esa función constructora.

function Animal() {}
console.log(Animal.prototype);

const perro = new Animal();
console.log(perro.__proto__ === Animal.prototype);

Animal {}
true

Animal.prototype es el prototipo que será asignado a perro.__proto__ cuando se cree una instancia usando la función constructora Animal.

Ventajas y Desventajas del Prototipo en JavaScript

El sistema de prototipos en JavaScript ofrece varios beneficios, especialmente en términos de reutilización de código y eficiencia. Sin embargo, también tiene algunas desventajas que debes considerar cuando trabajas con este mecanismo.

Ventajas del Prototipo

1. Reutilización de Código: Permite definir métodos y propiedades una vez y compartirlos entre todas las instancias. Esto reduce la duplicación de código y facilita el mantenimiento.
2. Eficiencia de Memoria: Los métodos definidos en el prototipo no se duplican para cada instancia. Esto ahorra memoria y mejora el rendimiento.
3. Herencia: Facilita la implementación de herencia entre objetos. La herencia prototípica permite crear jerarquías de objetos complejas y reutilizar código de manera eficiente.
4. Facilidad para añadir métodos a los objetos: Los prototipos permiten que los métodos se añadan de forma dinámica a los objetos. Esto significa que puedes extender el comportamiento de los objetos incluso después de haber sido creados.

Desventajas

1. Complejidad: La cadena de prototipos puede ser complicada de entender y depurar. La resolución de propiedades y métodos a través de la cadena de prototipos puede ser difícil de seguir, especialmente en aplicaciones grandes.
2. Sobreescritura: La posibilidad de sobrescribir métodos y propiedades puede llevar a errores si no se maneja correctamente. Es importante tener cuidado al sobrescribir métodos para no introducir comportamientos inesperados.
3. Compatibilidad: El uso de la propiedad __proto__ no está estandarizado en todas las plataformas. Aunque es ampliamente soportado en los navegadores modernos, su uso no se recomienda debido a problemas de compatibilidad y rendimiento. En su lugar, es mejor utilizar métodos como Object.getPrototypeOf() y Object.setPrototypeOf().
4. Poca familiaridad para desarrolladores acostumbrados a clases: Aunque la herencia prototípica es poderosa, puede ser menos intuitiva para los desarrolladores que provienen de lenguajes orientados a objetos basados en clases, como Java o C#. El enfoque basado en prototipos de JavaScript difiere en su implementación, lo que puede generar una curva de aprendizaje.

Conclusión

El prototipo es un concepto fundamental en JavaScript que permite la reutilización de propiedades y métodos mediante la herencia prototípica. Comprender cómo funciona el prototipo te permitirá escribir código más eficiente y reutilizable. Tanto si estás trabajando con objetos simples como con funciones constructoras, el sistema de prototipos es la base sobre la que JavaScript construye su mecanismo de herencia.

En el próximo artículo, profundizaremos en cómo combinar el Patrón Constructor/Prototipo para crear objetos más robustos y escalables.