Prototype

Apuntes de la clase 😄

¿Quién necesita drogas cuando te puedes aventar este tipo de viajes mentales?

Después de un largo camino de comprensión, dejo mi aporte para esta clase. Por si alguien tiene dudas

<script>
        // Crear un objeto común y corriente
        const goku = {
            nombre: 'Son Goku'
        }
        goku.saludar = function() {
            console.log(`Hola soy ${this.nombre}`)
        }
        goku.saludar()

        // ---

        const vegeta = {
            nombre: 'Vegeta'
        }
        vegeta.saludar = function() {
            console.log(`Hola soy ${this.nombre}`)
        }
        vegeta.saludar()

        // --

        const radix = {
            nombre: 'Radix',
            objetivo: 'Planeta Tierra'
        }
        radix.saludar = function() {
            console.log(`Hola soy ${this.nombre}`)
        }
        radix.destruir = function() {
            console.log(`El objetivo de ${this.nombre} es destruir el ${this.objetivo}`)
        }
        radix.saludar()
        radix.destruir()

        // Explicación: 
        // Si queremos crear otro personaje similar, tenemos que repetir el proceso, esto es tedioso e ineficiente. La única ventaja es que cada objeto al ser independiente, puede tener diferente estado y comportamiento








        // Aplicar eficiencia al declarar una función que construya el objeto y lo retorne para poder invocarlo
        function Personajes(nombre_personaje) {
            const guerrero = {
                nombre: nombre_personaje
            }

            guerrero.saludar = function() {
                console.log(`Hola mi nombre es ${this.nombre}`)
            }

            return guerrero
        }

        const kakaroto = Personajes('Kakaroto')
        const veyita = Personajes('Veyita')
        const napa = Personajes('Napa')

        kakaroto.saludar()
        veyita.saludar()
        napa.saludar()

        // Explicación
        // Ahora todos nuestros objetos construidos al invocar la función tienen el mismo comportamiento. Sin embargo, la función asignada al método saludar es creada por cada Personaje instanciado






        // Evitar crear la función(es) cada vez que se instancia un objeto. 
        const MethodsCollection = {
            saludar: function() {
                console.log(`Paisano soy ${this.nombre}`)
            }
        }

        function Characters(nombre_personaje) {
            const guerrero = {
                nombre: nombre_personaje
            }
            // Punto clave
            guerrero.saludar = MethodsCollection.saludar

            return guerrero
        }
        
        const ranma = Characters('Ranma')
        const kuno = Characters('Kuno Tatehuaki')
        const rioga = Characters('Rioga')

        ranma.saludar()
        kuno.saludar()
        rioga.saludar()

        // Explicación
        // Al guardar la referencia a la función y posteriormente asociarla en alguno de los metodos de nuestro objeto, nos trae mucha eficiencia de cómputo. Puesto que no se crea la función por cada instancia (caso anterior), sino que se hace referencia a la misma localización de memoria










        // Object.create( )
        // Esta función lo que hace es recibir un objeto como parámetro y retorna un nuevo objeto con las caracteristicas del anterior. 

        // Es importante destacar que el objeto devuelto esta vacío {}, sin embargo las caracteristicas heredadas se encuentran contenidas en la propiedad __proto__ (es decir se tiene acceso a ellas por herencia prototipal)
        
        // Esto se hace para generar copias de un objeto y posteriormente extenderlas con otras caracteristicas
        function Hero(nombre, categoria) {
            const luchador = Object.create(MethodsCollection)
            
            luchador.nombre = nombre

            luchador.categoria = categoria

            luchador.ki = function() {
                console.log(`Nivel de Ki aceptado en la categoría ${this.categoria}`)
            }

            return luchador
        }

        const parka = Hero('La Parka', 'AAA')
        const octagon = Hero('Sr. Octagón', 'AAA')
        const mascarita = Hero('Mascarita Sagrada Jr.', 'Asenso')

        parka.saludar()
        octagon.saludar()
        mascarita.saludar()

        parka.ki()
        octagon.ki()
        mascarita.ki()


        // Explicación
        // Creamos una copia del objeto que contiene todos los metodos (funciones) y posteriormente lo extendemos con algunas propiedades. Finalmente lo retornamos para poder interactuar con el objeto desde el exterior










        // Prototype:  
        // Los metodos del objeto dentro del prototipo (__proto__) del objeto Prototipal
        function Deportista(nombre, tecnica) {
            // 2. Creamos un objeto vacío, que internamente en su prototipo tiene declarada la función saludar (heredada)
            const atleta = Object.create(Deportista.prototype)
            // 3. Extendemos ese objeto
            atleta.nombre = nombre
            atleta.tecnica = tecnica
            
            return atleta
        }

        // 1. Punto clave (añadir metodos al prototipo del objeto)
        Deportista.prototype.saludar = function() {
            console.log(`Mi nombre es ${this.nombre} y soy un deportista`)
        }

        Deportista.prototype.mostrarTecnica = function() {
            console.log(`${this.nombre} tiene técnica de ${this.tecnica}`)
        }

        const oliver = Deportista('Oliver Atom', 'Tiro con chanfle')
        const tom = Deportista('Tom Izagui', 'Tiro de Escuadra')

        oliver.saludar()
        tom.saludar()
        oliver.mostrarTecnica()
        tom.mostrarTecnica()






        // new es un atajo (azúcar sintáctica) al caso anterior
        // Su función es llevar Object.prototype al objeto de forma implícita, es decir, no tenemos que usar Object.create() ni return del objeto
        function Pokemon(nombre, habilidad) {
            // 1. No hay necesidad de hacer Object.create (ya que por defecto el objeto es this)
            // 2. Se emplea el objeto this para añadir propiedades
            this.nombre = nombre
            this.habilidad = habilidad
            // 3. No hay necesidad de retornar el objeto this
        }

        // IMPORTANTE: Los prototipos se escriben sin arrow function, ya que el hacerlo cambiariamos por completo el contexto de this, ahora sería window
        Pokemon.prototype.saludar = function() {
            console.log(`Taraamm, mi nombre es ${this.nombre}`)
        }

        Pokemon.prototype.mostrarHabilidad = function() {
            console.log(`${this.nombre} tiene la habilidad de ${this.habilidad}`)
        }

        // 4. La palabra clave new, pasa implicitamente el Pokemon.create(Pokemon.prototype) dentro del objeto prototipal. También retorna implicitamente el obejeto this
        const pikachu = new Pokemon('Pikachú', 'Rayos y Centellas')
        const melindron = new Pokemon('Mélindron', 'Genear Polvo')

        pikachu.saludar()
        melindron.saludar()
        pikachu.mostrarHabilidad()
        melindron.mostrarHabilidad()





        // La keyword new crea un nuevo objeto que “hereda” todas las propiedades del prototype de otro objeto. No confundir prototype con __proto__, este último es sólo una propiedad en cada instancía que apunta al prototipo del que hereda.




        // Como se puede observar, podemos hacer lo mismo sin hacer uso del keyword 'new', sin embargo este nos facilita muchas cosas. 
        
        // Tambien existen otros keywords como 'class' que nos ayudan a ahorrar muchas lineas de código y que éste tenga una sintaxis clara. Sin embargo, no hay que perder de vista que solo es un wrapper a los prototype...

        // Esta es la evolución de JS


    </script>

En el curso de fundamentos de JS.
Explican la nueva forma de trabajar con clases, les dejo un ejemplo.

class Hero {
    constructor(name) {
        this.name = name
    }
   
    saludar = () => console.log(`Hola soy ${this.name}`);
}

const zelda = {
    name: "Zelda"
}

const hero = new Hero(zelda.name)
hero.saludar()

Prototype

‌

Este es uno de los temas más tedioso de JavaScript, se aleja totalmente a cómo se manejan las clases y objetos en otros lenguajes de programación. Las clases son como un plano, se crean y se llaman, si se quiere crear otra clase, se hace y luego se instancia, así funcionaría en otros lenguajes de programación, pero en JavaScript todo es un objeto.

‌

¿Cómo logramos las clases si todo es un objeto?

‌

Esta pregunta es interesante, se supone que para crear una clase e instanciarla tiene que ser por un objeto, pero JavaScript no cuenta con clases.

‌

Para entender todo este tema lo vamos a hacer partiendo de un objeto pequeño hasta llegar a lo más tedioso de las herencias en JavaScript. Crearemos un archivo para empezar a testear en nuestra carpeta de ejercicios.

‌

Objeto común y corriente

‌

Vamos a crear un objeto que será un super héroe.

const heroe = {
        name: "Super-Man"
      };
      heroe.saludar = function() {
        console.log(`Hola a todos, soy ${this.name}`);
      };
      heroe.saludar();

‌

Si queremos crear otro objeto similar como un bat-man tenemos que repetir el proceso.

const bat = {
        name: "Bat-Man"
      };
      bat.saludar = function() {
        console.log(`Hola a todos, soy ${this.name}`); 
      };
      bat.saludar();  

‌

Esto es muy tedioso, nadie quiere estar escribiendo lo mismo a cada rato, es ineficiente.

‌

Más eficiente

‌

Podemos crear una función que nos construya estos objetos que llamamos dos veces, así ahorrar tiempo y código.

function Hero(params) {
        const hero = {
          name: params
        };
        hero.saludar = function() {
          console.log(`Hola a todos, soy ${this.name}`);
        };
        return hero;
      }
      const heroe = Hero("Super-Man");
      heroe.saludar();
      const bat = Hero("Bat-man");
      bat.saludar();

‌

Ahora simplemente podemos ahorrarnos el estar creando una función por cada heroe, pero resulta que dentro de la función está otra que se llama saludar(), esta sí se llama por cada héroe que instanciamos de la función Hero(). Podemos crear un objeto aparte que tenga todas las funciones y que la función Hero haga referencia a ese nuevo objeto.

Const heroMethods = {
        saludar: function() {
          console.log(`Hola a todos, soy ${this.name}`);
        }
      };
      function Hero(params) {
        const hero = {
          name: params
        };
        hero.saludar = heroMethods.saludar;
        return hero;
      }

‌

Esto nos trae mucha eficiencia de computo. No estaremos creando a cada rato la misma función sino que haremos referencia al mismo lugar de memoria.

‌

Existe una mejor forma de hacer todo esto, por esto te presento a: Object.create.

‌

Object.create

‌

Esta es una función que recibe un objeto como parámetro y devuelve uno nuevo.

const newObject = Object.create(heroMethods);

‌

Podemos usarlo para traer los métodos de heroMethods de forma más sencilla.

function Hero(params) {
        const hero = Object.create(heroMethods);
        return hero;
      }

‌

Y establecemos a name en la función Hero para recuperarlo, ya que no forma parte de hero.

function Hero(params) {
        const hero = Object.create(heroMethods);
        hero.name = params;
        return hero;
      }

‌

Entendamos a object.create

‌

Para entenderlo del todo vamos a la consola y usaremos las variables globales que tenemos definidas.

‌

En la consola si ponemos heroMethods nos arrojará nuestra función saludar.

    > heroMethods    
    < {saludar: ƒ}

‌

Ahora si creamos una constante y hacemos referencia a este objeto con objetct.create pasa algo interesante.

   > const newHero = Object.create(heroMethods)
   < undefined
   > newHero
   < {}

‌

Nos arroja un objeto vacío, pero si escribimos newHero.saludar la función sí existe.

   > newHero.saludar
   < ƒ () {
             console.log(`Hola a todos, soy ${this.name}`);
           }

‌

¿Entonces por qué nos da un objeto vacío? Si abrimos este objeto veremos una propiedad que se llama __proto__.

   > newHer
   < {}
       __proto__: 
           saludar: ƒ ()

‌

Podemos ver que cuenta con esta propiedad y en ella se encuentra nuestra función saludar. A esto se le llama herencia prototipal.

‌

Prototype

‌

El mejor lugar para colocar nuestros métodos es dentro de la función Hero. Para esto pondremos nuestros métodos en el proto de hero. Para lograr esto lo tenemos que hacer con prototype.

Hero.prototype.saludar = function() {
        console.log(`Hola a todos, soy ${this.name}`);
      };

‌

Y ahora llamaremos a este método que está en el proto con Object.create.

function Hero(params) {
        const hero = Object.create(Hero.prototype);
        hero.name = params;
        return hero;
      }

Hero.prototype.saludar = function() {
        console.log(`Hola a todos, soy ${this.name}`);
      };

‌

New

‌

Esta palabra es azúcar sintáctico, ya no tendremos que usar Object.create ni retornar la función Hero para que nuestro mensaje aparezca en consola. Al usar New automáticamente nuestra función Hero usa el portotype como this, ya no tendremos que llamar a Hero.prototype con Object.create para contar con la función saludar. Las partes que no necesitaremos las comentaré.

function Hero(params) {
        //const hero = Object.create(Hero.prototype);
        //hero.name = params;
        this.name = params;
        //return hero;
      }

      Hero.prototype.saludar = function() {
        console.log(`Hola a todos, soy ${this.name}`);
      };

      const heroe = new Hero("Super-Man");
      heroe.saludar();
      const bat = new Hero("Bat-man");
      bat.saludar();

‌

Al final podemos hacer lo mismo sin el keyword new pero usándolo nos facilitará muchas cosas. También existen otros keywords como class que nos ayudará mucho a ahorrar líneas de código.

prototype: son lo que permite que se puedan instanciar el objeto.
Js solo tiene objetos, y entre lo raro que sea esto, nos ofrece azúcar sintáctica que nos permite escribir más rápido.

Recuerda que js, no tiene clases.
que prototype != proto.

madre mia ser profesional en js va costar jeje

En Javascript todo son objetos, no tenemos clases, no tenemos ese plano para crear objetos.
Todos los objetos “heredan” de un prototipo que a su vez hereda de otro prototipo y así sucesivamente creando lo que se llama la prototype chain.

La keyword new crea un nuevo objeto que “hereda” todas las propiedades del prototype de otro objeto. No confundir prototype con proto que es sólo una propiedad en cada instancía que apunta al prototipo del que hereda.

Los objetos tienen por defecto un prototipo que hereda de la clase Object y al prototipo se le pueden agregar métodos que son accesibles desde el this.

Herencia prototipal

Cuando se accede a un método o atributo de un objeto, éste va a buscar en el prototipo de este objeto si existe, en caso de no existir, va a buscar en el prototipo padre, yen caso de no existir va a buscar en su Objeto padre, así hasta llegar al objeto padre, si no lo encuentra, ahí ya va a mandar error

Object.create
Esta función lo que hace es recibir un objeto como parámetro y retorna un nuevo objeto con las características del pasadas como parámetro.
const link = Object.create(MethodsCollection)
También se puede pasar como parámetro el prototipo, lo que hace es asignarle el prototipo del objeto y heredar todas sus propiedades.
const zelda = Object.create(sueprheroe.protoype)

new

Una forma de ahorrarnos código es usando la función new, new lo que hace es pasarle el prototipo del constructor de la clase que estamos creando, por eso se puede hacer lo siguiente

Function Hero (name){
    This.name=name;
}

Hero.prototype.saludar = function() {
    Console.log(`Hola ${this.name}`);
};

const link = new Hero(‘Link’);
 

Recordar que el new es solo azúcar sintáctica.

Intente una vez entender prototype pero no pude y decidi olvidarlo. Con esta clase y los ejemplos quedo mas que claro.Gracias Richard, excelente profesor 👍.

Este super articulo en GitHub (premiado) tiene muchos recursos para aprender 33 conceptos que como desarrolladores JS deberíamos dominar, chéquenlo!

33 Concepts Every JavaScript Developer Should Know

No manches aunque explicó muy bien siento que no entendi !

Estoy sin palabras, tengo ganas de llorar literal, pero de la emoción, 3 años trabajando con js y recién me enteró de como es que funciona realmente, estoy flipando!!! EXCELENTE, EXCELENTE!

Eres un master!! Sirve muchisimo entender la evolución del lenguaje JS y como se comporta actualmente 💙

• En Javascript no tenemos Clases como en la mayoría de los lenguajes de programación.

• Las keyword: **new ** y class son azúcar sintáctica que nos permiten escribir mas rápidamente.

• Usando new Podemos transformar esto:

function Auto(name) {
	auto.methods = Object.create(Auto.prototype);
	auto.name = name;
	return auto;
}

Auto.prototype.run = function() {
	console.log(`El auto ${this.name} esta corriendo`);
}

const bumblebee = Auto('camaro')
bumblebee.run()

• a esto:

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

Auto.prototype.run = function() {
	console.log(`El auto ${this.name} esta corriendo`);
}

const bumblebee = new Auto('camaro')
bumblebee.run()

Este curso me está volando la cabeza

Les doy un tip, he visto todo el curso hasta aquí en 1.25x y ni siquiera lo he notado.

Si ya tienes bases de javascript sólidas, incluso podrías llegar a verlo en 1.5x o 1.75x.

El código que teníamos hasta el minuto 3:50 era un clousure no? Una función con una función dentro con la variable privada asignada (hero) y que cuando ejecutamos saludar recuerda esta variable.

Corrijanme si me equivoco, intento repasar los conocimientos de clases anteriores 😃

Ahora que entendí esto se acabo la magia de new.

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

      Hero.prototype.saludar = function(){
        console.log(`New hero: ${this.name}`)
      }

     const centella = new Hero('Centella');
     centella.saludar();

      const iron = new Hero('Iron Man');
      iron.saludar();

Desearía que todas las clases fueran así de simples de entender, desde el ejemplo más simple hasta el mejor!

Me gustó mucho esta clase, es decir, no tenia ni diea de que New era azucar sintactica, este tipo de clases ayuda a “lo que no sabemos que no sabemos”

Me gusto mucho esta clase, sobre todo entender que los nuevos feature del lenguaje, son solo azucar sintáctica, ya que nativamente el proceso sigue siendo el mismo.

You Don’t Know JS Yet: this & Object Prototypes

Wow! How many things I do without knowing! 😃

class Hero{
    constructor(name){
        this.name = name;
    }
    saludar(){
        console.log(`Hola soy ${this.name} y soy un superheroe!!`);
    }
}

const zelda = new Hero('Zelda');
zelda.saludar();

const link = new Hero('Link');
link.saludar();```

Nos estan enseñando desde como funcionan los prototipos. Pero ¿Es recomendable usarlos o simplemente es mejor usar la forma bonita de usar los prototipos? Las clases. Creo que solo lo incluyen para que tengamos conocimientos de estos pero, como principiante, no se si usarlos o usar clases

guaaauuuu clarisimo y te parte el craneo xD.

literal esta clase me volo la cabeza.

Super bien explicado! Es como tener muchas revelaciones de algo que creias conocer. Excelente curso hasta el momento!

Ya es mi profesor favorito con lo de Zelda y Link jaja 😅

excelente clase de esas cosas que jamas aprendes en la universidad

Nota: cuando se crea un método con prototype para que funcione correctamente se debe crear utilizando function(){} y no arrow function () =>{}

Por si no les quedo claro en este video hay una explicacion muchisimo mas clara de los prototipos. El profe deberia mirarlo tambien para mejorar la explicacion.

https://www.youtube.com/watch?v=UsQJ2DBjEGs

Me siento como si hubiera pasado por una Time Machine de estándares de ES

Siento que me comí tremenda explicación para entender cómo funciona el lenguaje. Me recuerdan las clases de física en que el profesor demostraba las formulas.

¡Es demasiado cool entender cómo funciona todo lo que usas comúnmente! 🤘

Gran clase. Tremenda explicación para entender estos conceptos

Lisp y Lua son otros lenguajes con herencia por prototipado, y también lo pueden soportar Python, Perl (con el módulo Class::Prototyped) y R (con el paquete proto)

Genial entender como funcionan las cosas que usamos todos los días! 😄

¡Excelente clase!

Wau… que buena clase

🤯🤯🤯🤯

Clase fundamental!!! Gracias Rick, por explicar tan bien el comportamiento del lenguaje!!

Que bien es poder entender desde la base como funciona el lenguaje, gracias Richard por tan excelente explicación, realmente nos llevas a conocer y entender como profesionales este lenguaje.

Excelente, que nos han ensenado todo esto. y pienso que es muy importante saberlo para un mejor dominio del lenguaje. aunque actualmente se se usa mas sintactic sugar hasta llegar a las classes.

Que buena clase!

Excelente clase.

PROTOTYPE ES COMO UNA CLASS PERO SE DEFINE DE OTRA FORMA

Class Auto() {
constructor(marca,año,precio){
this.marca= marca;
this.año = año;
this.precio = precio
}

publicar{
console.log(este ${this.marca} del ${this.año} cuesta unos $ ${this.precio} USS);
}
}

CONST audi = new Auto(“audi”, 2010, “25.000”);

audi.saludar();

ES LO MISMO QUE HACERLO CON PROTOTYPE-------------------------------------

function Automovil{
this.marca = marca;
this.precio = precio;
this.año = año;
}

Auto.prototype.publicar= function(){
console.log(este ${this.marca} del ${this.año} cuesta unos $ ${this.precio} USS);
}

const audi = new Automovil(“BMW”, 2015, “40.000”);
audi.saludar();

Wao me quito el sombrero con este profesor, lo explica muy bien y domina bastante el lenguaje, hace la clase bastante interesante y dinámica, estoy aprendiendo mucho y disfrutando al mismo tiempo, primer curso que no me aburro, no adelanto o no tengo que aumentar la velocidad, incluso hasta estoy poniendo pausas para no perder el ritmo. Muchas ganas de seguir viendo lo que sigue.

Queeeeeeeeeeeeeeeeeeeeeeee paja!!!

🤯

Pensar que casi me salto este curso tan maravilloso!

jajajajaja explote la cabeza 🤯🤯🤯🤯

Genial! No sabía lo de que new era suggar syntax, me gustó aprender como es la forma en la que el lenguaje se comporta

Hoy en día sería mejor usar una clase, como esta:

<class Hero {
  constructor(nombre) {
    this.name = nombre
  }
  saludar() {
    console.log(`Hola soy ${this.name}`)
  }
}

const ironMan = new Hero ('Iron Man')
ironMan.saludar()

const batman = new Hero ('Batman')
batman.saludar()> 

definitivamente, repetir el curso no ha sido mala decicion

Acá un video mas simple para completar lo aprendido.
https://www.youtube.com/watch?v=6gmYapa-KBY

Este es un tema complejo de como funciona JS internamente, lo mejor es aprenderlo con visualizaciones:

.
Por lo que les comparto los siguientes enlaces que me ayudaron a comprender a profundidad este tema:

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

Código HTML base de la clase:

<html>
    <head>
        <title>Prototype</title>
    </head>
    <body>
        <a href="./index.html">Go back</a>
        <p><em>Abre la consola</em></p>


    
    </body>
    <script>
        // Un objeto comun y corriente
        // Otro objeto más
        // Seamos un poco más eficientes
        // Aun podemos mejorar mas y evitar tener que crear la misma funcion 
        // Object.create
        // Los metodods de hero dentro Hero
        // new es un atajo (azucar sintactica) para llevar el Hero.prototype al objeto


    </script>
</html>

Esta clase me pareció excelente, el nivel de explicación de “¿por qué?” ocurre lo que ocurre, o se codea lo que se codea fue genial, gracias al profe y al equipo de Platzi. Altas ganas de aprender! Una de las clases que mas me hype me dió!

Uff tremendo, que complejo explicar eso, creo que el profesor hizo un gran trabajo simplificándolo y aun asi lo tuve que ver varias veces

La clase mas hermosa que he visto ❤️

Pienso que el curso es bueno pero el orden definido de las clases no es el mejor

primera clase que no puedo criticar…espero q las proximas sean iguales o mejores.

1.- La keyword new crea un nuevo objeto que “hereda” todas las propiedades del prototype de otro objeto.
2.- La keyword new es azúcar sintáctica

Recogiendo los pedazos mi cerebro y creando un new Brain(); 😃

Prototype es un concepto muy difícil casi exclusivo de JavaScript con el que se manejan las clases y los objetos. En otros lenguajes podemos crear clases, crear objetos a partir de ellas, heredar de otras clases, etc. Pero en JS esto se dificulta porque todos son objetos. Entonces, ¿Cómo se logra la herencia e instanciar objetos a partir de uno original?

Con Object.create podemos darle todos los métodos de un objeto a otro a través de la herencia prototipal.

Todas las funciones tiene un prototype, que inicialmente es un objeto vacío al que le podemos añadir propiedades

New es un atajo que sirve para hacer el object crea de forma más fácil.

Fuah, es re loco como a medida que vas avanzando le vas encontrando el sentido a esas cosas del lenguaje que no entendes del todo (yo no entendia la ambiguedad de new en ciertos momentos, donde usar y no usar new no mostraba diferencia aparente. Ahora veo que si hay diferencia y mucha si lo haces así nomás, sin cambiar la estructura de la clase

Este curso se está poniendo bueno =)

El keyword “new” es azúcar sintáctica, lo que hace es que dentro de nuestra función constructora asigna el this con: this = Object.create(functionName.propotype) y retorna por defecto el objeto creado, permitiendo que nuestra función constructora sea mas fácil de leer

Muy buena clase, con los ejemplos claro. Es muy bueno entender como funciona el lenguaje.

wow que buenos conceptos

O: Que clase…

En Javascript todo son objetos, no tenemos clases, no tenemos ese plano para crear objetos.

Todos los objetos “heredan” de un prototipo que a su vez hereda de otro prototipo y así sucesivamente creando lo que se llama la prototype chain.

Geniaaal

esta clase esta genial me gusta hacer todo de manera nativa, estoy reforzando muchas cosas que daba por hecho aaa que emocion

cuando uno crea una clase con class esta haciendo lo mismo (?)

Muy buena clase!

Tengo entendido que practicamente Prototype es lo mas sercano a POO

Impresionante!

estas clases de teoria me han sacado de muchas dudas, una de ellas la keyword “new” , que lo habia visto en clases y cursos anteriores, pero no sabia el porque, pero cada vez queda mas claro.

<script>
        /* objeto común y corriente */
        /* -------> 1. estamos siendo ineficientes, creando la misma función
        prácticamente*/
        /* const zelda = {
            name: 'Zelda',
        }
        zelda.saludar = function () {
            console.log(`Hola soy ${this.name}`)
        }

        zelda.saludar()

        const link = {
            name: 'Link',
        }

        link.saludar = function () {
            console.log(`hola soy ${this.name}`)
        } */

        /* -------> 2. seamos eficientes 
        Aquí construimos el método que van a utilizar*/
        const heroMethods = {
            saludar: function() {
                console.log(`Personaje ${this.name}`)
            },
        }

        /* function MyHero(name) {
            const myHero = {
                name: name,
            }

            myHero.saludar = heroMethods.saludar
           return myHero
        }

        const falcon = MyHero('falcon')
        falcon.saludar()

        const mario = MyHero('Mario')

        mario.saludar() */

        /* -------> 3. Object.create */
        /* function Hero2(name) {
            const myHero2 = Object.create(heroMethods)
            myHero2.name = name
            return myHero2
        }

        const falcon = Hero2('Captain')
        
        falcon.saludar() */

        /* -------> 4. new 'azúcar sintáctica' */
        function Hero(name) {
        const hero = Object.create(Hero.prototype);
        hero.name = name;

       return hero;
       }

       Hero.prototype.saludar = function() {
      console.log(`Soy superheroina! ${this.name}`);
      };

      const zelda = Hero('Zelda');
      zelda.saludar();

      const link = Hero('Link');
      link.saludar();
      /* 4.1 */
      function Hero(name) {
        // this = Object.create(Hero.prototype);
        this.name = name;
        // return this;
      }

      Hero.prototype.saludar = function() {
        console.log(`New: ${this.name}`);
      };

      const zelda = new Hero('Zelda');
      zelda.saludar();

      const link = new Hero('Link');
      link.saludar();
    </script>

MY NOTES PROTOTYPE

// Un objeto común y corriente 
  /*
  const zelda = {

    name: "zelda"
  }

  zelda.saludar = function(){
    console.log(`Hola soy ${this.name}`);
  }

  zelda.saludar();


  const link = {

    name: "Link"
  }

  link.saludar = function(){
    console.log(`Hola soy ${this.name}`);
  }

  link.saludar(); */

  //Refactorizando el codigo para que sea mas eficiente

  /*
  function Hero(name){

    const hero = {

      name:name

    }

    hero.saludar = function(){
      console.log(`Hola soy ${this.name}`);
    }

    return hero
  }

  //Instanciamos la funcion hero en una variable
  const zelda = Hero('Zelda');
  //Utilizamos la instancia junto con la funcion saludar que establecimos en la funcion

  zelda.saludar();

  const link = Hero('Link');

  link.saludar();
  */

  //Aun podemos mejorar mas y evitar tener crear la misma función cada vez
 /*
  const heroMethods = {

    saludar: function(){
      console.log(`Me llamo ${this.name}`);
    },


  }
  function Hero(name){

    const hero = {

      name:name,

    }

    hero.saludar = heroMethods.saludar;
    return hero
  }

  //Instanciamos la funcion hero en una variable
  const zelda = Hero('Zelda');
  //Utilizamos la instancia junto con la funcion saludar que establecimos en la funcion

  zelda.saludar();

  const link = Hero('Link');

  link.saludar(); */


  // Metodo object.create que mejorara aun mas nuestro desarrollo
   //recibira un objeto como parametro lo que hara es crear un nuevo objeto
    //const nuevoObjeto = Object.create(objeto)

  /*
  const heroMethods = {

    saludar: function(){
      console.log(`Soy super heroe ${this.name}`);
    },


  }
  function Hero(name){

    const hero = Object.create(heroMethods)
    hero.name = name
    return hero
  }

  const zelda = Hero('Zelda');

  zelda.saludar();

  const link = Hero('Link');

  link.saludar();

  //Creamos una instancia de mi heroe creando un nuevo objeto al cual
   //le pasamos por argumento heroMethod que es un objeto el cual ya teniamos definido
    //El cual tiene la funcion saludar 
  const newHero = Object.create(heroMethods);

  newHero.saludar; */


  //Los metodos de hero dentro de Hero

  /* const heroMethods = {

    saludar: function(){
      console.log(`Soy super heroe ${this.name}`);
    },


  } */



  /*
  function Hero(name){

    const hero = Object.create(Hero.prototype)
    hero.name = name
    return hero
  }

  //para agregar el metodo que teniamos establecido por fuera de 
   //nuestra funcion ahora lo pondremos dentro de ella con un objeto
     //El cual cuentan todas las funciones y es prototype
      //Inicialmente prototype es un objeto vacio :)
  Hero.prototype.saludar= function(){
    console.log(`Soy super heroeina! ${this.name}`);
  };


  const zelda = Hero('Zelda');

  zelda.saludar();

  const link = Hero('Link');

  link.saludar();  */

  
  //new es un atajo (azucar sintactica) para llevar Hero.prototype al objeto

  function Hero(name){

    //El atajo que hace new es crear nuestros prototipos automaticamente
      //const hero = Object.create(Hero.prototype)
        //La regla es que siempre lo va a sacar del prototype de lo 
          //que sea el constructor
           //Si despues de new esta nuestra funcion lo que sucedera es el 
             //prototipo que le establecimos
    //Esto en ves de guardarlo en hero como lo haciamos anteriormente
      //Lo guardara en this

    this.name = name
    //return this  es algo que ocurre implicitamente no hay que hacerlo
  }

  Hero.prototype.saludar= function(){
    console.log(`Soy super heroeina! ${this.name}`);
  };


  const zelda = new Hero('Zelda');

  zelda.saludar();

  const link = new Hero('Link');

  link.saludar(); ```

Cuál es la diferencia entre este tipo de declaraciones, si se comportan igual

      function Hero(name) {
        const hero = {
          name: name,
          saludar: function(){
            console.log(`Hola soy ${this.name}`);
          }
        };
        return hero;
      }

      function Hero(name) {
        const hero = {
          name: name,
        };
        hero.saludar = function() {
          console.log(`Hola soy ${this.name}`);
        };
        return hero;
      }

Fantástica clase. Se entiende de inicio a fin.

Entender prototype te lleva a otro nivel en JS

En el curso de Fundamentos de JavaScript igual se toca muy bien este tema

Iba todo bien hasta que me de verdad me voló la cabeza cuando llegó a new… 😦

Muy buena

Importante repasar los conceptos

Todos los objetos de JavaScript heredan propiedades y métodos de un prototipo.

muy buena clase, la azúcar sintáctica facilita mucho entender el código.

Buena clase, bien desestructurada

Cuando vienes de un background de varios lenguaje tipo C y C++ comprendes mas rápido 🤠.
Muy interesante la clase pero solo me quedare con prototype y la forma de instanciar este tipo de pseudoclases new.

Me encantó esta clase :3

‘new’ es sugar syntax para Object.create()

Vaya pedazo clase! 10/10, indispensable.

¡Maestro!

Esta clase da mucho valor. De las mejores!!

Que genial es conocer esto!!!