Se dice que JavaScript es un lenguaje basado en prototipos. Entonces, los "prototipos" deben ser un concepto importante, ¿verdad?
Hoy voy a explicar qué son los prototipos, qué necesitas saber y cómo usarlos de manera efectiva.
¿Qué son los prototipos?
En primer lugar, no se deje engañar por la palabra "Prototipo" . El "prototipo" en JavaScript no es lo mismo que "prototipo" en inglés. No significa una versión inicial de un producto que se ensambló rápidamente.
En cambio, prototipo en JavaScript es simplemente una palabra que no significa absolutamente nada. Podemos reemplazar el prototipo con naranjas y puede significar lo mismo.
Por ejemplo, piense en Apple. Antes de que Apple Computers se hiciera popular, probablemente pensarás en Apple como la fruta de color rojo. “Apple” en Apple Computers no tiene un significado inicialmente, pero lo tiene ahora.
En el caso de JavaScript, el prototipo se refiere a un sistema. Este sistema le permite definir propiedades en objetos a los que se puede acceder a través de las instancias del objeto.
El prototipo está estrechamente relacionado con la programación orientada a objetos. No tendría sentido si no comprende de qué se trata la programación orientada a objetos.
Le sugiero que se familiarice con esta serie introductoria sobre programación orientada a objetos antes de continuar.
Por ejemplo, an Array
es un modelo para instancias de matriz. Crea una instancia de matriz con []
o new Array()
.
Si utiliza console.log
esta matriz, no verá ningún método. Pero, sin embargo, puede utilizar métodos como concat
, slice
, filter
, y map
!

¿Por qué?
Porque estos métodos se encuentran en el prototipo de Array. Puede expandir el __proto__
objeto (Chrome Devtools) o el <prototype>
objeto (Firefox Devtools) y verá una lista de métodos.


prototype
Tanto __proto__
en Chrome como <prototype>
en Firefox apunta al objeto Prototype. Simplemente están escritos de manera diferente en diferentes navegadores.
Cuando lo usa map
, JavaScript busca map
en el propio objeto. Si map
no se encuentra, JavaScript intenta buscar un prototipo. Si JavaScript encuentra un prototipo, continúa buscando map
en ese prototipo.
Entonces, la definición correcta de Prototype es: un objeto al que las instancias pueden acceder cuando intentan buscar una propiedad.
Cadenas de prototipos
Esto es lo que hace JavaScript cuando accede a una propiedad:
Paso 1 : JavaScript comprueba si la propiedad está disponible dentro del objeto. En caso afirmativo, JavaScript utiliza la propiedad de inmediato.
Paso 2 : Si la propiedad NO está dentro del objeto, JavaScript verifica si hay un Prototipo disponible. Si hay un prototipo, repita el paso 1 (y verifique si la propiedad está dentro del prototipo).
Paso 3 : si no quedan más prototipos y JavaScript no puede encontrar la propiedad, hace lo siguiente:
- Devoluciones
undefined
(si intentó acceder a una propiedad). - Lanza un error (si intentó llamar a un método).
En forma de diagrama, así es como se ve el proceso:

Ejemplo de cadena de prototipos
Digamos que tenemos una Human
clase. También tenemos una Developer
subclase que hereda de Human
. Human
s tenemos un sayHello
método y Developers
tenemos un code
método.
Aquí está el código para Human
Human
(y más Developer
abajo) se pueden escribir con funciones de constructor. Si usamos funciones de Constructor, se prototype
vuelve más claro, pero crear Subclases se vuelve más difícil. Por eso estoy mostrando un ejemplo con Clases. (Consulte este artículo para conocer las 4 formas diferentes de utilizar la programación orientada a objetos).
Así es como escribirías Human
si usaras un Constructor en su lugar.
Aquí está el código de Developer
.
Una Developer
instancia puede usar ambos code
y sayHello
porque estos métodos están ubicados en la cadena de prototipos de la instancia.
Si tiene console.log
la instancia, puede ver los métodos en la cadena de prototipos.

Delegación prototípica / herencia prototípica
La delegación prototípica y la herencia prototípica significan lo mismo.
Simplemente dicen que usamos el sistema prototipo, donde colocamos propiedades y métodos en el prototype
objeto.
¿Deberíamos utilizar la delegación prototípica?
Dado que JavaScript es un lenguaje basado en prototipos, deberíamos usar la delegación de prototipos. ¿Derecho?
Realmente no.
Yo diría que depende de cómo se escriba la programación orientada a objetos. Tiene sentido usar Prototipos si usa clases porque son más convenientes.
Pero tiene sentido NO usar prototipos si usa funciones de fábrica.
Nuevamente, lea este artículo para conocer cuatro formas diferentes de escribir programación orientada a objetos.
Implicaciones de rendimiento
El rendimiento entre los dos métodos no importa mucho, a menos que su aplicación requiera millones de operaciones. En esta sección, voy a compartir algunos experimentos para probar este punto.
Preparar
Podemos usar performance.now
para registrar una marca de tiempo antes de ejecutar cualquier operación. Después de ejecutar las operaciones, usaremos performance.now
para registrar la marca de tiempo nuevamente.
Luego, obtendremos la diferencia en las marcas de tiempo para medir cuánto tiempo tardaron las operaciones.
Usé una perf
función para ayudar con mis pruebas:
Nota: Puede obtener más información performance.now
en este artículo .
Experimento n. ° 1: usar prototipos versus no usar prototipos
Primero, probé cuánto tiempo se tarda en acceder a un método a través de un prototipo frente a otro método que se encuentra en el propio objeto.
Aquí está el código:
Los resultados promedio se resumen en esta tabla de la siguiente manera:
Prueba | 1,000,000 operaciones | 10,000,000 operaciones |
---|---|---|
En objeto | 3 ms | 15 ms |
En prototipo | 2ms | 12 ms |
Nota: Los resultados son de Devtools de Firefox. Lea esto para comprender por qué solo estoy haciendo evaluaciones comparativas con Firefox.
El veredicto: no importa si usa prototipos o no. No hará ninguna diferencia a menos que ejecute> 1 millón de operaciones.
Experimento 2: clases frente a funciones de fábrica
Tuve que ejecutar esta prueba ya que recomiendo usar prototipos cuando usa clases y no usar prototipos cuando usa funciones de fábrica.
Necesitaba probar si crear funciones de fábrica era significativamente más lento que crear clases.
Aquí está el código.
Los resultados promedio se resumen en la tabla de la siguiente manera:
Prueba | 1,000,000 operaciones | 10,000,000 operaciones |
---|---|---|
Clase | 5ms | 18 ms |
Fábrica | 6ms | 18 ms |
El veredicto: no importa si usa funciones de clase o de fábrica. No hará ninguna diferencia incluso si ejecuta> 1 millón de operaciones.
Conclusión sobre las pruebas de rendimiento
Puede utilizar las funciones Clases o Fábrica. Eliges usar prototipos o puedes optar por no hacerlo. Realmente depende de ti.
No hay necesidad de preocuparse por el rendimiento.
Si te gustó este artículo, ¡cuéntaselo a un amigo! Compártelo en Twitter . Si detecta un error tipográfico, le agradecería que lo corrija en GitHub . ¡Gracias!
0 Comentarios
Dejanos tu comentario para seguir mejorando!