A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Prototype

10/42
Recursos

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

Todos los objetos 鈥渉eredan鈥 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 鈥渉ereda鈥 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.

Aportes 205

Preguntas 29

Ordenar por:

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

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 鈥渉ereda鈥 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 鈥渉eredan鈥 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 鈥渉ereda鈥 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(鈥楲ink鈥);
 

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 鈥渓o 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.

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(鈥渁udi鈥, 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(鈥淏MW鈥, 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:

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 鈥溌縫or 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

uy 馃く esto pareci贸 una novela de misterio en el que todo se devela justo en la 煤ltima p谩gina... yo al comienzo pensaba "pero para que explica todo eso, es como 1000 formas de hacer lo mismo" y luego al final entend铆 todo super clarito. Muy ch茅vere esta clase.

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鈥spero q las proximas sean iguales o mejores.

1.- La keyword new crea un nuevo objeto que 鈥渉ereda鈥 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 鈥渘ew鈥 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 鈥渉eredan鈥 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 鈥渘ew鈥 , 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

鈥榥ew鈥 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!!!