acá están los apuntes de esta clase, intentare mejorarlos para simplificarlos y compartir con ustedes el documento word, al final de este curso para que tengan un complemento, recordar que esto debemos aprenderlo de memoria debido a que son los fundamentos, así que no solo te quedes con los videos, si no quieres tomar apuntes, acá los comparto contigo, lo importante es que siempre los leas y practiques bastante para crear una base solida.
EL CONTEXTO DE LAS FUNCIONES: Quien es this
Ahora bien, quedamos en la clase anterior en un error, ahora para solventarlo, vamos a analizar el código.
Siguiendo los procedimientos realizados en la anterior clase, lo que hicimos para que dejara de funcionar el código fue pasar la funcion a un arrow function. Por lo que para solventar esto usaremos una herramienta de la que obtuvimos conocimientos en clases anteriores, la cual es llamada “debugger”;
persona.prototype.soyAlto = () => {
debugger
return this.altura >= 1.80
}
Y trataremos de acceder a la función soy alto en la consola, que pasara aca, aca el código va a parar donde colocamos la opción debugger, allí echaremos un vistazo a “this” y nos mostrara que this es “window” y window es el objeto global dentro del navegador, aca están todos los atributos que están en window, entonces si nos fijamos en todo completo, es decir “this.altura” nos dira undefined por lo que undefined nunca va a ser igual a 1.80 por eso es que todas las personas que no son altas, esta condición nunca se va a dar.
Ahora ¿Qué es lo que pasa aca con las arrow funcitons?, primero que nada, esto de que this no es lo esperábamos que fuese es uno de los errores más comunes de javascript. Ahora vamos a lo que venimos, a explicar el porque;
persona.prototype.soyAlto = () => {
debugger
return this.altura >= 1.80
}
Acá como podemos observar esta arrow function, cumple con el primer objetivo, el cual es asignar la funcion, pero a su vez cambia el this dentro de la funcion, lo que hace es que this va a puntar al valor del this que este fuera de la funcion, por lo que ya llegado a este punto y explicado lo anterior con la consola respecto a Window, este toma el valor de this en el espacio global, es decir toma el valor del this que es window y como le estamos diciendo que tome el valor de “this.altura” su valor será undefined porque el window no existe un valor asignado a “this.altura”
Por ello cuando usemos this, debemos usar funciones normales, o al menos por el momento, mas adelante veremos como solucionar realmente este problema o como trabajar aca con las arrow functions.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?