Hola muchachos y muchachonas 😄 !
Soy nuevo en el lenguaje, hace poco menos de un mes lo comencé a aprendery confiezo que cuando llegué al concepto de promesas sentí que era un buen momento para entender todo lo que hemos aprendido hasta el momento de manera profunda. por eso hoy publico este tutorial, no hay menor forma de aprender algo que explicarlo a tu manera.
Funciones prototipo / constructoras : es una función que entiende como parametros las características de un objeto , cada vez que se ejecuté, un nuevo objeto será creado.
functionnadador(nombre,altura,peso){
this.nombre=nombre
this.altura=altura
this.peso=peso
}
¿QUÉ ES this ?
Es un apuntador, pero lo importante es saber hacia ¿DÓNDE? apunta.
resulta que this siempre apuntara a su padre más cercano, que en este caso es nadador y sus parametros.
var Nadador1 = new nadador('Sofia',1.73,52)
.prototype : nos ayuda a traer las características que estan dentro de nuestra función prototipo para poderlas usar en un método
nadador.prototype.presentarse = function(){
console.log(`Hola me llamo ${this.nombre}`)
}
¿QUÉ PASARÍA si esta función fuera un Arrow functión ?
Los Arrow function se caracterizan por dirigir el contexto de la función al objeto inmediatamente anterior.
Sé que esto suena SUPER extraño y complejo pero tranquilo lo vas a entender, sólo que antes tengo que refacturar nuestro métodopresentarse
Un REFACTOR o refactorización : No es nada más que escribir el codigo de una manera más legible y precisa sin alterar su funcionamiento.
PERO CUIDADO ! entre más vayas aprendiendo, tus refacturizaciones aumentaran de nivel y complejidad, por eso nunca olvides esto.
HAZLO SIMPLE … ¡PERO A LA VEZ LEGIBLE !
nadador.prototype.presentarse =
function(nombre){ //espero el nombrevar {nombre} = this//desestructuro el objeto this.nombreconsole.log(`Hola me llamo ${nombre} `)
//utilizo mi linda variable
}
nadador.prototype.presentarse =
function(nombre){
var {nombre} = thisconsole.log(`Hola me llamo ${nombre} y soy ${this}`)
}
vemos que this resulto ser un objeto dentro de otro objeto, y es presisamente lo que es, sólo tengamos encuenta que object es el objeto padre, que vendría hacer nuestro script.
y entonces…
¿QUÉ tenemos despues de nuestro script o objeto padre ?
Pues aquí es donde un Arrow function nos ayudaría, gracias a su virtud de contextualizar nuestra función en el objeto inmediatamente anterior, cambiemos nuestra función a una arrow y veamos !
nadador.prototype.presentarse =
(nombre) => {
var {nombre} = thisconsole.log(`Hola me llamo ${nombre} y soy ${this}`)
}
pasarón dos cosas:
Sofia ya no está definida !!! y es porque porque nuestra función ya no apunta al prototiponadador ahora, y gracias al Arrow Function estamos sobre el objeto padre
Ahora sabemos que lo unico más grande que el objeto padre(script) es window que vendría a ser nuestro HTML y por ende nuestro bonito DOM
HERENCIA EN JAVASCRIPT
Pasaré directamente a explicar la forma de hacer herencias que nos proporciona EMAScript
pues resulta que con EMAScript es casi un juego de niños hacer herencia entre clases
¿QUÉ ES una clase?
Es un prototipo que puede contener sus propios métodos
//con EMAScriptclassNadador{
constructor(nombre,altura,peso){
this.nombre=nombre
this.peso=peso
this.altura=altura
}
presentarse(nombre){
var {nombre} = thisconsole.log(`Hola, me llamo ${nombre}`)
}
esto es el equivalente a tener esto
//normalfunctionNadador(nombre,altura,peso){
this.nombre=nombre
this.peso=peso
this.altura=altura
}
Nadador.prototype.presentarse =
function(nombre){
var {nombre} = thisconsole.log(`Hola, me llamo ${nombre}`)
}
Ahora estamos listos para crear nuestra clase heredada .
Así que digamos que necesitamos crear la clase SalvaVidas que comparta las mismas carasteristicas basicas de Nadador, pero que agregué resistencia Pulmonar en su acronimo resP
classSalvaVidasextendsNadador{
constructor(nombre,altura,peso,resP){
super(nombre,altura,peso,resP)
}
extends : nos permite señalar a nuestra clasePadre, en este caso SalvaVidas es la claseHijo que elige como su clasePadre a Nadador
super() : SUPER-PONE el Constructor() de SalvaVidas{} al Constructor() de
Nadador{}
classSalvaVidasextendsNadador{
constructor(nombre,altura,peso,resP){
super(nombre,altura,peso,resP)
}
presentarse(nombre){
var {nombre} = this
console.log()
}
Y listo! ya tenemos nuestras dos clases , una heredada de la otra con dos métodos que se llaman igual, pero que hacen cosas distintas.
FUNCIONES COMO PARÁMETRO
Puede llegar a ser útil crear una función que se ejecute
Se me ha olvidado el ultimo tema sobre funciones !
FUNCIONES COMO PARAMETRO
Queremos agregar una función como parámetro que evalué el puntaje del jugador y nos diga si es un Jugador experto o no, para ello :
agregamos la función al método saludar dentro de la clase Jugador
NOTA : hay valores que al ser puestos dentro de un if y evaluados como una condición tan true o false
FALSE
null
0
false
string vacío
TRUE
objeto {}
1
función
string
saludar(fn){ var {nickname,score} = this// desestructuramos Thisconsole.log(`Soy ${nickname} y obtuve ${score}`) if(fn){ //preguntamos si sí llego la función fn(nickname,score) // ejecutamos y enviamos los parametros que necesita } }
functionevaluar(nickname,score){if(score >= PUNTAJE_GANADOR){ console.log(`Eres un Jugador experto !`) }else'{ console.log(`Gracias por jugar`) }
Invocamos el método con el parametro/función y listo !
tenemos una función que hace dos cosas al tiempo
jugador1.saludar(evaluar)
Buen tuto! Dejando en claro ademas ES5 vs ES6
Gracias!
very good, amigo
Hola, corrijanme si me equivoco, por lo que tengo entendido. Si a la clase hijo le queres agregar un constructor mas, simplemente se hace
classSalvaVidasextendsNadador{ constructor(nombre,altura,peso,resP){ super(nombre,altura,peso) this.resP = resP }
Y no
classSalvaVidasextendsNadador{ constructor(nombre,altura,peso,resP){ super(nombre,altura,peso,resP) }
De lo contrario, al querer completar resP, nos responderá undefined
¡Genial! ¿Sabes qué es una función en matemáticas? Se relaciona mucho con las funciones de programación.