Prototipos en la práctica

Clase 77 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

Cuando trabajas con clases e instancias en JavaScript, tarde o temprano necesitas agregar métodos que no estaban contemplados en la clase original. Entender cómo funciona el prototype y la cadena de prototipos es fundamental para hacerlo correctamente y evitar errores comunes que pueden frenar tu avance.

¿Cómo agregar un método nuevo a una instancia?

Imagina que ya tienes una instancia llamada perroUno creada a partir de una clase constructora Perro. Al trabajar con ella, te das cuenta de que necesitas un método adicional. La primera idea suele ser asignarlo directamente a la instancia [0:06]:

javascript perroUno.nuevoMetodo = function() { console.log("Este es un nuevo método"); };

Esto funciona, pero solo para esa instancia en particular. Si creas otras instancias de Perro, ninguna tendrá acceso a nuevoMetodo. La razón es que no lo estás agregando a la clase constructora ni a su prototype, sino únicamente al objeto individual.

¿Por qué la instancia no tiene prototype?

Un error muy frecuente es intentar agregar un método al prototype de una instancia [3:22]:

javascript perroUno.prototype.segundoMetodo = function() { console.log("Es otro nuevo método"); };

Si ejecutas perroUno.prototype, el resultado es undefined. Las instancias no poseen la propiedad prototype; esta propiedad solo existe en las clases constructoras o funciones constructoras. En cambio, si consultas Perro.prototype, obtienes el objeto prototipo con los métodos que se pueden compartir entre todas las instancias.

¿Cuál es la forma correcta de inyectar métodos al prototipo?

La solución es agregar el método directamente al prototype de la clase constructora [4:15]:

javascript Perro.prototype.segundoMetodo = function() { console.log("Es otro nuevo método"); };

Ahora, cualquier instancia como perroUno puede llamar a perroUno.segundoMetodo() y recibirá el mensaje correctamente. El método no vive dentro de la instancia, sino que se hereda a través del prototipo de la clase padre.

¿Qué es la cadena de prototipos?

Cuando llamas perroUno.segundoMetodo(), JavaScript sigue un proceso de búsqueda conocido como cadena de prototipos (prototype chain) [5:10]:

  • Primero pregunta a la instancia perroUno: "¿Tienes este método?" La instancia responde que no.
  • Entonces sube por la cadena hasta la clase padre Perro y pregunta: "¿Tú lo tienes?"
  • La clase Perro revisa su prototype y encuentra el método allí.
  • Lo devuelve y perroUno puede ejecutarlo.

Este mecanismo es lo que permite la herencia en JavaScript: los objetos están interconectados a través de sus prototipos.

¿Cómo visualizar la cadena de prototipos completa?

Para inspeccionar toda la cadena, puedes usar Object.getPrototypeOf() en un bucle que recorra cada nivel hasta llegar a null [6:30]:

javascript let prototipoActual = Object.getPrototypeOf(perroUno); while (prototipoActual !== null) { console.log(prototipoActual); prototipoActual = Object.getPrototypeOf(prototipoActual); }

El resultado muestra la cadena completa:

  • Primer nivel: el prototype de Perro, porque perroUno es una instancia y no tiene prototipo propio.
  • Segundo nivel: el prototype de Animal, ya que la clase Perro extiende de Animal.
  • Tercer nivel: el objeto global Object, del cual heredan todos los objetos en JavaScript.
  • Cuarto nivel: null, indicando que no hay nada más arriba.

Esta estructura demuestra cómo cada objeto está enlazado al siguiente en una cadena ascendente. Los métodos definidos en cualquier punto de esa cadena quedan disponibles para las instancias que se encuentran más abajo, gracias a la herencia prototípica.

Entender este flujo te permite decidir con precisión dónde colocar métodos nuevos y por qué un método funciona en una instancia aunque nunca lo hayas definido directamente en ella. ¿Ya habías enfrentado el error de asignar un método al prototype de una instancia? Comparte tu experiencia en los comentarios.