Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿Cuándo hace falta poner el punto y coma al final de la línea?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Modificando un prototipo

25/55
Recursos

En esta clase veremos cómo se modifican las clases de herencias. JavaScript funciona con una estructura orientada a objetos y cada objeto tiene una propiedad privada que mantiene un enlace a otro objeto llamado prototipo.

Aportes 201

Preguntas 42

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Un prototipo de modifica cuando le agregamos funcionalidades / métodos, es importante tener en cuenta que el código de JS se ejecuta línea por línea de arriba hacia abajo, por lo tanto, las funcionalidades de cada objeto deben definirse todas juntas en la parte superior del código, para que de esta forma estén disponibles a lo largo del mismo y evitarnos errores al llamar algún método / función del objeto antes de su declaración.

MODIFICANDO UN PROTOTIPO
Vamos a ir al ejemplo de la clase anterior y la explicamos un poco, lo que mas debemos entender es que el prototipo es un objeto más de javascript entonces si nosotros los modificamos a cierta altura del código allí va a quedar modificado, es decir, tomando el código anterior de la altura

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}
var angel = new persona('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

Aca en este código agregaremos la funcion de “soyAlto” para las personas de la siguiente manera;

 persona.prototype.soyAlto = function () {
     return this.altura >= 1.80
 }

Al probar en la consola, las personas con esta función, nos ira dando true or false de quien es alto y quien no, lo importante aca es saber que aca recién estamos modificando el prototipo, que pasaría si la funcion la colocaramos debajo de manera que;

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}

persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}




var angel = new persona('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

persona.prototype.soyAlto = function () {
    return this.altura >= 1.80
}

Y luego llamamos la funcion para los objetos de esta manere;

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}

persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}



var angel = new persona('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

angel.soyAlto()
pepe.soyAlto()
thor.soyAlto()
carl.soyAlto()

persona.prototype.soyAlto = function () {
    return this.altura >= 1.80
}

Queremos ver si cada uno de ellos es alto, por lo que revisaremos la consola y… nos daremos cuenta de que no dará un error, nos dirá que el objeto no esta definido y pasa que cuando tenemos un error en javascript no se sigue ejecutando el código que siga, sino que se corta allí su ejecución, por lo que es muy importante donde colocamos las funciones que va a tener algún prototipo, es importante que las coloquemos siempre todas juntas ya que vamos a ir creando ese prototipo de persona y queremos que tenga todas las funciones, a menos que más adelante en el código queramos modificar de alguna manera ese prototipo, pero lo mas común es siempre definir la función o funciones, de los prototipos arriba y luego ir utilizándolas en nuestro código, siempre conviene hacerlo en el mismo lugar al iniciar el código, para que después todas esas funciones estén accesibles a esos objetos que vayamos creando.

Una duda que se puede tener aca, es que pasara si las funciones las modificamos y las pasamos a arrow functions;

function persona(nombre,apellido,altura) {
 this.nombre = nombre
 this.apellido = apellido
 this.altura = altura
 return this
}

persona.prototype.saludar = () => {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

persona.prototype.soyAlto = () => this.altura >= 1.80


var angel = new persona('Angel','Sulbaran', 1.71)
var pepe = new persona('Pepe','Trueno', 1.92)
var thor = new persona('Thor','Torero', 1.71)
var carl = new persona('Carl','Jhonson', 1.81)
var freddie = new persona('Freddie','Vega', 1.85)
var lorenzo = new persona('Lorenzo','VonMatterhorn', 1.76)
var lucas = new persona('Lucas','Posillo', 1.71)

angel.soyAlto()
pepe.soyAlto()
thor.soyAlto()
carl.soyAlto()


Luego de que las funciones fuesen pasadas a arrow functions podemos observar que no da ningún error en la consola, pero al llamar las funciones, nos dira que todas son false, no importa si eres alto o eres bajo, ya vamos a ver el porque en la otra clase.

Gracias por la clase y por el consejo de definir todas las funciones juntas, porque si no lo hacemos se rompe nuestro código.

Agrego mis notas.

.

Al construir una propiedad, TODAS las matrices recibirán la propiedad y su valor, por defecto.

Al construir un método, TODAS las matrices tendrán este método disponible.

Nota: Prototype es un constructor de objetos global que está disponible para todos los objetos de JavaScript.

Extraido de: https://www.w3schools.com/jsref/jsref_prototype_array.asp

En este código, si no se asigna una altura, el código asigna una altura random.

new: palabra reservada que se utiliza para crear nuevos objetos dado un prototipo.
this: palabra reservada que hace referencia al objeto que se acaba de construir.

prototipo: es una función que se encarga de crear objetos, de acuerdo a los parámetros que reciba, esta función utiliza this.nombreatriuto = atributo para crear cada uno de los atributos que requiere el nuevo objeto, adicionalmente el valor del atributo va ser igual al valor que se está pasando por parámetros.

Es importante tener en cuenta que para crear un nuevo objeto con el prototipo, debemos declarar el nuevo objeto y darle como valor la palabra new y el nombre del prototipo con los respectivos parámetros que deseamos crear. Ej:

Al prototipo también podemos adicionarle funciones como atributos, para esto lo que hacemos es utilizar el nombrePrototipo.prototype.nombreatributo = function(){ instrucciones
}

function persona(nombre, apellido, estatura){
    this.nombre = nombre;
    this.apellido = apellido;
    this.estatura = estatura;
}

persona.prototype.saludar = function(){
    console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
}

persona.prototype.esAltoOBajo = function(){
    if (this.estatura > 1.75){
        console.log('Es alto')
    }else{
        console.log('Es bajo')
    }
}

var yorman = new persona('Yorman', 'Londoño', 1.76);
var ivan = new persona('Ivan', 'Londoño', 1.70);
var fernanda = new persona('Fernanda', 'Londoño', 1.63)

yorman.saludar();
ivan.saludar();
fernanda.saludar();
yorman.esAltoOBajo();
ivan.esAltoOBajo();
fernanda.esAltoOBajo();

crei que se hacia el soy alto con un if 😠

Hola comunidad.
.
Que interesante esta clase, acabamos de ver una de las principales desventajas al utilizar las arrow functions, la ausencia del objeto de contexto this.
.

.
Existen otras desventajas (así como ventajas también) que están citadas en la documentación. Aquí copio algunas:

  1. No tiene sus propios enlaces a this o super y no se debe usar como métodos.
  2. No tiene argumentos o palabras clave new.target.
  3. No apta para los métodos call, apply y bind, que generalmente se basan en establecer un ámbito o alcance

.
Aquí dejo en enlace a la documentación para que puedan ver sus aplicaciones y limitaciones.
.
¡Saludos!

un dato curioso. si usan la coma en lugar del punto para indicar los decimales JS arroja errores como un false para esta linea de codigo
return 1,82> 1.8 //false
estuve un buen rato buscando que hice mal hasta que vi que era el detalle de la coma

por eso no me funciono mi arrow function

Recomiendo tomar el curso de Programación Orientada a Objetos

IDEAS CLAVES

=> Es muy importante donde colocamos las funciones del prototipo
=> Colocalas todas juntas
=> Usa mas la palabra y metafora prototipo que clase
Control de errores

//No me funcionaba retornaba el valor booleano el metodo Persona.esAlto() porque no lo solicite por consola
------------------------------*/

/*
//Objetos
¿Que diferencia a los prototipos en js que el sistema de herencia de otros lenguajes?

*/

//Imprimiendo algo en la consola
console.log("inicializando archivo");

/*Declaración de prototipos
=========================================*/
/*Ideas claves

Los prototipos son un objeto más de javascript.

*/




//Definiendo el prototipo persona
function Persona(nom, ape, alt) {
	//para guardarlo en la memoria usamos this

	//this.nombre declara el nombre clave del valor
	this.nombre = nom;
	//nom es un valor que va en funcion de los parametros del prototipo
	this.apellido = ape;
	
	this.altura = alt;
     
	//return this; implicitamente es retornado

}

//Variables de la Clase Persona, no del prototipo
var PersonaAlta = 1.70; //metros

//Dentro del prototipo de persona va a existir un atributo que va a ser una funcion
Persona.prototype.saludar = function () {
	console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}


//Para llamar a la funcion se usa Persona.soyAlto()
//Aca estamos modificando el prototipo
Persona.prototype.esAlto = function () { 

	 return this.altura > PersonaAlta;
	 
}
//retornar la condicion de si es alta


//Esto no funciona, ¿Por qué?
Persona.prototype.esBajo = function() { 
	return !this.esAlto() 
} 





/*Declaración de objetos
=========================================*/

//Un Array donde coleccionare las personas que cree
var personas = [] 

personas.push(  daniel = new Persona("Daniel", "Páez", 1.73) )
personas.push(  mariaV = new Persona("Maria", "Victoria", 1.65) )
personas.push(  amanda = new Persona("Amanda", "Páez", 1.62) )
	
   




/* "new" es una palabra reservada del lenguaje para crear nuevos objetos dado un prototipo.
new + prototipo()  , hace que se cree un nuevo objeto con el prototipo */


/*Declaración de variables y Arrays
=========================================*/
//Null


/*Declaración de funciones
=========================================*/
//Null


/*Consola y consultas
=========================================*/
//Null


/*Ejecución de funciones y métodos
=========================================*/

for(var persona of personas)
{
	persona.saludar();
	//this is like write this three times amanda.saludar();
	
	persona.esAlto();

}

Quede encantado con el cliffhanger, la gran duda con las que nos dejó Sacha

Gracias por la clase, Aunque sea 5 minutos lo estuve practicando, probando y anotando. A seguir aprendiendo.

Es importante ubicación de las funciones que va a tener el prototipo. Es recomendable colocarlas juntas y definirlas al principio del código.

¿La descripción de este video no esta de acuerdo al contenido verdad?

Demasiado bueno y completo el curso. Sacha explica demasiado bien. 10/10

Acabamos de aprender cómo modificar un prototype en JavaScript… ¿Y saben quienes más son prototypes? Asi es, las clases de JavaScript, la clase Array, la clase String, la clase Number…

Y si, podemos modificar esas clases y extenderlas, si yo quiero puedo agregar un Array.prototype.queso y usar mis arrays como: [“Pepe”, “Manue”, “Pablo”].queso() y funcionará!

Y ahora que sabemos esto, les dejo una función muy útil que cree para eliminar valores repetidos de un array modificando su prototype:

Array.prototype.unique = function () {
    return this.filter(function (a, b, c) { return c.indexOf(a, b + 1) < 0 })
};

var elementosRepetidos = [0, 2, 4, 2, 7, 0, 1];
console.log(elementosRepetidos.unique())

Así como esta tengo muchas más, en mi canal las subiré por si a alguien le interesa y también tengo un video que hace mención a esto de prototype :3

https://www.youtube.com/results?search_query=RetaxMater&page&utm_source=opensearch

/*
1.- EL prototipo es un objeto mas de JavaScript, entonces si lo modificamos en una cierta altura del codigo. A partir de alli quedará modificado.

2.- Es muy importante donde colocamos las funciones que va a tener el prototipo, es importante que las coloquemos todas juntas ya que vamos 
a ir creando estas personas con ese prototipo pero queremos que tenga todas las funciones al menos que más adelante en el codigo queramos modificar
el prototipo.

3.- Los prototipos colocarlos al iniciar el código (arriba) para que todas las funciones esten accesibles para todos los objetos que vayamos creando.
*/

Reto #5 😎👌

/*Las clases en javascript anteriormente se usaban de otra forma y
no se conocian como clases como en otros lenguaje y su uso era 
diferente y a esto se le conoce como prototipos


Como ejemplo tendremos la clase persona la cual se creara a partir
de los parametros que le pasemos y lo que contenga adentro a lo cual
se le conoce como constructor

This hace referencia al objeto que se va a construir

Implisitamente js retorna this cuano se llama a la funcion con 
la palabra new
*/




function Persona(nombre, apellido, altura){

    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
    
/*

es posible anexar funciones al prototipo usando el apéndice .prototype precedido 
de el nombre que le asignamos a nuestro nuevo prototipo y sucedido del nombre de 
nuestra nueva función encadenados. Luego este se asigna a una función anónima.

*/
    Persona.prototype.saludar = function (){

    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`);

    }

    Persona.prototype.soyAlto = function(){

    if(this.altura >= 1.8){
        console.log(`Soy Alto`)
    }else{
        console.log(`Soy Bajo`)
    }


    }

}

/* la funcion se ejecutara una vez creemos una herencia de esta
  
   new es una palabra reservada la cual se utiliza para crear nuevos
   objetos dado una clase
   
   Implisitamente al crear una herencia de nuestra clase retorna
   el objeto que se esta creando

*/

var sacha = new Persona('Andres', 'Pinchao', 1.8);
var laura = new Persona('Laura', 'Ramirez', 1.7);
var felipe = new Persona('Felipe', 'Hernandez', 1.9);  // estos parametros se refieren a los pametros
                                                    //que se definen en la funcion

sacha.saludar() //utilizamos la herencia de la clase en conjunto con una funcion que 
laura.saludar() //esta definida dentro de esa misma clase
felipe.saludar()
sacha.soyAlto()
laura.soyAlto()
felipe.soyAlto()```

Buenas! quisiera avisar que en el SERVER B a partir del minuto 4.56 hasta el final 5:04 no se escucha el audio!

¡¡¡Qué feo cuando crees que sabes JS en realidad sos una bestia!!!
¿Alguien me puede explicar porque esto esta mal?
¡JS sos mi amor imposible!!! Cuando pienso que te tengo te me escapas!

Excelente profesor Sacha!, lastima que ya no está haciendo cursos en Platzi

Una clase muy importante para empezar a entender que las arrow fns no solo son mas cortas al momento de escribir sino que tiene otros efectos. Tipica pregunta en una entrevista de JS.

la tarea anterior queria realizarlo como me enseño el maestro, pero no le puse prototype , si va usar una funcion con this tiene que llevar prototype

function Persona(nombre ,apellido,altura){
  this.nombre = nombre
  this.apellido = apellido
  this.altura= altura

}

Persona.prototype.saludar= function(){
  console.log (`hola me llamo ${this.nombre} ${this.apellido}`)
}
var sacha= new Persona('sacha','lifszuc',1.80)
var erika = new Persona ( 'Erika','martines ',1.50)
var raul = new Persona ( 'raul','viscarra ',1.75)
var pedro = new Persona ( 'pedro','llanos ',1.79)
var maria = new Persona ( 'maria','salazar ',1.71)

Persona.prototype.soyAlto=()=>this.altura>1.70

Persona.prototype.soyAlto=function(){
  if(this.altura>1.70){
    console.log(`soy ${this.nombre} y soy alto`)
  }else {
    console.log(`soy ${this.nombre} y mido ${this.altura} menor a 1.70` )
  }
}

por que cuando llamo al prototype de la funcion el console.log me decuelve la funcion y este es el resultado

sacha.saludar
ƒ (){
    console.log (`hola me llamo ${this.nombre} ${this.apellido}`)
  }

muy genial la clase

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script>

function Persona(nombre , apellido , altura){
     this.nombre = nombre;
     this.apellido = apellido;
     this.edad = 20;
     this.altura = altura;
}

Persona.prototype.saludar = function () {
    console.log(`Hola , Me llamo ${this.nombre} ${this.apellido}`);

    if (this.altura >= 1.8) {
        console.log(`Y soy alto , ya que mido ${this.altura}`);
    }
     else {
        console.log(`No soy alto , ya que mido ${this.altura}`);
    }
}


var jesus = new Persona('Jesus','Soto', 1.80);
var ramon = new Persona('Ramon','Soto' , 1.62);
var ezequiel = new Persona('Ezequiel','Soto' , 1.79);



</script>
</body>
</html>

Por aqui dejo yo mi ejemplo por si de lago sirve 😄

Resumen de la Clase

Prototipo: Sistema de Herencia

El prototipo es un objeto más de javascript, si lo modificamos en un cierto lugar del código, a partir de ahí va a quedar modificado.
Por lo que una buena práctica, o más bien la manera de declarar un prototipo es al inicio del código y en bloque, es decir todo el código junto (propiedades y funciones del prototipo).
De otra manera, si queremos correr una función antes de declararla JS arrojará un error y quedará interrumpido el flujo de ejecución.

Excelente clase, voladora de cabeza, genial forma de enseñar

Una respuesta valida es afirmar que en todos los lenguajes de programación, se leen las instrucciones de forma secuencial , por tal motivo si se trata de ejecutar una instrucción que no ha sido declarada , se estalla el algoritmo.

Los prototipos siempre se deben declarar antes de invocarlas en el programa. Se recomienda escribirlas al inicio del archivo.

function Persona (nombre,apellido,altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
}

Persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

Persona.prototype.soyAlto = () => this.altura > 1.6

var emanuel = new Persona("Emanuel","Ortega",1.77);
var cristian = new Persona("Cristian","Ortega",1.89);
var arturo = new Persona("Arturo", "Martinez",1.32);

emanuel.saludar();
cristian.saludar();
arturo.saludar();

emanuel.soyAlto();
cristian.soyAlto();
arturo.soyAlto();

Lo que explica el profe es lo llamado HOISTING -> una declaracion que se realiza antes de ejecutar el codigo

Yo pensaba que no importaba la ubicación de las funciones para los prototipos, ahora sabemos que si están después de que se creen los objetos nos arrojarán un error y detendrán el programa. Gracias por la explicación instructor Sacha.

const LIMITE_ALTURA = 1.8

var esAlto = ({altura}) => altura >= LIMITE_ALTURA
var esBajo = ({altura}) => altura < LIMITE_ALTURA

function Persona(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

var pepe = new Persona('Pepe','Sanchez',1.9)
var juan = new Persona('Juan','Gonzalez',1.65)
var pedro = new Persona('Pedro','Gutierrez',1.8)
var luis = new Persona('Luis','Rodriguez',1.78)
var jose = new Persona('Jose','Hernandez',1.85)

var personas = [pepe, juan, pedro, luis, jose]


var personasAltas = personas.filter(esAlto)
var personasBajas = personas.filter(esBajo)


for (var i = 0; i<personasAltas.length; i++) {
    console.log(`Hola, me llamo ${personasAltas[i].nombre} ${personasAltas[i].apellido} y soy una persona alta.`)    
}

for (var i = 0; i<personasBajas.length; i++) {
    console.log(`Hola, me llamo ${personasBajas[i].nombre} ${personasBajas[i].apellido} y soy una persona baja.`)    
}

Resultado en consola:
Hola, me llamo Pepe Sanchez y soy una persona alta.
Hola, me llamo Pedro Gutierrez y soy una persona alta.
Hola, me llamo Jose Hernandez y soy una persona alta.
Hola, me llamo Juan Gonzalez y soy una persona baja.
Hola, me llamo Luis Rodriguez y soy una persona baja.

Tambien podria ser dentro de la clase

function User (nombreU, id, edad){
  this.nombreU = nombreU;
  this.id = id;
  this.edalli = edad;
  this.getCompleteName = () => `El nombre completo es: ${this.nombreU}`;
}```

La función soyAlto me regresa false siempre y la tengo que ejecutar en la consola, no se ejecuta automaticamente con la ejecución del js

function Persona(nombre, apellido, altura)
{
  this.nombre = nombre;
  this.apellido = apellido;
  this.altura = altura;
  //return this; Está implícito en js
}

Persona.prototype.saludar = function()
{
  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}.`);
}

Persona.prototype.soyAlto = () => this.altura > 1.80

var sacha = new Persona('Sacha', 'Lifszyc', 1.88);
sacha.saludar();
sacha.soyAlto();

Es bueno repasar y recordar estas clases.

Eso se debe al algo llamado Hoisting si mal no recuerdo.!

//son dos variables distintas, este sera el atributo del objeto (this.nombre) y nombre hara referencia al parametro nombre
function Persona(nombre, apellido, altura){
  this.nombre = nombre;
  this.apellido = apellido;
  this.altura = altura;
}

//dentro del prototipo de persona existira el atributo saldar que sera una funcion
Persona.prototype.saludar = function(){
  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`);
}

const personaAlta = 1.85;

//funcion que indentifica si la persona es alta
Persona.prototype.validacionAlturaPersona = function(){
  //operador ternario
  this.altura >= personaAlta ? console.log(`${this.nombre} es una persona alta`) : console.log(`${this.nombre} es una persona baja`);
}

//Se crea un nuevo objeto de la clase persona (del prototipo)
var alejandro = new Persona('Alejandro', 'Dubon', 1.85);
var pepe = new Persona('Pepe', 'Ramirez', 1.70);
var andres = new Persona('Andres', 'Iniesta', 1.80);
var zlatan = new Persona('Zlatan', 'Ibrahimovic', 1.98);

Apuntado queda! ^^

Prototipo es un objeto más de Javascript.

Esa característica de los prototipos me recuerda a las funciones guardadas en variables.

Las funciones siempre se cargan antes que el resto del código, pero cuando se almacenan en una variable, eso no sucede, por tanto, antes de guardar una función en una variable, asegurémonos que no la usaremos arriba de la línea donde definimos el valor de la variable, de lo contrario la consola nos dira: “‘variable’ is not defined”

//Se crea un prototipo
function Persona(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}
// el nombre de 'this.nombre' es un atributo del nuevo objeto y hace referencia a él.
// nombre de '= nombre', es la variable nombre que se recibe como parametro (de esta fx)


Persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

Persona.prototype.decirAltura = function () {
    if (this.altura > 1.8) {
        console.log(`Soy alto porque mido ${this.altura} metros.`)
    } else {
        console.log(`No soy tan alto porque mido ${this.altura} metros.`)
    }
}

// la palabra reservada new sirve para crear nuevos objetos
//dado un prototipo (en este caso, el prototipo de persona)
var marie = new Persona('Marie', 'Garcia', 1.71)
var dani = new Persona('Daniel', 'Hernández', 1.82)
var angel = new Persona('Angel', 'Pineda', 1.65)
var armando = new Persona('Armando', 'Perez', 1.86)

marie.saludar()
marie.decirAltura()

Me sigo confundiendo mucho y aun no lo logro entender, pero no me rendire.

Me parece interesante JavaScript

Cuando utilizo arrow function el navegador no reconoce el prototype y me arroja resultados undefined, supongo que es por lo que dice al final que las arrow function le dan un comportamiento distinto a this

function Persona(nombre, apellido, altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
}

var johan = new Persona("Johan", "Echeverri", 1.81);
var erika = new Persona("Erika", "Popo Ocoro", 1.5);
var elNegro = new Persona("El negro", "Del whats App", 2)

Persona.prototype.saludar = function () {
    console.log(`Hola mucho gusto mi nombre es ${this.nombre} ${this.apellido}`)
}
Persona.prototype.esAlta = function () {
    return this.altura > 1.8 ? console.log(`${this.nombre} ${this.apellido} is tall`) : console.log(`${this.nombre} ${this.apellido} isn't tall`)
}

/* las funciones del prototipo deben de colocarce todas juntas debajo de la funcion contructora y luego si invocarles, por que si primero se invocan y luego se crean el sistema no las identifica y se rompe el codigo */

johan.saludar();
erika.saludar();
elNegro.saludar();
johan.esAlta();
erika.esAlta();
elNegro.esAlta();


console.log(johan);

Para no tener inconvenientes con este tipo de situaciones les recomiendo un curso de programación estructurada

Agregando soyAlto al prototipo de persona

function Persona(nombre, apellido, altura) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
}

Persona.prototype.saludar = function() {
    console.log(`Hola me llamo ${this.nombre} ${this.apellido}`);
}

Persona.prototype.soyAlto = function() {
    if (this.altura >= 1.8) {
        console.log(`Yo ${this.nombre} ${this.apellido} soy alto/a`);
    } else {
        console.log(`Yo ${this.nombre} ${this.apellido} no soy alto/a`);
    }
}

var ivan = new Persona('Ivan', 'Espadas', 1.82);
var erika = new Persona('Erika', 'Luna', 1.77);
var arturo = new Persona('Arturo', 'Martinez', 1.80);

ivan.saludar();
erika.saludar();
arturo.saludar();

Aqui documentacion oficial de prototipos en Javascript

https://developer.mozilla.org/es/docs/Learn/JavaScript/Objects/Object_prototypes

Les recomiendo

este video
para reforzar mas este tema de los prototipos

Jajaja y yo va de buscar porque no me salía el ejercicio al usar arrow functions, pensé que había hecho algo mal

Interesante explicacion. Y la incógnita que deja para la siguiente clase.

var miguel = new _2020('miguel', 'ochoa', 1.85, 28)
var jose = new _2020 ('jose', 'gamez', 1.78, 16)
var mariana = new _2020 ('mariana', 'sanchez', 1.95, 20)
var carlos =  new _2020('carlos', 'perez', 1.68, 17)

function _2020 (nombre, apellido, altura, edad){
  this.nombre = nombre
  this.apellido = apellido
  this. altura = altura
  this. edad = edad
}

_2020.prototype.saludar = function(){
  console.log(`Hola me llamo ${this.nombre} ${this.apellido} ${this.altura <= 1.79 ? ',soy bajo' : ',soy alto'} ${this.edad <= 17 ? 'y soy menor de edad' : 'y soy mayor de edad'}`);
}
miguel.saludar()
jose.saludar()
mariana.saludar()
carlos.saludar()

var jose = new Local ('jose', 'salas', 65, 1.65)
var sara = new Local ('sara', 'perez', 2, 1.2)
var elsa = new Local ('elsa', 'ochoa', 4, 1.3)
var miguel = new Local ('miguel', 'ochoa', 28, 1.8)

function Local (nombre, apellido, edad, estatura){
  this.nombre = nombre
  this.apellido = apellido
  this.edad = edad
  this.estatura = estatura
}

Local.prototype.saludar = function(){
  console.log(`hola me llamo ${this.nombre} ${this.apellido} ${this.edad >= 18 ? ',soy mayor de edad' : ',soy menor de edad'} ${this.estatura >= 1.8 ? 'y soy alt@' : 'soy baj@'}`)
}

jose.saludar()
sara.saludar()
elsa.saludar()
miguel.saludar()```

Cuando vi el curso de básico Granda estaba molesto porque los retos que colocaba no iban acorde con lo que enseñaba. Este curso realmente es un curso básico y me gusta mucho mas

Perfecto

function persona(nombre, apellido, altura) {
      this.nombre = nombre;
      this.apellido = apellido;
      this.altura = altura;
}

persona.prototype.saludar = function () {
      console.log(`Hola, mi nombre es ${this.nombre} ${this.apellido}`);
}

persona.prototype.estatura = function () {
      if (this.altura > 1.70) {
            console.log(`Soy alto Y mi estatura es ${this.altura}`);
      } else {
            console.log(`Soy bastante enano Y mi estatura es ${this.altura}`);
      }

}

var George = new persona('George', 'Baez', 1.74)
var maria = new persona('maria', 'marques', 1.54)
var Jose = new persona('Jose', 'wilde', 1.70)


George.estatura()
maria.estatura()
Jose.estatura()

El final de esta clase me dejo como la penúltima temporada de Game of Thrones

,

Justo ese problema tuve en el ejercicio anterior, quería convertirlas a arrow functions pero me salían cosas raras y mejor las deje como function

Muy buen curso la verdad, no es que sea difícil pero siempre es bueno tener un ejemplo el cual aplique la teoría

El prototipo es un objeto mas de JavaScript!

Todo claro

Claro muy interesante porque al final, las funciones y las arrow function son similares pero no exactamente lo mismo. Super fascinante.

Muy importante eso de usar el código en cascada, ya que al principio no parece tan ordenado, pero tiene mucho sentido a la hora de la ejecución.

Tenia exactemente esa duda de escribirlas como arrow functions.

Jhose

Cuando agregamos una funcion con el prototype, la funcion se puede hacer como arrow function?

¿Alguien me podría explicar porque al final cuando Sacha hace las llamadas a las funciones desde el código no hay output pero cuando lo realiza en la terminal sí hay output?

Es posible hacer referencia a una funcion en el caso que el objeto la llame y esta se encuentre en otro archivo .js y ejecutarla? al igual que si es posible hacer referencia en caso que se llame a la funcion y esta este debajo del llamado? es recomendable crearlas primero, eso lo entiendo, pero existe forma de referenciarlas de las formas que pregunto?

Perosona.prototype.saludar no funciona como arrow function.

prototype es un método general de todas las funciones que se usa como constructor del lenguaje, razón por la cual NO DEBEMOS modificarlo ni tampoco ninguno de los objetos nativos del lenguaje.

Resolviendo el reto de la altura

Hola esta es mi solución al reto anterior.

function persona  (nombre, apellido, altura){
  this.nombre = nombre
  this.apellido = apellido
  this.altura = altura
}

persona.prototype.saludar = function (){
  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

persona.prototype.soyAlto = function(){
  if (this.altura > 1.8){
    console.log(`Mi nombre es ${this.nombre} y soy alto`)
  }else{
    console.log(`Mi nombre es ${this.nombre} y soy bajo`)
  }
}

var camilo = new persona ('camilo','alvarez', 1.7)
var laura = new persona('laura', 'molina', 1.65)
var arturo = new persona('arturo', 'ramirez', 1.82)```

clase de hoy

function Persona (nombre,apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

//Persona.prototype.SoyAlto  = function (){
//    return this.altura > 1.8
//}

//Con este valor sale false los 3..... Why?--> explicacion sgt clase x xd
Persona.prototype.SoyAlto  = () => this.altura > 1.8

var Kalrxs = new Persona('KarlxS', 'Guzman', 1.76)
var erika = new Persona('Erika', 'Luna', 1.65)
var arturo = new Persona('Arturo', 'MArtinez', 1.82)

Kalrxs.SoyAlto()
erika.SoyAlto()
arturo.SoyAlto()

Ahora veo que es similar a la sobreescritura de metodos en Java

function Persona(nombre,apellido,altura) {
  this.nombre = nombre
  this. apellido = apellido
  this.altura = altura
  return this
}

Persona.prototype.saludar = function () {
  console.log(`Hola me llamo ${this.nombre} ${this.apellido}`)
}
Persona.prototype.soyAlto = function() {
  (this.altura > 1.8) ? console.log('soy alto') : console.log('no soy alto')
} 

var sacha = new Persona('Sacha', 'Lifszyc',1.72)
var erika = new Persona('Erika', 'Luna',1.62)
var arturo = new Persona('Arturo', 'Martinez',2.0)
function Persona(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

Persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy una persona ${this.altura > 1.8 ? "alta" : "baja"}.`)
}
var hache = new Persona ('Rachel', 'Palomeque', 1.73)
var paco = new Persona ('Francisco', 'Arroyo', 1.87)

Reto:

const LIMIT_ALTURA = 1.7

function Persona(nombre, apellido, altura) {
	this.nombre = nombre
	this.apellido = apellido
	this.altura = altura
}

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

Persona.prototype.soyAlto = function() {
	return this.altura >= LIMIT_ALTURA
}

Persona.prototype.soyBajo = function() {
	return !this.soyAlto()
}

Jesus = new Persona('Jesus', 'Quinto', 1.8)
Elitzabeth = new Persona('Elitzabeth', 'Quinto', 1.5)
Lisbeth = new Persona('Lisbeth', 'Quinto', 1.4)

console.log(Jesus.soyAlto())
console.log(Elitzabeth.soyAlto())
console.log(Lisbeth.soyAlto())
console.log('--------------')
console.log(Jesus.soyBajo())
console.log(Elitzabeth.soyBajo())
console.log(Lisbeth.soyBajo())

sacha explica re genial.

Veamos porque no funcionan las arrow functions en el próximo vídeo…

Hola, Dejo mi codigo del ejercicio anterior !

function persona (nombre, apellido, altura) {
	this.nombre = nombre
	this.apellido = apellido
	this.altura = altura
}

var mao = new persona('Mario', 'Crespo', 1.9) 


persona.prototype.saludar = function () {

	if (this.altura >= 1.8) {
		console.log (`Hola, me llamo ${this.nombre}  ${this.apellido} y soy alto`)
	} else {
		console.log (`Hola, me llamo ${this.nombre}  ${this.apellido} y no soy tan alto`)
	}

	
}

mao.saludar()

var yura = new persona('Yurany', 'Cepeda', 1.6)
var juan = new persona('Juan Diego', 'Reyes', 1.7)```

tengo una pregunta: será qu es correcto escribir lo siguiente

function distancia(p){
	const x = this.x - p.x;
	const y = this.y - p.y;

como

function distancia(p){
 const { x } = this - p;
 const { y } = this - p;

que dicen?

Person.prototype.isHigh = function(){
    if(this.height > HEIGHT) console.log("This person is tall!");
    else console.log("This person is not tall!");
}```

pregunta, si se puede crear una funcion dentro del prototipo uando this.function = function() {return opt}?

buena tarde
comparto mis aportes

//definir un prototipo

function persona(nombre, apellido,altura) {
this.nombre = nombre
this.apellido = apellido
this.altura = altura

}

persona.prototype.saludar = function() {

  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}
/*var lina = new persona('Lina' ,'Rueda', 1.65)
var erika = new persona('Erika' ,'Torres', 1.80)
var arturo = new persona('Arturo' ,'Garzón', 1.75)

*/persona.prototype.esalta = function () {

  varsize = this.altura
  if (this.altura >=1.80) {
    console.log(`Hola, Me llamo ${this.nombre} ${this.apellido} y soy alta porque mido ${this.altura}`)
    } else {
      console.log(`Hola, Me llamo ${this.nombre} ${this.apellido} y no soy alta porque mido ${this.altura}`)  
    }
}
var lina = new persona('Lina' ,'Rueda', 1.65)
var erika = new persona('Erika' ,'Torres', 1.80)
var arturo = new persona('Arturo' ,'Garzón', 1.75)

lina.esalta()
erika.esalta()
arturo.esalta()

El mio fue así

function Persona(nombre, apellido, edad, altura){
    //el constructor
    var REGLAALTURA = 1.8
    this.nombre = nombre
    this.apellido = apellido
    this.edad = edad
    this.altura = altura
    this.tamano = this.altura>REGLAALTURA? 'Alto/a' : 'Bajo/a'
}

Persona.prototype.saludar = function(){
    console.log(`Hola, soy ${this.nombre} ${this.apellido} tengo ${this.edad} y soy ${this.tamano}`)
}

var sacha = new Persona('sasha','Lifszyc',24,1.9)
var luis = new Persona('luis','tarara',24,1.2)

Observando algunos aportes logre estructurarla de la siguiente forma:

function Persona(nombre, apellido, altura) {
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

Persona.prototype.saludar = function () {
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
}

Persona.prototype.validarAltura = function () {
    const ALTO = 1.86
    console.log(`Soy ${this.altura > ALTO ? 'Alto' : 'Bajo'}`)
}

var julio = new Persona('Julio', 'Estrada', 1.96)
var sharon = new Persona('Sharon', 'Palencia', 1.50)

Espero les sirva.

Comparto mi solución

const LIMITE_ALTURA = 1.8

function Persona(nombre, apellido, altura){
    this.nombre = nombre
    this.apellido = apellido
    this.altura = altura
}

Persona.prototype.saludar = function(){
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} ` )
    console.log (` y soy ${this.soyAlto() ? 'Alto' : 'Bajo'}`) 
}
Persona.prototype.soyAlto = function(){
    return this.altura >= LIMITE_ALTURA     
}

var luis = new Persona('Luis','Guzmán', 1.73)
var pedro = new Persona('Pedro','Fuente', 1.93)
luis.saludar()
pedro.saludar()


const esAlto = (persona) => {
    if (persona.altura > 1.8) {
        return true
    }
    return false
}

function persona(p_nombre, p_apellido, p_edad, p_altura) {

    this.nombre = p_nombre
    this.apellido = p_apellido
    this.altura = p_altura
    this.edad = p_edad
}

persona.prototype.saludar = function() {

    console.log(`hola me llamo ${this.nombre} ${this.apellido} y tengo ${this.edad} años`)
    if (esAlto(this)) {
        console.log(`y soy muy alto mido ${this.altura}`)
    } else {
        console.log(`No soy muy alto mido ${this.altura} mtrs`)
    }
}


var rodri = new persona('Rodrigo', 'Moreno', 20, 1.9)
rodri.saludar()```
function persona(n, a, h){
    this.nombre = n;
    this.apellido = a;
    this.altura = h;
}

persona.prototype.saludar_altura = function(){
    if (this.altura >= 1.8)
    console.log(`Hola, me llamo ${this.nombre} ${this.apellido} y soy alt@`)
    else {
        console.log (`Hola, me llamo ${this.nombre} ${this.apellido} y soy baj@`)
    }
}
var Sacha = new persona('Sacha', 'Carbonell', 1.89);
var Pedro = new persona('Pedro', 'Hernandez', 1.76);
var Benito = new persona('Benito', 'Juarez', 1.89);
var Jose = new persona('Jose', 'Perez', 1.37);
var Sergio = new persona('Sergio', 'Maury', 1.43); //crear nuevos objetos dado un prototipo. sacha es el objeto, persona es el prototipo//

//al ejecutarse la funcion (prototipo), se retornaran todos los valores //
Sacha.saludar_altura();
Pedro.saludar_altura();
Benito.saludar_altura();
Jose.saludar_altura();
Sergio.saludar_altura();```

Muy buena la aclaración de como funcionan las arrow function con los prototipos o clases

function Persona(nombre, apellido, altura) {
	this.nombre = nombre;
	this.apellido = apellido;
	this.altura = altura;
}

Persona.prototype.saludar = function() {
	console.log(`Hola me llamo ${this.nombre} ${this.apellido}`);
};

Persona.prototype.soy_alto = function() {
	return this.altura >= 1.8;
};

var andres = new Persona("Andres", "Campero", 1.8);
var aric = new Persona("Aric", "Hauck", 1.5);
var kayden = new Persona("Kayden", "Smith", 1.9);
andres.saludar();
function Promedio_Final(nombre,apellido,edad,promedio){
  this.nombre = nombre
  this.apellido = apellido
  this.edad = edad
  this.Promedio_Final = promedio
}

const Nota_Promedio_de_Referencia = 10

const Pasa_a_siguiente_Ciclo = (persona) => {
  if(persona.Promedio_Final>=Nota_Promedio_de_Referencia){
    return true
  }else{
    return false
  }
}

Promedio_Final.prototype.Mensaje = function (){
  if(Pasa_a_siguiente_Ciclo(this)){
    console.log(`${this.nombre} ${this.apellido} ha pasado a siguiente ciclo`)
  }else{
    console.log(`${this.nombre} ${this.apellido} no ha pasado a siguiente ciclo`)
  }
}

var Fernando = new Promedio_Final('Fernando','Huaman',18,13)
var Rajuk = new Promedio_Final('Rajuk','Narvaez',17,11)
var Miguel = new Promedio_Final('Miguel','Salazar',19,09)

Fernando.Mensaje()
Rajuk.Mensaje()
Miguel.Mensaje()

Buena práctica:

  • Los prototipos se debe crear al inicio del código para evitar errores de no definición en el caso de que se llame la función sin que haya sido creada.
// Reto!!
// Agregar atributo altura al constructor que si es alto o no a si mide 1.8 metros
// Con esta funcion nosotros creamos una estructura similar a una clase en el cual nosotros indicamos que caracteristicas va a tener cada persona y que funciones puede hacer para despues hacer un objeto con ella
/**
 * Flujo del codigo va de arriba a abajo
 * Tenemos que tener en cuenta cuando creamos por ejemplo una funcion del prototypo y este la tenemos al final e nosotros la llamamos antes que el navegador carge esa parte de la funcion para que exista ej:
 * Rene.vivo()
 * Tener en mente que la funcion o la modificacion del prototypo esta despues de esta linea de codigo por ende no existe antes de esta y al querer llamar algo que no existe en el momento dado el programa colapsa provocando que no pueda seguir ejecutando todo lo demas que tengamos programado :(
 * Persona.prototype.vivo = () => console.log('Estoy vivo');
 */
function Persona(nombre,apellido,altura){
    this.nombre = nombre;
    this.apellido = apellido;
    this.altura = altura;
    this.mide = () => {
        if(this.verificarAltura()){
            console.log('Es alto')
        }else{
            console.log('No es alto')
        }
    };
    this.verificarAltura = () => this.altura >= 1.80;
    this.saludar = () => console.log(`Hola me llamo ${this.nombre} ${this.apellido} `);
}

// Para agregar funciones dentro de nuestro prototypo en javascript entonces tenemos 2 vias una es hacerlo como se indico aqui o hacerlo de la forma que he hecho arribita con funciones anonimas dentro de la misma propiedad, ademas que es mas limpia y nos ahorramos mucha escritura de mas
Persona.prototype.saludarV2 = () => console.log(`Hola me llamo ${this.nombre} ${this.apellido}`);
// Con la palabra reservada new nosotros estamos diciendo que estamos creando un objeto en base a Persona(funcion) sin usar el new estariamos usando la propia funcion pero no estariamos creando un objeto de por si
var Rene = new Persona('René','Sanchez',1.75);
var erika = new Persona('Erika','Luna',1.85);
var arturo = new Persona('Arturo','Martinez',1.80);
persona.prototype.esAlto = function () {
  if(this.estatura > 1.80){
    console.log(`${this.nombre} Es alto`)
  } else {
    console.log(`${this.nombre} Es bajo`)
  }
}```