Prototype chain en JavaScript

En el apasionante mundo del desarrollo web, específicamente en JavaScript, existe un concepto fundamental que permite la herencia y la reutilización de código de manera eficiente: la prototype chain. Si alguna vez has escuchado mencionar términos como object.getPrototypeOf, object.prototype, the prototype u object.create, es momento de adentrarse en el universo de la cadena de prototipos en JavaScript.

¿Qué es la orototype chain?

En JavaScript prácticamente todo es un objeto, exceptuando los tipos primitivos. Aquí es donde entra en acción la prototype chain o cadena de prototipos. Cada objeto en JavaScript posee una propiedad interna llamada prototipo, la cual apunta a otro objeto. En términos de herencia, podríamos decir que es como si cada objeto tuviera un padre, un objeto del cual hereda propiedades y métodos.

object.create: construir objetos a partir de prototipos

Para crear objetos y asignarles un prototipo específico, JavaScript nos brinda el método object.create. Esta función nos permite decirle a JavaScript qué prototipo queremos para nuestro objeto y él se encargará de crearlo a partir de dicho prototipo. Veamos un ejemplo:

//Prototype chain en JavaScript
// Creando un prototipo "persona"
const persona = {
  saluda: function() {
    console.log("Hola, soy una persona.");
  }
};

// Creando un objeto "agente" con el prototipo "persona"
const agente = Object.create(persona);
agente.vuela = function() {
  console.log("¡Soy un agente y puedo volar!");
};

// Creando un objeto "superhéroe" con el prototipo "agente"
const superheroe = Object.create(agente);
superheroe.saluda(); // Salida: "Hola, soy una persona."
superheroe.vuela();  // Salida: "¡Soy un agente y puedo volar!"

Mixin: mezclar propiedades de distintos objetos

Uno de los conceptos interesantes relacionados con la prototype chain es el mixin, que nos permite mezclar propiedades y métodos de diferentes objetos para crear uno nuevo con todas estas características. Veamos un ejemplo sencillo:

//Prototype chain en JavaScript
// Definiendo un objeto "habilidades"
const habilidades = {
  salta: function() {
    console.log("¡Estoy saltando!");
  }
};

// Mezclando las habilidades con el prototipo "agente"
Object.assign(agente, habilidades);

// Ahora el objeto "agente" tiene el método "salta"
agente.salta(); // Salida: "¡Estoy saltando!"

La magia de la prototype chain en acción

Imagina que tienes un objeto «genteMala» que tiene la habilidad de saludar. Sin embargo, deseas que tus «agentes» también tengan esta habilidad. Puedes lograrlo de la siguiente manera:

//Prototype chain en JavaScript
// Creando el objeto "genteMala" con la habilidad de saludar
const genteMala = {
  saluda: function() {
    console.log("¡Soy gente mala y te saludo!");
  }
};

// Mezclando la habilidad de saludar de "genteMala" al prototipo "agente"
Object.assign(agente, genteMala);

// Ahora el objeto "agente" también tiene la habilidad de saludar
agente.saluda(); // Salida: "¡Soy gente mala y te saludo!"

De esta manera, gracias a la prototype chain y al uso del mixin, los «agentes» adquieren la capacidad de saludar que proviene del objeto «genteMala». Esto demuestra la versatilidad y la potencia de la herencia en JavaScript.

¿Cómo se busca en la prototype chain?

Cuando se invoca un método en un objeto, JavaScript primero busca ese método en el propio objeto. Si no lo encuentra, no se rinde tan fácilmente y sigue buscando en el prototipo de ese objeto, y así sucesivamente en una cadena ascendente. Este proceso se repite hasta llegar al final de la cadena, que es el object.prototype.

//Prototype chain en JavaScript
// Definición del objeto "persona"
const persona = {
  saluda: function() {
    console.log("Hola, soy una persona.");
  }
};

// Definición del objeto "agente" con el prototipo "persona"
const agente = Object.create(persona);

// Invocación del método "saluda" en el objeto "agente"
agente.saluda(); // Salida: "Hola, soy una persona."

En este ejemplo, el objeto «agente» no tiene el método «saluda», pero gracias a la prototype chain lo busca en su prototipo «persona» y lo encuentra allí, por lo que puede invocarlo con éxito.

Un cambio de vida con desarrollo web

Si te apasiona el desarrollo web y sueñas con convertirte en un profesional del sector IT, no puedes perderte la oportunidad de formarte en el Desarrollo Web Full Stack Bootcamp de KeepCoding. En este bootcamp, aprenderás no solo sobre JavaScript y su increíble sistema de herencia a través de la prototype chain, sino también sobre otras tecnologías fundamentales en el desarrollo web, como HTML, CSS, Node.js y mucho más.

Al finalizar el bootcamp, estarás listo para enfrentarte a los desafíos que presenta el sector tecnológico, el cual ofrece una gran demanda de profesionales, salarios altamente competitivos y una estabilidad laboral envidiable. ¡No pierdas más tiempo y prepárate para cambiar tu vida en el mundo del desarrollo web con KeepCoding!