javascript

Prototype en JavaScript: definición y ejemplos de uso

En este post se explica cuál es la función de la palabra reservada prototype en el lenguaje de programación JavaScript. También se describe cuándo es recomendable su uso, ventajas, desventajas y ejemplos del mismo.

Prototype en JavaScript

Es una propiedad que tienen todos los objetos de JavaScript, el cual representa el prototipo de cada objeto.

Gracias a prototype, se pueden modificar los objetos o agregar algún polyfill.

Ventajas de prototype

Cuando se agrega un método al objeto, a través de prototype, todos los demás objetos lo heredan al instante.

Cuándo (y cuándo no) usar prototype

Si el objeto no es del programador, nunca. Es decir, no es recomendable modificar a Array, Object, String, etcétera; pues son objetos que son globales y a su vez especiales. Nunca se deben modificar , si no es estrictamente necesario.

En cambio, si son objetos propios (o clases), no hay ningún problema.

En el caso de un polyfill

Es útil usar prototype cuando se programa un polyfill. Por ejemplo, vamos a suponer que se desea agregar el método forEach de los arreglos en caso de que el mismo no exista.

Si el método ya existe, no se hace nada; en caso de que no, se define. Todo esto permitirá que se pueda usar a forEach en los arreglos, sin importar el navegador o versión de JavaScript.

El código, en el cual se usa prototype, podría quedar así:

if(!Array.prototype.forEach){
  Array.prototype.forEach = function(){
    // this es el arreglo
    //TODO: implementar magia aquí
  }
}

De esta manera, si el método existe, todo seguirá normal. Si no, entonces se implementa el código de forEach. Así es como funcionan los polyfill; pero antes de modificar se comprueba si el método no existe.

Al crear clases y objetos

Por otro lado, prototype es de gran ayuda al definir clases. No recuerdo en qué versión de JS se hace así, pero había una forma como la siguiente:

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

// Ahora usamos prototype
Mascota.prototype.ladrar = function(){
  console.log("Woof! Me llamo " + this.nombre);
}

De esta manera se agregan métodos a los objetos, que más tarde pueden ser creados con:

var m = new Mascota("Maggie", 3);

Para jugar con el lenguaje

Como lo dije, no se debe usar a prototype cuando se desee o cuando se piense que esa es la solución a algo. Sin embargo, si se desea jugar un poco o probar lo que este maravilloso lenguaje permite, es válido.

Se tienen a las cadenas; las mismas tienen algunos métodos como toLowerCase. Se puede implementar el método invertir, el cual regresaría una cadena nueva, pero invertida.

El código quedaría así:

/*
Jugar con los prototipos de JS
@author parzibyte
*/String.prototype.invertir = function () {
 return this.split("").reverse().join("");
}

let cadena = "Hola desde parzibyte.me";
console.log("La cadena es: ", cadena);
console.log("Al invertirla, es: ", cadena.invertir());

Un método repetido y visto miles de veces; pero eso que se acaba de hacer permite lo siguiente:

"Hola".invertir();

Sin importar cuál cadena sea (siempre y cuando sea una cadena); al llamar a este método se devuelve una nueva cadena pero invertida.

Cuando normalmente, el método se llamaría así:

invertir("Cadena");

Aunque puede parecer divertido o útil, se desaconseja esto. Sobre todo porque a veces cuando se recorre con for(var propiedad in objeto) y no se comprueba con hasOwnProperty, hay resultados inesperados.

Conclusión

En resumen, prototype ayuda a definir más métodos de un objeto, o a sobrescribir (a veces) a los mismos. Esto no es recomendable de ninguna manera, y si se desea agregar un método, se debe comprobar primero si el mismo no existe.

Si se desea una definición más formal de prototype en JavaScript, aquí está este link de MDN.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.