El contexto de las funciones: quién es this

Clase 26 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase explicamos por qué al introducir el arrow function salió un error. El error del contexto de this en JavaScript es uno de los errores más comunes.

Recuerda que dentro de la arrow function, this está haciendo referencia al espacio global, a windows.

Daniel Muñoz Martín

student•

cómo explicar this en 5 min, gran trabajo Sacha 🙌🏻, quedan ahora todos los contenidos mucho más claro, incluso en menos tiempo 😊

Antonio Madrid

student•

Había olvidado por completo que tanto arrow functions como lambdas carecen de referencia this

Cristian Camilo

student•

Si a mi tambien se me habia olvidado lo mismoo

Jose L. Figueroa

student•

Window es el objeto global dentro del navegador.

Cuando this no es lo que esperamos, este es el principal error en JS.

En las Arrow functions, se asigna la función , pero cambia el this dentro de la función , ya que trata de tomar el this global, es decir, el que está fuera de la Arrow function.

Para comprobarlo en consola:

this === window

Carlos Gómez Mont

student•

Gracias!

Jorge Dueñas

student•

Excelente!

ANGEL DAVID SULBARAN CALDERON

student•

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.

Daniel Saavedra

student•

Gracias! Es muy util tu aporte. Y si al final del curso piensas compartir tu lista de apuntes ¿Me los podrias pasar? Lit yo veo las clases en mis tiempos libres (almuerzo y cena) y pues se me complica mucho el tema de tomar apuntes :c.

Grace Nikole Avarado

student•

Gracias por los apuntes :3

Juan Manuel Alberto Martin

student•

Muy buena. En el desafió anterior me quise hacer el canchero y lo hice con arroy function… Y cuando vi el video anterior me puse a probar de nuevo y vi el error jaja. Eso me pasa por probar solo un caso xD

Japheth Calzada López

student•

me pasa mucho eso

Alexander Henry Obispo Buendia

student•

igual a mi

Jorge Luis Vargas Ochoa

student•

Excelente explicación de Sacha, esto no se lo habia escuchado nunca a nadie, ahora veo la luz jajaaja

Matias Cariboni

student•

Jaja que tortura...hace horas que hago pruebas de por qué no me funcionaban las funciones dentro del objeto (ya que las pongo todas con arrow para acostumbrarme) y no seguía con los vídeos porque quería descubrir que había mal en mi código antes de seguir, y aquí me lo están dando masticado. Gracias por la explicación! ahora me queda todo más claro!

Sergio Maury

student•

en conclusion: no se puede usar prototipos en arrow functions

Gino Ureta

student•

al revés, no se puede usar arrow functions en prototipos.

Marco Antonio González Arellano

student•

Lo entendí como: "Dentro de una arrow function, this hace referencia al objeto window, y no al parámetro que es enviado a la función"

Roberto Bock

student•

Tengo la siguiente duda si tuviésemos una función

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

entonces el this si haría referencia a persona, que me parece a mi que es el objeto “superior” en la jerarquía de objetos…

lo que no estoy seguro es si hacer esto dentro de la función es válido, o si es la manera correcta de hacerlo, ya que hice lo siguiente

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

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

}

Persona2.prototype.soyAlto2 = function() {return this.altura > 1.8}

var roberto = new Persona('Roberto', 'Bock', 1.84)
var roberto2 = new Persona2('Roberto', 'Bock', 1.84)

y al imprimir la variable roberto, la función soyAlto me aparece como un atributo pero, en el protitpo no me sale nada, solo el constructor. Pero al imprimir la variable roberto2 la función soyAlto no me sale como atributo pero si en el prototipo.

Hay alguna implicación al hacerlo de una manera u otra?

José David Diaz Lora

student•

Facil, no uses las funciones flechas con this...

Nicolas Esteban Prieto Sarmiento

student•

++Nota:++ usar mas el debugger

Sebastián Pineda Duque

student•

¿Para qué sirve el debugger?

Daniel Páez

student•

Para solventar errores (“bugs” como dicen los programadores) deteniendo tu programa en la linea de codigo donde coloques el debugger y dandote herramientas para ver que sucede

Hace mucho más fácil la gestion por lo poco que he visto, en especial en ciclos

Ejemplos

//mientras 0 sea mayor a uno
while ( 0 > 1) 
{
//haz esto

document.alert("Holaaa")
debugger
}

/*
El codigo correra eternamente, 

Sin debugger la web recargaria para siempre y no podrias hacer nada y seria mas dificl ver el error, compruebalo tu mismo
*/

Daniel Páez

student•

Corrijo, era al reves la condicion

while ( 0 < 1) 
{
//haz esto

document.alert("Holaaa")
debugger
}

Carlos Alberto Orellana Soto

student•

Pasa que cuando hacemos referencia a "this" en una arrow function, estamos haciendo una referencia a un componente global. Es decir, si definimos una variable altura en un contexto global, la arrow function apuntara a ella. El el siguiente ejemplo, da verdadero. Slds

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

var altura = 2.5
Persona.prototype.esAlta = () => {
  return this.altura > 1.8
}

var carlos = new Persona('Carlos', 'Orellana', 1.82)

//Esto retorna true
carlos.esAlta()

Pablo Andres

student•

Resumen de la Clase
Contexto de funciones y keyword ‘this’

Al cambiar una función por un arrow function en el código nos comenzó a arrojar valores ‘undefined’.
Al debbuguear nos muestra que this === window y no es la persona
’this’ en el espacio global es el objeto ‘window’
**Los arrow function refieren siempre al ‘this’ del ‘window’ **y no del prototipo.

Javier Fuentes Mora

teacher•

jaja aqui esta la respuesta a mi pregunta de hace dos videos🤦‍♂️

Tomas Salina

student•

De la siguiente manera creo que pude entenderlo... En las "arrow function" 'this' hace referencia al scope globlal, es decir a las variables globales, mientras que en "function" 'this' hace referencia al prototipo que le indiquemos.

// Este this hace referencia al objeto Persona
Persona.prototype.saludar = function() {
  console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`);
}


//Este this hace referencia al scope global
Persona.prototype.soyAlto = () =&gt; {
  return this.altura &gt; 1.8
}


var altura = 1.81
// sacha.soyAlto() ---&gt; true```

Juan Romero

student•

Pero esto significa que no es recomendable usar las arrow functions cuando se crean objetos (usando la propiedad prototype)? O existe alguna forma de hacerle saber a las arrow functions el this que necesitamos.

Marcelo Gustavo Baez

student•

No es que sea o no recomendable, solamente debes saber si necesitas tener o no disponible el contexto de la función dentro de la misma. Cuando invocas this dentro de una arrow function, haces referencia al contexto del objeto window