Herencia Prototipal

Apuntes de la clase:

Cuando inspeccionaba código en los navegadores siempre vi al proto como una zona oscura donde no miraba. Ahora que lo entiendo mejor ya no me da miedo inspeccionar hasta el fondo.

El Prototype y la herencia prototipal, a mi entender (corríjanme si me equivoco) me la imagino a buscar una persona en un hotel. ¿Por que? Bueno, supongamos que queremos encontrar a Raquel… ¿Cuál sería el primer lugar donde podríamos comenzar a buscar? Pues en su habitación. Esta búsqueda sería como la que se hace dentro del objeto, en el primer nivel.
 
Si no encontramos a Raquel, lo siguiente sería salir y buscar en el corredor, piso por piso o la azotea, que sigue siendo un espacio privado compartido en el que se puede buscar a un huésped. En mi mente lo imagino como el primer espacio en memoria de Prototype (el primer Prototype de nuestro objeto).
 
Si aún así no encontramos a Raquel, nos tocaría buscar a Raquel en las áreas comunes. Aquellos espacios que comparten todos los que se alojan en el hotel. Piscinas, parques, jardines, etc. Esto segun mi comparación sería como el prototype del prototype, que no es más que una zona en memoria que comparten todos los objetos en nuestro programa/sistema.
 
En realidad pienso que es muy similar a como funcionan las clases en otros lenguajes. En el sentido en que se reciclan los espacios de memoria mediante el uso de los objetos. Javascript lo hizo muy bien con esta solución.

Herencia prototipal

‌

Ya vimos como funciona la herencia, cuando asignamos métodos a hero pudimos acceder a el a pesar de que cuando buscamos en la consola nos apareciera como un objeto vacío, sin embargo en __proto__ estaba la referencia a los métodos. Esta es una de las mejores características que tiene JavaScript.

‌

Vamos a inspeccionar a esto hasta a llegar a Object. ¡Vamos al código!

‌

Al código

‌

Vamos a tener este código base.

function Persona(name) {
        this.name = name
      }
      Persona.prototype.saludar = function() {
        console.log(`Hola, me llamo ${this.name}`);
      }
      const miPersona = new Persona('Augusto')
      miPersona.saludar()

‌

Si llamamos a con el console.log Persona.name nos dará la propiedad name de la instancia. Si llamamos Persona.saludar nos dará la propiedad de la clase. Ahora, si llamamos a Persona.toString nos sale que es una función que hemos heredado, pero ¿de donde sale esta función?

‌

Usemos hasOwnProperty

‌

Esto lo vamos a usar para saber si alguna propiedad pertenece a la clase. De esta forma lo sabremos:

> miPersona.hasOwnProperty('name')
< true

> miPersona.hasOwnProperty('saludar')
< false

Vemos que name sí forma parte de miPersona pero su método saludar no. Vamos a ver cómo es que entonces accedemos a saludar.

> miPersona
< Persona {name: "Augusto"}
    name: "Augusto"
    __proto__:
        saludar: ƒ ()
        constructor: ƒ Persona(name)
        __proto__:
            constructor: ƒ Object()
            hasOwnProperty: ƒ hasOwnProperty()
            isPrototypeOf: ƒ isPrototypeOf()
            propertyIsEnumerable: ƒ propertyIsEnumerable()
            toLocaleString: ƒ toLocaleString()
            toString: ƒ toString()
            valueOf: ƒ valueOf()
            __defineGetter__: ƒ __defineGetter__()
            __defineSetter__: ƒ __defineSetter__()
            __lookupGetter__: ƒ __lookupGetter__()
            __lookupSetter__: ƒ __lookupSetter__()
            get __proto__: ƒ __proto__()
            set __proto__: ƒ __proto__()     

‌

Entonces vemos que usando esto en nuestra consola nos aparecerá que en el __proto__ es donde está el método saludar, y en el __proto__ del __proto__ está la función toString().

‌

Podemos acceder al proto de la siguiente forma: miPersona.__proto__, pero esto puede variar dependiendo del navegador, no en todos aparece de esa forma, solo es una representación de la herencia. La forma correcta de acceder al proto es de la siguiente forma:

> Object.getPrototypeOf(miPersona)
< {saludar: ƒ, constructor: ƒ}

‌

Podemos comprobar que es el mismo objeto que prototype de la siguiente forma:

> Object.getPrototypeOf(miPersona) === Persona.prototype 
< true

‌

Hace referencia al mismo lugar de memoria. Ese objeto es idéntico al que está en Persona.prototype. Esto significa que no es una copia. Esto quiere decir que si le agregamos un método a Persona inmediatamente está disponible en miPersona, esto por que el lenguaje lo encadena y representa la misma cosa.

‌

El lenguaje busca el método en el objeto, sino existe se va al proto y si no está en el proto se va al proto del proto, allí acaba. El ultimo proto es Object, es el punto de partida de todos los objetos de JavaScript. El proto de Object no existe, es aquí cuando la búsqueda se detiene, si ejecutamos una función que no existe en el proto nos saldrá un error. ¿Vale la pena entenderlo? Pos su puesto, nos ofrece un panorama completo de las herencias comprender esto.

Para los que ven Attack on Titan. El objeto Object, el padre de todos los objetos en JavaScript, es el titan fundador, de ese titan salieron varios titanes, 9 para ser exactos, y si eres curioso sabras que hay 9 cosas en JavaScript que son o pueden ser Objetos, como strings, arrays, funciones, Numbers, Booleans etc. Si eres aun mas curioso, sabras que esos 9 titanes heredan memorias y poderes(propiedades y funciones) del titan fundador y de la persona que heredo el poder titan anteriormente.
Veanse Attack on Titan despues de terminar el curso 😏

Esta nota es muy buen complemento a esta clase: FreeCodeCamp: All you need to know to understand JavaScript’s Prototype

Excelente clase!!

Richard y Sacha explican excelente.

Pausen en el 8:17, esa es la reacción de satisfacción de todos al final y al entender esta clase jajaja
Excelente maestro y excelente curso!

Recuerdo que en el curso de Programación básica Freddy hablaba muy apenas de lo que era prototype, y que no nos preocupáramos por prototype hasta que profundizáramos, ahora entiendo sus razones

Repasando de nuevo jaja el examen me mató!

Esto sirve mucho para complementar la clase
https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos

Me explotó la cabeza!

Ahora entiendo mucho mejor los conceptos que antes eran magia para mí. ¡Richard es muy bueno explicando!

Recuerdo en clases del curso de programación Básica de Freddy, el mencionaba que cuando llegaramos a este punto, estaríamos en otro nivel. Veía muy lejos este momento…

Les comparto éste video que me ayudó a profundizar el conocimiento de éste tema.

https://www.youtube.com/watch?v=1hll3TMhjCw

A todo esto es mas fácil y legible para otros desarolladores usar class y su herencia extends.

Prototypeception

Ya va.!!

Vere el video de nuevo.!! 🤯

Ok, ya veo. Prototype es la manera que tiene Js de introducir herencia, la “Clase” base (Object) tiene métodos como valueOf y toString y estos son heredados a cualquier objeto ya que todos heredan de Object por lo que pueden ser accesados por el lenguaje sin tener que definirlos explícitamente.

La pelicula Inception se inspiro en Prototype.

6:36 “zelda.fight… ¿existe? M… m… No existe. Ok. No pasa nada. Que no cunda el pánico. 😂😂😂 …
Vamos a buscar en su proto :
zelda.__proto__.figth
existe? Si existe. Ok. Ejecutamos.”

Si no existiera, buscaríamos en
zelda.__proto__.__proto__
y así hasta llegar a null que es el valor de
Object.__proto__

Object está en la base de la cadena de prototipos de cualquier objeto en Js.

Las funciones también son objetos:
Hero es una función, y por lo tanto un objeto que hereda de Function.prototype que hereda de Object.prototype que no hereda de nadie, ya que
Object.prototype.__proto__== null

Cuando decimos que un objeto hereda propiedades,
nos referimos que las puede usar como si fueran propias
mediante obj.propiedad
pero en realidad no son propias, estan en otro lugar de la cadena de prototipos,
simplemente las toma prestadas, no son propias.
++++++++++++++++++++++++++++++++++++++++
Cadena de prototipos:
Hero —> Function.prototype --> Object.prototype --> null
zelda --> Hero.prototype ------> Object.prototype --> null
++++++++++++++++++++++++++++++++++++++++++++
Equivalencias:
Hero.proto == Function.prototype
Function.prototype.__proto__ == Object.prototype
Object.prototype__proto__ == null

zelda.__proto__ == Hero.prototype
Hero.prototype.__proto__ == Object.prototype
Object.prototype.__proto__ == null

Hero.prototype.constructor == Hero

+++++++++++++++++++++++++++++++++++++
__proto__
no es estandard y gasta recursos, se recomienda utilizar Object.prototypeOf(objeto);

Osea que cuando sueño que estoy soñando es que mi cerebro no encontró el prototype que necesitaba?

Wow, tuve que repetir el video varias veces para poder entender estos conceptos.muy buena información para saber somo se comporta JavaScript por dentro, normalmente uno se limita a usar new pero no sabía que esto era azucar sintatica en como realmenre JS maneja los objetos, emocionado de seguir aprendiendo.

Aqui se muestra todo el tema de manera resumida, me ayudo bastante a terminar de entender: https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b

Herencia prototipal, nos permite ver si el obj es propio, o es heredado.

Es la raiz de todo.
El punto de partida.
El padre, undefined.

Si esta no se encuentra en el mismo objeto que la llamo, la busca en el prototype chain, hasta que lo encuentra o lanza un undefined.
hasownProperty: nos ayuda a ver de donde es el objeto, es boolean.

[[prototype]] = proto

Uno es del objeto : el otro es heredado.

me volo la cabeza , me toca repetir el video 😃 jajjaja

prototypeOfprototypeOfprototypeOfprototypeOfZelda

Otra forma de hacerlo:

class Hero  {
    constructor(name,friend){
        this.name = name;
        this.friend = friend;
    };

    saludar(){
        console.log(`Hola! soy ${this.name}`)
    }

    fight(){
        console.log(`FIGHT!!`)
    }

    bestFriend(){
        console.log(`${this.friend} is the best friend of ${this.name} `)
    }

};

let Link = new Hero('Link');
let Angg = new Hero('Angg','Zuko');
Link.saludar();
Angg.bestFriend();

Aprende esto en esta seccion

sacha dijo en su curso de fundamentos con Javascript que no existen las clases sino prototipos, pero cuando salió la versión de ECMAScript 6 salieron los class constructor que son una mejora sintáctica sobre la herencia basada en prototipos de JavaScript. Estas “clases de JavaScript” proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia de prototipos, espero les guste mi explicación tal y como lo entiendo y sea de mucha ayuda para que lo recuerden.

aquí les dejo el link de MDN para que vean muchos ejemplos sobre class 😃 https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes

Es un tema fundamental para entender como maneja JavaScript las propiedades de los objetos, igual para profundizar es muy útil la plataforma MDN https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos

El comparador === permite comparar vaor y referencia entre objetos

Me gusto mucho esta clase, cosas que uno utiliza sin saber el porque de las cosas, Interesting

Lo que entendi:
1.- Todos los objetos tienen un objeto prototype,
2.- Prototype sirve para heredar atributos y métodos de otro objeto (parecido a la herencia POO).
3.- Los prototypes pueden tener a su vez un prototype.
4.- Todos los objetos en JS tienen como ancestro a Object.
5.- En javascript todo es un objeto.
6.- La vida va de objetos. xd

Entonces Object es el papá de los pollitos. Digo, el papá de los prototypes.

aun no he comenzado el video pero por los cometarios
veo que esta chevere(buena)

https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos

Estuvo densa la cosa, pero ahora comprendo la herencia prototipal

me dolió la cabeza

👏👏 Eres un PRO explicando. Gracias 👏👏

bueno este es mi siguiente analogía :
el _proto => es el vinculo al objeto prototipe
ósea representa un tubo de conexión
todas las funciones tienen ese objeto prototype cuando hacemos una instancia de un nuevo objeto todos los atributos se heredan el el proto del nuevo objeto creado . e

Freddy Vega en el curso de programación básica: “Jamás le pongas atención al proto”

Richard Kaufman en el curso profesional de JS: “¿Y quién lo decidió?”

Tremendo

Me voy a soñar con prototype.
Que clase tan brutal.

Les dejo la documentación de Mozilla de herencia Prototipal 😄 https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos

Cabe destacar como lo indica el profesor que en JavaScript realmente no existen las clases. La implementación del operador “class” que se realizó en EcmaScript 6 simplemente fue lo que se conoce como “syntactical sugar” en desarrollo de software. Realmente las clases en JavaScript siguen siendo prototipos que “facilitan” el manejo de los objetos y sus instancias. Un error que se suele cometer con JavaScript es querer implementar todo lo que se aplica en otros lenguajes (como Java o PHP), entre esas cosas, la forma en que estos lenguajes manejan e implementan las clases. Pero casi siempre cuando se trata de hacer así esto genera problemas (tómese como ejemplo los class components en React, que ahora están siendo reemplazados por los function components y los hooks). Personalmente considero esta, por mucho uno de los conceptos más importantes del lenguaje.

Tengo que repasar esta clase

El lenguaje de juguete (que muchos programadores así consideraban) al día de hoy se ha convertido en algo complejo.

en JS casi todo es un objeto. cada vez que abrimos {} se crea proto o cuando tenemos un array [] .,
y esto es por que hay un objeto que no podemos ver pero que si se crea al momento de hacer funciones , clases, o arrays y les va heredar métodos y esos métodos se encuentran en proto

para las funciones o class serian: constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()

get proto:
set proto

y para los arrays: at: ƒ at()
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
findLast: ƒ findLast()
findLastIndex: ƒ findLastIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()

al mismo tiempo en que instaciamos una clase
const name = new Persona()
se le heredan los metodos de la clase
y la clase (Persona Class{ }) las hereda de Object en su prototype

Después de haberme pasado los cursos de Front-End developer,El curso basico de java script, java script v8, el curso de ECMAScript +6, el curso de closurers y scope, el curso de asincronismo y las estructuras de datos y mucha practica literalmente me siento así al comprender todo tan fácil y sencillo…

De lo que entendí de la clase, esto es lo que imagino cuando hay que buscar en el prototype ó en el prototype del prototype

Pfff intenso, tuve que ver la clase varias veces para poder entender bien. Excelente explicación

Considero que esta pagina puede ayudar mucho en los temas de js https://javascript.info/

Buena clase!

Esta tambien fue una buena clase…para entenderla mejor lean antes los apuntes de @braco

estoy viendolo por 2da vez y aun se me hace dificil xd a por la tercera

Mucho texto pero bueno, espero que a alguien le ayude

Herencia prototipal

Aquí se entenderá un poco mas que es el prototype, ejemplo

//Creamos una funcion (que al final es un objeto en js)
function Persona() {
  this.name = 'Rogelio';
  this.age = 18;
}

//A la funcion le agregamos un metodo saludar
//Pero se agrega atraves del prototype
//cada instancia tendrá en su prototype el atributo saludar 
Persona.prototype.saludar = function() {
  console.log('Hola mi nombre es ', this.name)
}

const persona = new Persona();
cosole.log(persona) //{name: 'Rogelio', age: 18, __proto__: Object}
cosole.log(persona.__proto__) //{saludar: f(), constructor: f Persona(), __proto__: Object}

Como se ve el atributo saludar no está en primera linea, sino que está dentro del prototype del objeto persona

Ahora como podríamos llamar a la funcion saludar? intuitivamente sería así

persona.saludar() //Hola mi nombre es Rogelio

E impresionantemente esto funciona, pero porque?
ya vimos que el metodo saludar está dentro de la propiedad __proto__
En teoria para poder acceder a el sería

persona.__proto__.saludar()

El hecho de que funcione, a eso se le llama herencia prototipal.
Cuando mandemos llamar una propiedad de un objeto en js
él buscara primero a ver si está en primera linea, si no está buscará en el prototype del objeto
y si ve que no está buscará entinces en el prototype del prototype y asñi susecivamente hasta llegar a Object
el cual su prototype es null, es poreso que podemos llamar la funcion saludar así

persona.saludar()

Ya que al ver que noe stá en primera linea, va y busca dentro del prototype y ahí lo encuentra.

La forma corecta de obtener el prototipo de un objeto es:

const protoPersona = Object.getPrototypeOf(persona)
console.log(protoPersona) //{saludar: f(), constructor: f Persona(), __proto__: Object}

Ya que el atributo __proto__ puede cambiar dependiendo el borwser, node y tal

para mi la parte mas difícil es enlazar esto con la aplicabilidad, me parece muy interesante la clase, siempre que aparecía ese proto no tenia muy claro que era solo imaginaba que era algo que ya JavaScript tenia predeterminado por que no tenia nada que ver con lo que yo escribía en código jeje.

A mi me ayudó mucho este video que complementa mucho lo visto en el curso.
La clave esta en entender que en JS no existen las clases y estas son funciones y a su vez son objetos. Y estos heredan a través de prototipos

Exploto mi cabeza… mucha practica para entenderlo muy bien

La función hasOwnProperty sirve para verificar si una propiedad es parte del objeto o si viene heredada desde su prototype chain.

basado en hechos de Prototype

Seria bueno ver el curso de POO en javascript antes de ver esta clase para no generarnos tantas dudas.

A mi me ayudo bastante.

Saludos.

Herencia prototipal

• JS no tiene clases y utiliza el concepto de prototipos y el encadenamiento de prototipos para la herencia.
• Someobject.prototype es un objeto donde definimos el prototipo de las instancias de someObject.
• Es decir, las instancias de someObject van a heredar de someObject.prototype.
• La instancia de someObject no tiene los métodos heredados, estos están en la propiedad proto de la instancia.
• Cuando se llama a una función o variable que no se encuentra en el mismo objeto que la llamó, se busca en toda la prototype chain hasta encontrarla o regresar undefined. Esto es la herencia prototipal.

function Ninja(name) {
            // const this = Object.create(Ninja.prototype);
            // se realiza de forma automatica con new
            // crea al objero a apartir del prototype del constructor
            this.name = name;

            // return this;
        }
        Ninja.prototype.saludar = function () {
            console.log(`Soy el ninja ${this.name}`);
        }
        const naruto = new Ninja('Naruto');
        // propiedades de la instancia
        console.log('Name ', naruto.name);
        // propiedades de la "clase" // del objeto de donde sale las instancias
        console.log('Saludar ', naruto.saludar);
        // propiedades heredadas desde el Object
        console.log('toString ', naruto.toString);

hasOwnProperty

• La función hasOwnProperty sirve para verificar si una propiedad es parte del objeto o si viene heredada desde su prototype chain.

        // hasOwnProperty (de dónde sale esta función?)
        console.info('naruto.hasOwnProperty("name") ', naruto.hasOwnProperty('name'));
    
        console.info('naruto.hasOwnProperty("saludar") ', naruto.hasOwnProperty('saludar'));

getPrototypeOf()

• El objeto prototype es el usado para construir proto.
• proto es el objeto usado en cadena de búsqueda para resolver métodos.
• La propiedad proto es algo que puede variar, no está especificado en el lenguaje. Es un detalle de implementación puesto por los navegadores, node o cualquier entorno.
• La forma sugerida de acceder al proto de someObject es de la forma: Object.gerProtorypeOf(someObject).

naruto.__proto__
{saludar: ƒ, constructor: ƒ}
Object.getPrototypeOf(naruto)
{saludar: ƒ, constructor: ƒ}
Object.getPrototypeOf(naruto) === Ninja.prototype
true
Ninja.prototype.fight = function(){console.info('RASENGAN!')}
ƒ (){console.info('RASENGAN!')}
naruto.fight()
VM7856:1 RASENGAN!

Object

• Por default los objetos en JavaScript tienen cómo prototipo a Object
• Es el punto de partida de todos los objetos, es el prototipo padre.
• Las funciones también son objeto.
• Object es la raíz de todo, por lo tanto tiene un prototipo padre undefined

excelente

Codigo JS de esta clase:

function Hero(name) {
            // this = Object.create(Hero.prototype); se realiza de forma automatica con new
            this.name = name;
            // return hero;
        }
        Hero.prototype.saludar = function () {
            console.log(`Soy el ninja ${this.name}`);
        }
        const naruto = new Hero('Naruto');
        // propiedades de la instancia
        console.log('Name ', naruto.name);
        // propiedades de la "clase"
        console.log('Saludar ', naruto.saludar);
        // propiedades heredadas
        console.log('toString ', naruto.toString);

        // hasOwnProperty (de dónde sale esta función?)
        console.info('naruto.hasOwnProperty("name") ', naruto.hasOwnProperty('name'));

        console.info('naruto.hasOwnProperty("saludar") ', naruto.hasOwnProperty('saludar'));

…yo luego de esta clase
.

Me siento frustrada porque no le estoy entendiendo nada… 😦

Nanana, no entiendo nada

No les pasa que

Al principio del curso me sentí muy frustrado porque empezaba de una manera muy confusa y debido a eso juzgué mal al profesor, lo culpé y dije que no me parecía bueno. Pues bien, tomé la decisión de retomar el curso, clonar el repositorio del primero commit, partir de ahí y fue LA MEJOR decisión que tomé. ¡¡¡¡¡Este profesor es excelente!!! Estoy maravillado con javascript y es gracias a él ❤️

Profundice en el tema con la ayuda de este video https://www.youtube.com/watch?v=6gmYapa-KBY

Complejo, pero esta ha sido mi clase favorita, al fin lo entiendo!

Compañeros, quiero compartir este concepto y la forma en cómo lo entendí. Si alguien quiere agregar algo o corregirlo es bienvenido:

prototype === __proto__

Estos objetos son iguales, lo que quiere decir que ambos representan lo mismo.

Son iguales porque ambos toman como referencia la herencia de los objetos. Y qué es la herencia?>

La herencia es una metodologia creada en JS para reutilizar código, evitando la creación de código adicional que pueda generar errores y retrase el proceso de la interpretación de JS por V8.

Entonces, proto muestra la herencia de los objetos, en particula del que estémos revisando y muestra las caracteristicas que le hemos anidado o agregado y muestra las que vienen por defecto como “propia propiedad” o ownproperty.

mientras que prototype es la forma que usamos para anidar funciones y objetos a un objeto y poderlos reusar más adelante.

Es por eso que ambos conceptos son iguales en el sentido de contenido pero prototype permite anidar y proto permite leer la herencia.

ultimamente hay class en javascript

class <classname> extends <classpadre>{
	estoEsUnaFuncion(param1, param2){
	
	}
}

y metodos

Este video me ayudó mucho a entender el funcionamiento de prototype

Que tremenda clase, extremadamente compleja, pero bueno, asi es como funciona JS, que esperaban?, jaja, vale la pena dedicarle el tiempo

normalmente me hechaba los cursos en 1.5x o 2x, dependiendo del profesor, es definitivamente tengo que escucharlo con calma

¡Por fin entiendo lo que significa el proto en mis console log!

AAAAAAAAAAAA ENTENDÍ :DDDDDDDDDDDDDD

Espero que ese tema de las referencias a memoria sea explicado mas adelante, por ahora estoy usando lo que se de C, pero me justaría saber las especificaciones del uso en JS

JavaScript no tiene clases, utiliza el concepto de herencia prototipal y el encadenamiento de prototipos para la herencia.

La herencia prototipal nos sirve para poder heredar valores a otros objetos. Todo en JS acaba en en el objeto Object, casi todos los objetos en JS son instancia de Object (incluye a los arrays, strings, etc) Object se sitúa en la cabeza de la cadena de prototipos.

Los objetos en JS poseen un enlace a un objeto prototipo. Cuando intentamos acceder a una propiedad de un prototipo, la propiedad no solo se busca en el propio objeto, igual busca en el prototipo del objeto, en el prototipo del prototipo y así sucesivamente hasta que encuentre la propiedad o alcance el final de la cadena de prototipos.

 function Hero(name) {
        this.name = name;
    }

    Hero.prototype.saludar = function () {
        console.log(`Hola soy ${this.name}.`);
    }
    const zelda = new Hero('Zelda');
    // Propiedades de la instacia
    console.log('Name:', zelda.name);
    // Propiedades de la clase
    console.log('Saludar:',zelda.saludar);
    // Propiedades heredadas ej: toString
    console.log('toString:',zelda.toString);
    // hasOwnProperty (de dónde sale toString o esto?)
    console.log('zelda.hasOwnProperty("name"):',zelda.hasOwnProperty("name"));
    console.log('zelda.hasOwnProperty("saludar"):',zelda.hasOwnProperty("saludar"));
    // inspeccionemos el prototipo del zelda
    console.log(zelda);

¿Por qué hay un prototipo del prototipo, con uno no es suficiente?

Ok, de acuerdo con lo entendido en la clase, mi conclusión es que existen 2 capas del prototipo desde el objeto a alto nivel (En este caso Hero) porque el Object, que es la ultima capa, es el que viene por defecto. Entonces, el prototipo de Hero nos permite heredar a otros objetos, mientras que el Object es que viene por default y por ultimo tenemos el objeto de alto nivel (El Hero).
En conclusión, el objeto de alto nivel o la llamada “Clase” le sirve al lenguaje para poder obtener atributos y métodos. Su prototipo es el encargado de heredar a otras “Clases” y por ultimo el Object (la ultima capa) contiene los métodos y propiedades por defecto que debe contener cada objeto.
Corríjanme si me equivoco

Muy bien explicado un tema super difícil. Excelente profe y excelente curso.

Esta clase es tremendo inception! jajaj, se la rifaron los de JS

Haber leído la documentación de desarrolladores de MDN amplío los conceptos tratados en los dos últimos vídeos.

Prototipos de objetos - Aprende sobre desarrollo web | MDN

Herencia en JavaScript - Aprende sobre desarrollo web | MDN

Lo mejor es aprender este modulo de JS con visualizaciones:

.
Les comparto los siguientes enlaces que me ayudaron a comprender profundamente como funciona la herencia prototipal en JS:

• 🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance
• Prototypes in JavaScript

11. Herencia Prototipal

¿Un lenguaje basado en prototipos?
JavaScript es a menudo descrito como un lenguaje basado en prototipos - para proporcionar mecanismos de herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un objeto plantilla que hereda métodos y propiedades.

Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la cadena de prototipos, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.

Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad prototype, que reside en la función constructora del objeto, no en la instancia misma del objeto.

En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad proto, la cual es derivada de la propiedad prototype sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.

Nota: Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante Object.getPrototypeOf(obj), o a través de la propiedad proto) como el prototipo que contiene el constructor (que se encuentra en la propiedad prototype del constructor) hacen referencia al mismo objeto.

Referencia:

• Object.Prototype en JavaScript

Para entender esto se puede ver lo siguiente herencia prototipal, se tiene una objeto base llamado Person

//clase 10
////////////////////////////////////////////
//          Herencia Prototipal
////////////////////////////////////////////
function Person(name, lastName) {
	/** new tiene un efecto dentro de esta función
	 *  constructora, de manera automática JavaScript hace lo siguiente,
              * cuando usamo el operador new:
	 *     1. se agrega los métodos con this
	 *          this = Object.create(person_d.prototype);
	 *     2. por último retorna el objeto nuevo referenciado con this
	 *          return this;
	 *  todo lo anterior descrito lo hace de manera automática
	 *  con el operdor new
	 * */
	// se agregan los atributos
	this.name = name;
	this.lastName = lastName;
}
// Se añede una función o métoto al _proto_ de Person
Person.prototype.greet = function () {
	console.log(`Hola, soy ${this.name} ${this.lastName}`);
};
// Se instancia un nuevo objeto alex con el operador New
const alex = new Person('Alex', 'Cortez');

Analizando el objeto alex

Si se realiza un console.log se puede apreciar un resultado que se puede explicar

• console.log (alex)

 console.log(alex)

• resultado

Person {name: "Alex", lastName: "Cortez"}
lastName: "Cortez"
name: "Alex"
__proto__:
	greet: ƒ ()
	constructor: ƒ Person(name, lastName)
	__proto__:
		constructor: ƒ Object()
		hasOwnProperty: ƒ hasOwnProperty()
		isPrototypeOf: ƒ isPrototypeOf()
		propertyIsEnumerable: ƒ propertyIsEnumerable()
		toLocaleString: ƒ toLocaleString()
		toString: ƒ toString()
		valueOf: ƒ valueOf()
		__defineGetter__: ƒ __defineGetter__()
		__defineSetter__: ƒ __defineSetter__()
		__lookupGetter__: ƒ __lookupGetter__()
		__lookupSetter__: ƒ __lookupSetter__()
		get __proto__: ƒ __proto__()
		set __proto__: ƒ __proto__()

Aquí se puede ver lo siguiente:

1. El primer bloque se ve que el “objeto alex” hereda el campo/valor del “objeto Person”, es decir hereda

Person {name: "Alex", lastName: "Cortez"}
lastName: "Cortez"
name: "Alex"

1. El segundo bloque que muestra el “objeto alex”, que lleva por título __proto__, hace referencia a las funciones que el objeto alex tiene y lo hereda de “Person.prototype”,
   “función greet()” y la “función constructor”

__proto__:
	greet: ƒ ()
	constructor: ƒ Person(name, lastName)

1. El segundo bloque que muestra el “objeto alex”, que lleva por título __proto__, hace referencia a las funciones que tiene el “objeto alex” y provienen o hereda “Person.prototype”, pero aquí vale la pena recalcar lo siguiente. Estos métodos Originalmente los heredó “Person.prototype” y es por esto que los método los heredó el “objeto alex”

	__proto__:
		constructor: ƒ Object()
		hasOwnProperty: ƒ hasOwnProperty()
		isPrototypeOf: ƒ isPrototypeOf()
		propertyIsEnumerable: ƒ propertyIsEnumerable()
		toLocaleString: ƒ toLocaleString()
		toString: ƒ toString()
		valueOf: ƒ valueOf()
		__defineGetter__: ƒ __defineGetter__()
		__defineSetter__: ƒ __defineSetter__()
		__lookupGetter__: ƒ __lookupGetter__()
		__lookupSetter__: ƒ __lookupSetter__()
		get __proto__: ƒ __proto__()
		set __proto__: ƒ __proto__()

Herencia Prototipal explicado al 100%!

Solo diré que mi cabeza acaba de estallar

primero se checa si la funcion tiene ese método en su cuerpo principal, si no, se checa tiene ha prestado ese método de otra función (se checa en su prototype), si tampoco lo tiene prestado entonces se checa si lo tiene en su propio adn (prototype del prototype)

excelente!

Con prototype vemos que todas las instancias del objeto reciben estos metodos pero no las reciben directamente. Al inpseccionar vemos de forma escondida el objeto proto donde ahi vemos que se encuentra nuestro metodo. Esta es la Herencia prototipal. Que aunque parezca confuso es de las mejores cosas de JS. Mientras mas avanzando y veremosq que TODO EN JS acaba en el OBJETO OBJETO.

Inspeccionando podemos ver que zelda recibe los atributos que se marcan como si fueran de ella. Pero esta recibe metodos que NOSOTROS NUNCA DECLARAMOS PERO SON LOS METODOS DEL OBJECT. Si inspeccionamos nuestros objetos instanciados podemos ver el objeto PROTO donde estan los valores que le heredamos com Hero.Prototype PERO DENTRO DE PROTO HAY OTRO que es del objeto OBJECT donde vendran todos los valores que recibimos de este.

La forma correcta de inpsreccionar ese elemento PROTO es con el metodo:

Object.getPrototypeOf(elemento);

Si nosotros agregamos mas elementos a nuestro Hero.Prototype este se agregara de forma automatica a nuestro objeto instanciado YA QUE si usamos el getPrototypeOf y lo comparamos con el Hero.Prototype podemos ver que son el mismo. No copias, ES EL MISMO.

Para saber si un metodo esta dentro de un objeto podemos usar:

Objeto.hasOwnProperty('metodo');

Si lo que buscamos no esta en OBJECT es porque no existe.

Increíble…

Object es el “Bing Bang”

que listo que sos goku!!!

Esta en el prototype del prototype??? Chido!