Modificando un prototipo

Clase 25 de 55 • Fundamentos de JavaScript 2018

Resumen

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.

Gian Alessandro Varuzza De La Espriella

student•

Muy bien explicado, en este curso me está quedando todo mucho más claro!

Japheth Calzada López

student•

si me gusto mas este curso q el anterior

David Villegas

student•

Es excelente, todo muy bien explicado.

Jose L. Figueroa

student•

El prototipo es un objeto más de JS , a partir de que lo modifiquemos, éste va a quedar modificado.

Es de mucha importancia donde colocamos las funciones que va a tener el prototipo . Estos se deben de colocar juntos, ya que con ellos se va creando el prototipo del objeto, y deseamos que tenga juntas todas sus funciones.

Por ello definimos los prototipos arriba, y los utilizamos a lo largo del código.

NOTA: Cuando tenemos un error en JS, éste no se sigue ejecutando, se corta ahí la ejecución del código.

Antonio Madrid

student•

Esto tiene que ver también con la naturaleza de programación estructurada que tiene Javascript

José Gregorio Block

company_admin•

#Interesante

Carlos Francisco Betancourt Requena

student•

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.

Andrés Felipe Lopez gomez

student•

Gracias

ANGEL DAVID SULBARAN CALDERON

student•

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.

Victor Andres Castillo Zambrano

student•

gracias

Francisco Rapetti

student•

freddie no es tan alto :v

Pamela Cinthya Torres Gutiérrez

student•

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.

Diva Andrea Ulloa Acero

student•

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

Bernardo Aguayo Ortega

student•

gracias por el aporte

Oscar Stevens Cuartas Bejarano

student•

//PROTOTIPOS
function Persona(nombre, apellido, altura) {
	this.nombre = nombre
	this.apellido = apellido
	this.edad = 20
	this.altura = altura
	return this
}

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


Persona.prototype.soyAlto = function () {
	if (this.altura >= 1.8) {
		console.log(`La persona ${this.nombre} es Alta con un total de ${this.altura} `)
	} else {
		console.log('no es alto')
	}
}

var oscar = new Persona('oscar', 'cuartas', 1.85)

var sofia = new Persona('Sofia', 'Molina', 1.5)

Oscar Stevens Cuartas Bejarano

student•

mi aporte al reto anterior

Jimmy Yoshio Yshiy Magñi

student•

Entiendo que no deberías tener el return this en tu prototipo de Persona.

Saludos.

Emmanuel Olguin

student•

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

Francisco Ezequiel Baños Ramirez

student•

Podrias evitar eso usando otra propiedad del lenguaje que funciona de manera similar, no recuerdo el nombre exacto pero aqui te la explico

function what(n, a, al){
	this.nombre = n;
	this.apellido = a;
	// Ahora si viene lo shido xD
	this.altura = al != undefined ? al : (Math.random() + 1).toFixed(2)
	/* Se realiza de esta manera: Tienes que usar un operador relacional 
	o logico, en general algo que te devuelva un valor de tipo booleano 
	si esta condicion se cumple viene el "?" Ahi indicaras que valor tendra
	en el caso de que esto suceda, de lo contrario despues del ":" se 
	asignara un valor distinto */

Facundo Nicolás García Martoni

teacher•

@ChekeGT es llamado "operador ternario" y está presente en varios lenguajes de programación como una forma de abreviar un if

yorman alberto londoño trujil

student•

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

Jesus Federico David Herrera

student•

El error que indica al comenzar el video se denomina HOISTING, cuando tenes una declaracion antes de la ejecucion del codigo

Erik Elyager

student•

Hosting es definitivamente un tema que no siempre se entiende del todo, les dejo estas dos clases para quienes quieran profundizar:

jesus gomez

student•

crei que se hacia el soy alto con un if 😠

Alfredo Martínez García

student•

Hola Jesús, recuerda que hay muchas formas de hacer código, yo también lo hice con if y else para mostrar si era alto o no en consola pero eso depende de ti y del equipo de trabajo, que entienda el código o que sea legible para otra persona o para ti del futuro.

Son formas diferentes de resolver un problema, saludos :D

Javier Romero

student•

hola jesus yo también lo hice con un if y aun así no me quejo, hay diferentes formas de hacerlo, depende de la comodidad al desarrollar código saludos.

Julio César Zaravia Paredes

student•

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:

No tiene sus propios enlaces a this o super y no se debe usar como métodos.
No tiene argumentos o palabras clave new.target.
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!

Martin E Pestana R

student•

Es recomendable no usar los punto y comas al final de cada declaración?? así nuestro interprete nos de warnings?

Carlos Rodríguez Huerta

student•

Es un mundo de debate donde sólo es cuestión de gustos(en mi opinión). Una clase completa aquí.
Para el otro punto, tengo curiosidad sobre en qué entornos te haz topado con warnings por la omisión del “;”. Tanto en navegadores como editores no eh tenido alertas de ese tipo.

Franklin Lugo

student•

Por asuntos de legibilidad prefiero usar el ;
También hay herramientas de que te agregan los puntos y las comas automáticamente basadas en recomendaciones de equipos que hacen buen javascript (airbnb, google…)

Henry Corredor

student•

uy! UY!!! 2:49 que fue ese movimiento??? que tipo de super poder es ese? como hizo para transportar todo el bloque de código? o__0 (que pena… pregunta fuera de contexto ~~’ )

Danelia Sanchez Sanchez

student•

Seleccionas el fragmento de código y, luego, Ctrl + Flecha arriba o Ctrl + Flecha abajo

Henry Corredor

student•

que cool 😄 gracias mil

Victor Noguera

student•

Sorprendente la simplicidad con la que resolviste el reto de la clase anterior, yo puse condicionales if y console.log con el mensaje si es o no alto, en ocasiones la soluciones mas simples, son las más funcionales.

Joel Alejandro Tovar Ramos

student•

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

camilo esteban davila

student•

por eso no me funciono mi arrow function

Miguel Angel Lozano Alvarez

student•

Recomiendo tomar el curso de Programación Orientada a Objetos

Daniel Páez

student•

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

}

José Gregorio Block

company_admin•

#Interesante

Daniel Páez

student•

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

Modificando un prototipo

Introducción al curso

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

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

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