7

Comprendiendo los prototipos de Javascript

Si te quedo duda sobre un prototipo espero ayudarte con esto.

Primero que nada.
Quedo claro que es un Objeto?
Se puede declarar de 3 maneras distintas

A (como el primer ejemplo cuando declaramos p1 y p2
var catA = {name: "Fluffy", color: "White", age: 0};

B (Algo obsoleta pero sirve)
var catB = Object.create(new Object()); catB.name = "Fluffy"; catB.color = "White"; catB.age = 0;

C
Tal cual declaramos la función Punto del curso de Fundamentos de JavaScript

functionPunto(x,y){
    this.x = x
    this.y = y
}

A simple vista podemos definir que un objeto es un conjunto de propiedades como un arreglo. Bien, y ¿que es una propiedad? es un valor con nombre, tal cual podemos ver al tener el nombre x con su valor 0.
Tanto A como B producen exactamente lo mismo, pero C es distinto.
Ya sabemos que es un objeto y quedo claro que es, ahora porque es distinta la opción C, es por que es la que nos permite declarar un objeto el cual se necesita modificar de alguna manera y la cual nos permite trabajar con los prototype con el fin de lograr modificarlo

Que tenemos que entender, que el objeto creado a partir de function Punto(x,y) el cual es nuestro ejemplo C es una función constructora… otra palabra que no sabemos que es…
Una función constructora es solo una nomenclatura utilizada para describir que la función creara propiedades(recuerdas que es una propiedad) dentro de la función utilizando el famoso this

Ahora bien cuando se inicia la pagina, JavaScript define la función Punto para ser llamada y cuando ejecutamos el new en new Punto(0,4) le pedimos que cree una nueva instancia de ese objeto tal cual la funcion esta especificada.
Aquí se pone raro, al crear esa nueva new instancia de ese objeto Punto a partir de la función constructora function Punto(x,y){} le decimos a JavaScript, dale la propiedad prototype de la función function Punto(x,y){} al objeto new Punto(0,4)

Ya nos revolvimos de nuevo, ahora ¿que la propiedad prototype y para que sirve y tanto los objetos como las funciones tienen esta propiedad?
Prototype es una propiedad que JavaScript nos da el cual hereda valores y si, ambos tiene esta propiedad pero en un objeto lo encontramos como Punto__proto__ y en una funcion como .Prototype Ejemplo:
Funcion

Punto.prototype
{moverEnX: ƒ, moverEnY: ƒ, distancia: ƒ, constructor: ƒ}

Objeto

p1.__proto__
{moverEnX: ƒ, moverEnY: ƒ, distancia: ƒ, constructor: ƒ}

Entonces si en la propiedad prototype de la función Punto.prototype. creamos otra función la cual modifique el valor de alguna de las propiedades del objeto creado creado en este caso p1 const p1 = new Punto(0,4)
Esto con el siguiente código

Punto.prototype.moverEnX = function moverEnX(x){
    this.x += x
}

Le estamos diciendo que le vamos a agregar otra propiedad al objeto creado la cual se llamara moverEnX y este va a ser una funcion que recibirá un valor function moverEnX(x) para después transformar el valor de la x que ya existía previamente (cuando se creo el objeto por primera ves con new Punto(0,4) siendo 0 el valor de x) con el nuevo valor el cual es el que le mandamos nosotros p1.moverEnX(10)

Espero haber sido claro y lograr ayuda a alguien con esta explicación, tome de referencia esto:
https://www.pluralsight.com/blog/software-development/understanding-javascript-prototypes

Escribe tu comentario
+ 2
Ordenar por:
2
6 años

O sea que un prototipo, te permite aparte de heredar propiedades de un objeto, añadirle métodos?

1
6260Puntos
5 años

Claro! solo recuerda que se la agregas a la instancia del nuevo objecto, no al objeto en si.
En este caso le agregamos el método moverEnX al objecto instansiado

1
6994Puntos
4 años

gracias… todavia tengo que estudiarlo mas!!!

0
4Puntos
4 años

esta buena!!!