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 deDate.prototype
- Los objetos
Number
heredan deNumber.prototype
- Los objetos
Array
heredan deArray.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
:
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