Javascript

Prototypes en JavaScript

En este post intento desmitificar la propiedad prototype de los objetos en JavaScript.

Los objetos en JavaScript pueden tener asociado un Prototype o Prototipo, que actúa como una plantilla desde la que el objeto hereda propiedades y métodos.

El prototipo es una propiedad de nombre prototype, que es en sí un objeto, denominado objeto prototipo, y que reside en la función constructor del objeto. A través de esta propiedad prototype es que podemos agregarle al objeto nuevas propiedades y métodos.

Un objeto prototipo puede tener a su vez otro objeto prototipo del cual hereda, lo que se conoce como cadena de prototipos. Esto permite que los objetos puedan tener propiedades y métodos que no han sido declarados por ellos mismos.

La herencia de prototipos funciona de la siguiente manera:

  • Los objetos Date heredan de Date.prototype
  • Los objetos Number heredan de Number.prototype
  • Los objetos Array heredan de Array.prototype
  • Etc.

A su vez, todos los objetos heredan de Object.prototype, que se encuentra en lo más alto de la cadena de prototipos.

Si exploramos por ejemplo el prototipo Date.prototype podemos ver los métodos que serán accesibles a cada instancia de Date:

date prototype

Estos son solo algunos de los métodos disponibles en el prototipo de Date

Veamos un ejemplo de uso:

const ahora = new Date();

/****************************************
'ahora' hereda el prototipo de Date
y por lo tanto podemos usar sus métodos
****************************************/
console.log(ahora.getMonth()); // devuelve el número de mes

Ahora veámoslo en una función constructor propia:

// Declaro un constructor
function Automovil (marca, modelo, color) {
  this.marca = marca;
  this.modelo = modelo;
  this.color = color;
}

// Lo instancio
var miAuto = new Automovil('Tesla', 'Cybertruck', 'Negro');

// Agrego la propiedad ruedas a la propiedad prototype del constructor
Automovil.prototype.ruedas = 4;

// La instancia de Automovil hereda la propiedad 'ruedas' del prototype
console.log(miAuto.color); // "Negro"
console.log(miAuto.ruedas); // 4

En este ejemplo, la instancia miAuto del objeto Automovil hereda propiedades y métodos de Automovil.prototype.

Las instancias de objetos, como miAuto, heredan además una propiedad __proto__ que referencia al prototype de la función constructor, en este caso Automovil.prototype.

Automovil.prototype === miAuto.__proto__; // true