Todo sobre funciones

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.

• Utilicemos el prototipo nadador para crear un nuevo objeto/nadador

var Nadador1 = new nadador('Sofia',1.73,52)

• Ahora creemos una función/método utilizando el atributio .prototype para hacer que nuestros nadadores se presenten

.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
}

• AHORA SÍ ! entendamos por completo hacia dónde apunta this:
  para ello agreguemos a nuestro log el objeto this

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

• Crear una clase un EMAScript que contenga a 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{}

• PISAR Métodos : pisar un método es modificar su funcionamiento dentro de la clase pero conservando su nombre original.
  Hagamos que nuestro salvavidas se presente como tal.

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