A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Herencia Prototipal

11/42
Recursos

Por default los objetos en JavaScript tienen c贸mo prototipo a Object que es el punto de partida de todos los objetos, es el prototipo padre. Object es la ra铆z de todo, por lo tanto tiene un prototipo padre undefined.

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.

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

Aportes 164

Preguntas 14

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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鈥檚 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贸!

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 鈥淐lase鈥 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 鈥渮elda.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 鈥渃lases 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)

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: 鈥淛am谩s le pongas atenci贸n al proto

Richard Kaufman en el curso profesional de JS: 鈥溌縔 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 鈥渃lass鈥 que se realiz贸 en EcmaScript 6 simplemente fue lo que se conoce como 鈥渟yntactical sugar鈥 en desarrollo de software. Realmente las clases en JavaScript siguen siendo prototipos que 鈥渇acilitan鈥 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鈥ara 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
gran clase de Richard!!! imposible para mi entenderlo sin ver varias veces el video, pausar, reflexionar y tomar notas. Esta genial ver esto con tanto nivel de detalle.

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'));

鈥o 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 鈥減ropia 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 鈥淐lase鈥 le sirve al lenguaje para poder obtener atributos y m茅todos. Su prototipo es el encargado de heredar a otras 鈥淐lases鈥 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:

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:

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 鈥渙bjeto alex鈥 hereda el campo/valor del 鈥渙bjeto Person鈥, es decir hereda
Person {name: "Alex", lastName: "Cortez"}
lastName: "Cortez"
name: "Alex"
  1. El segundo bloque que muestra el 鈥渙bjeto alex鈥, que lleva por t铆tulo __proto__, hace referencia a las funciones que el objeto alex tiene y lo hereda de 鈥淧erson.prototype鈥,
    鈥渇unci贸n greet()鈥 y la 鈥渇unci贸n constructor鈥
__proto__:
	greet: 茠 ()
	constructor: 茠 Person(name, lastName)
  1. El segundo bloque que muestra el 鈥渙bjeto alex鈥, que lleva por t铆tulo __proto__, hace referencia a las funciones que tiene el 鈥渙bjeto alex鈥 y provienen o hereda 鈥淧erson.prototype鈥, pero aqu铆 vale la pena recalcar lo siguiente. Estos m茅todos Originalmente los hered贸 鈥淧erson.prototype鈥 y es por esto que los m茅todo los hered贸 el 鈥渙bjeto 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 鈥淏ing Bang鈥

que listo que sos goku!!!

Esta en el prototype del prototype??? Chido!