4

Qué es "prototype" y qué es "_proto_"

Bueno, en la clase de “La verdad oculta sobre las clases en Javascript” me surgió la duda de las cadenas de prototype y cómo funcionaban ( después de ES6 este método ya no es muy útil) y gracias a eso logré entender a qué hace referencia “proto”.

Antes de poder comprender esto necesitamos entender que es lo que pasa cuando creamos un constructor basado en una función normal.

Primero crearemos una función constructora

functionconstructor ( x, y ) {
	this.x = x
	this.y![temporal1.png](https://static.platzi.com/media/user_upload/temporal1-bf6a2e61-1884-4f15-83ea-50a7b585e761.jpg) = y
}

Ahora vamos a asignarle una prototype function a esta función constructora y una variable de prueba.

constructor.prototype.funcionPrototype = function(){ console.log('esto es una prueba') }varvariablePrueba = newconstructor( 1, 2)

Qué acabamos de hacer? Si abrimos la consola veremos qué hicimos dentro de nuestro código.

temporal1.png

Si esto aparece dentro de nuestro objeto, dónde quedó nuestra función? Bueno si miramos más hacía abajo encontraremos algo interesante.

temporal2.png

Gracias a que almacenamos nuestra función con la propiedad “prototype” este queda almacenado como un metodo dentro de el proto de nuestro objeto. Todas los objetos en JS obtienen sus propiedades y métodos de proto y gracias a “prototype” logramos modificar el prototype de nuestros objetos.

Ya que comprendemos qué podemos hacer con para qué funciona “prototype”, vamos a ver com más profundidad a que se refiere.

Voy a crear dos variables de ejemplo y con ellas desarrollaremos nuestro ejemplo.

var b = new Foo(20);
var c = new Foo(30);

Bueno, ya que tenemos las variables b y c generadas con nuestra función constructora Foo veremos cómo funciona el proto con ellos.
temporal3.png

Se que se puede ver algo confuso, pero lo explicaré paso por paso.

Primero debemos saber que siempre existirá un object.prototype que será el proto de los objetos en general. Con esto en mente, comencemos

  • Si observamos el objeto Foo, veremos que es nuestra función constructora, la cual se divide en dos

    1. proto , la cual esta conectada a el prototipo general de todas las funciones
    2. prototype, las cuales son los métodos (funciones) o propiedades(variables) que nosotros mismos le agregamos, los cuales se almacenan en foo.prototype
  • Si observamos nuestras variables, ambas tienen tan solo una casilla conectada, la cual esta conectada a foo.prototype, la cual son los métodos y variables que asignamos a nuestra función foo en un inicio.

  • Por último quiero que se fijen en foo.prototype, esta tiene dos casillas

    1. proto, la cual esta conectada al proto general de todos los objetos
    2. constructor, la cual esta conectada a la función constructora con la que generamos nuestras nuevas variables

Ya que entendemos un poco mejor el flujo de este sistema quiero dejar claro algunos puntos que son claves para comprender el por qué de esto:

  • Cada tipo de objeto tiene un proto de él mismo: Así como las funciones tienen function.prototype, los arrays tienen un array.prototype, al igual que los demás.

  • Siempre existe un proto general que conecta como linea final de todos los objetos, por esta razón su proto es null

  • Cuando creas una función constructora puedes añadirle prototypes a ella, pero no es recomendable hacerlo con los prototypes ya establecidos de cada objeto en especifico (ej. Modificar function.prototype ).

Espero haberte ayudado, si tienes alguna pregunta te dejo estos links para que puedas encontrar más informacion:

Javascript. The core.
JavaScript Object Prototypes
Prototypes in Javascript Tutorial / YT video by The Coding Train

O puedes dejar un comentario y yo te responderé lo antes posible.

Si te gusto, deja tu like. Me despido @sanprabet a tus servicios

Escribe tu comentario
+ 2
1
3 años

Hay una imagen que carece de senntido con lo que va explicando, Ademas de que nunca responde las preguntas del titulo 🤷‍♂️