This, _this y los arrow functions

Clase 18 de 51 • Fundamentos de JavaScript 2017

Resumen

This hace referencia a un objeto y su valor depende de donde lo usemos, por ejemplo

class Persona {
  constructor(nombre, amigos = []) {
    this.nombre = nombre
    this.amigos = amigos
  }
}

const sacha = new Persona("Sacha", ["pedro", "juan", "pepe"])

Agustín Emanuel Soria

student•

Por si alguno lo necesita, aquí el profesor de Platzi, Yeison Daza explica un poco más de que va esto de “this”

entendiendo this en javascript

Ernesto Colmenarez

student•

Excelente artículo, super recomendado para profundizar un poco más en el uso del this

Luis Vegas

student•

Muchas gracias por compartir!

Juan Alberto Gonzalez de la Cruz

student•

En resumen:

class Persona{
  constructor(nombre,amigos=[]){
      this.nombre=nombre;
      this.amigos=amigos;
  }

  listarAmigos(){
    /*Aqui this se esta llamando por cada uno
    de los amigos entonces this dentro del forEach
    no recuerda que es la persona que nos devolvio el
    constructor*/
    this.amigos.forEach(function (amigo) {
    console.log("Hola, mi nombre es: "+
    this.nombre+" y soy amigo de "+amigo);
    });
      /*Error "this.nombre"
      VM222:18 Uncaught TypeError: Cannot read property 'nombre' of undefined
      at <anonymous>:18:11
      at Array.forEach (<anonymous>)
      at Persona.listarAmigos (<anonymous>:16:30)
      at <anonymous>:1:6*/

    /*La primera solucion es una referencia,
    poner otro nombre para que en el scope
    de esta funcion podemos accederla ai*/
    const _this=this;
    this.amigos.forEach(function (amigo) {
    console.log("Hola, mi nombre es: "+
    _this.nombre+" y soy amigo de "+amigo);

    /*la segunda solucion es usando El método bind()
    crea una nueva función, que cuando es llamada,
    asigna a su operador  this el valor entregado,
    con una secuencia de argumentos dados
    precediendo a cualquiera entregados cuando la
    función es llamada. */
    this.amigos.forEach(function (amigo) {
    console.log("Hola, mi nombre es: "+
    this.nombre+" y soy amigo de "+amigo);
    }.bind(this));

    /*La tercera solucion es usando
    los arrow functions el this.nombre , javaScript hace
    el ".bind" automaticamente
    */
    this.amigos.forEach((amigo) => {
    console.log("Hola, mi nombre es: "+
    this.nombre+" y soy amigo de "+amigo);
    });
  }
}

const juan = new Persona("Juan",["Pedro","Richar","Pepe"]);```

José Ignacio Mansilla Lobos

student•

Muchas gracias ❤️

Miguel Angel Espeso Alvarez

student•

Buena explicación…

Victor Alfonso Caballero Cabrera

student•

wow , creo que repetiré este vídeo unas cuantas veces.

Filiberto Santillán

student•

Gente, si tienen problemas con this, les dejo el siguiente artículo para que lo entiendan un poco mejor:
https://platzi.com/fundamentos-javascript/tutoriales/this-en-diferentes-situaciones-y-su-comportamiento/

Yesica Lizeth Cortés Pineda

teacher•

Muy Bien, gracias por el aporte

Joaquin Garcia Real Joya

student•

Para aquellos que no entienden this

Hola amigos, para todos aquellos que no terminaron de entender this del todo, aquí les dejo una explicación para que lo puedan entender mejor.

This no hace referencia a la función o en el scope en donde es usada, sino hace referencia al objeto en donde la función se ejecuta y depende totalmente del call-site (Aqui les dejo un link por si no están seguros de que es un call-site o call-stack https://medium.com/@anjalisharma0626/what-is-call-site-of-a-function-8e5d9881c49e ) de la función.

Enseguida les dejo un par de ejemplos para que se pueda entender mejor:

‘’’

function whatIsThis() {
console.log(this) // [object Window]
}
whatIsThis()

‘’’

O en un ejemplo un poco más entendible:

‘’‘
function whatIsThis() {
console.log(this.cat) // Perliwinkys
}
let cat = ‘Perliwinkys’
whatIsThis()
’’’

Para algunas personas que vienen de otros lenguajes como Java, este es un comportamiento algo extraño , ya que generalmente this, en esos lenguajes, simplemente hace referencia a la función en donde se encuentra, pero en Javascript funciona diferente, ya que “cat” está siendo declarado en el objeto global, por la tanto se puede acceder con una propiedad en el. Si miramos el call-site de la función nos daremos cuenta que no hemos llamado a un objeto explicitamente, así que hará referencia al objeto global (Al menos que estemos en el Strict Mode, porque en ese momento el contexto global se vuelve undefined).

Ahora es importante mencionar que this hace el binding de tres diferentes maneras: De forma default, de forma implícita y de forma explicita.

Como vimos en el ejemplo de arriba, es básicamente como funciona de manera default.

Implicita

El Implicit binding ocurre cuando la “notación de punto” es usado para invocar una función. Ejemplo:

‘’‘
const cat = {
name: Perliwinkys’,
greet() {
console.log(‘Hey my cat name is ’ + this.name)
}
}
person.greet() // Hey my cat name is Perliwinkys
’’’

En el implicit binding, lo que sea que este al lado izquierdo del puntó se convierte en el contexto para this en la función.

Para el explicit binding ocurre cuando .call(), .apply() y .bind() son usados en una función. En este caso Sacha explico para que servia .bind(), asi que explicare brevemente, solo como funciona .call() y .apply().

Call()

Para .call() pasaremos el contexto que queramos que tenga “this” juntos con algunos parámetros:

myFunc.call(thisContext, param1, param2, … );

Ejemplo:

‘’’

let cat = { name: ‘Perliwinkys’, myFavoriteFood: ‘mangos’ };
MyObject.prototype.doStuff.call(cat, cat.myFavoriteFood); // ‘Perliwinkys los mangos!’;

‘’'
Apply()

.apply() es casi lo mismo, excepto que debemos pasar un array de parámetros después de nuestro contexto.

myFunc.apply(thisContext, [param1, param2, …]);

Espero este pequeño aporte les ayude a entender un poco más This, y a la vez les saque más dudas sobre como funciona completamente this para que tengas más ganas de aprender un poco más.

Aquí abajo les dejo una serie de artículos y videos que les pueden servir para entender this y así mismo entender en donde es en donde puede fallar:

A different way of understanding this in JavaScript: http://2ality.com/2017/12/alternate-this.html

Understand JavaScript’s “this:” With Clarity, and Master It http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

Gentle explanation of ‘this’ keyword in JavaScript: https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

Understanding JavaScript: This Keyword: https://hackernoon.com/understanding-javascript-the-this-keyword-4de325d77f68

Bind and this - Object Creation in JavaScript: https://www.youtube.com/watch?v=GhbhD1HR5vk&t=335s

THIS keyword - Beau teaches JavaScript: https://www.youtube.com/watch?v=eOI9GzMfd24

This Keyword In Javascript Explained: https://www.youtube.com/watch?v=y9Zc3NxmC1w

Espero esto les sirva de ayuda a entender un poquito más Javascript 😃. No olviden comentar si me falto algo o me equivoque en algo, lo agradecería mucho y espero que todos podamos ayudarnos un poco más en esto.

Saludos a todos y suerte en las aguas profundas de Javasript

Alberto D. Sosa

student•

Diste en el clavo desde el segundo párrafo, muy buen aporte 😉

Juan Diego Silva Garcia

student•

Este clase de información despeja las dudas de cualquiera, en especial este articulo **Understand JavaScript’s “this:” With Clarity, and Master ** Explica como si estuviéramos aprendiendo a hablar

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio con el avance del curso

Repositorio

en el están los ejercicios realizados en clases comentados, ademas de mis notas personales

/*This, _this
el contexto en javascript lo determina el this. y este objeto puede almacenar distintos valores dependiendo del contexto en el que se encuentre
para representar esto crearemos una clase persona, y un metodo que liste a nuestros amigos
*/

class Persona{//creamos la clase persona
  constructor(nombre, amigos = []){//creamos el constructor de nuestra clase persona
    this.nombre = nombre//usamos this para decirle que este nombre es iguala nombre
    this.amigos = amigos//hacemos lo mismo con amigos le decimos, este amigo, en este contexto es igual a amigos
//usamos el this para referirnos al contexto en el cual nos encontramos
  }

  listarAmigos(){//creamos la funcion listar amigos, que recorre el array de amigos y los imprime con console.log()
    const _this = this//guardamos el valor de this, para poder usarlo dentro del foreach
    this.amigos.forEach(function(amigo){//this en este contexto hace referencia al objeto persona, y con el punto
      //le decimos que acceda a la propiedad amigos de este objeto, por lo cual en el contexto del foreach this = a amigos
      console.log(`Hola mi nombre es ${_this.nombre} y soy amigo de ${amigo}`)
/*Si usamos directamente el this para acceder a la propiedad nombre tendremos un error, esto es devido a que en el contexto
del foreach this es igual a amigos, para solucionar esto guardamos el valor de this en una variable y luego usamos esta variable*/
    })
  }

//Existen otras formas de realizar esto sin guardar ek valor de this en una variable por ejemplo usando bind() o arrow Functions

listarAmigos2(){//creamos la funcion listar amigos, que recorre el array de amigos y los imprime con console.log()
  this.amigos.forEach(function(amigo){//this en este contexto hace referencia al objeto persona, y con el punto
    //le decimos que acceda a la propiedad amigos de este objeto, por lo cual en el contexto del foreach this = a amigos
    console.log(`Hola mi nombre es ${this.nombre} y soy amigo de ${amigo}`)
  }.bind(this))
  /*cuando usamos bind, como segundo parametro del foreach, le estamos diciendo que use el this, que esta en el contexto del objeto
  dentro de la funcion. es decir, si usamos bind enviamos el this que tiene como valor el objeto persona al interior de la funcion*/
}

listarAmigos3()
  this.amigos.forEach((amigo)=>{//si remplazamos la funcion del foreach por un arrow function no es necesario agregar el bind
    //ya que este viene implicito en las arrows Function
    console.log(`Hola mi nombre es ${this.nombre} y soy amigo de ${amigo}`)
    })
  }
}



const alexis = new Persona("alexis",["valentina", "bastian","agustin"])//creamos una nueva instancia de la clase pesona

alexis.listarAmigos()//llamamos al metodo listarAmigos desde la instancia recien creada

alexis.listarAmigos2()

alexis.listarAmigos3()

/*
funciones
-> foreach() foreach es una funcion que ejecuta una funcion por cada elemento del array

-> bind() esta funcion trae al scope local de una funcion el contexto externo del this, y nos permite usar ese contexto dentro de la funcion
*/

Diego Aguila Cassina

student•

Gracias. Me ayudo bastante tu explicación.

Nathaly Stefani Riaño Bejarano

student•

Excelente aporte, gracias por compartir!
(Si no estoy mal, forEach y bind son métodos, no funciones)

ABRAHAN CHOQUENAIRA TTITO

student•

Hola cual seria la solución para este contexto ?

persona = {
  nombre:'juan',
  apellido:'perez',
  saludar : saludar => saludarInterno => console.log(`hola me llamo ${this.nombre} ${this.apellido}`)
  }
  
var saludar = persona.saludar();
saludar();
// salida : hola me llamo undefined undefined```

Jersson Mendoza Linares

student•

interesante tu pregunta también me importaría saber la respuesta

David Santiago González Ramos

student•

Muy interesante tu pregunta, logré solucionarlo cambiando las arrow functions por las funciones de toda la vida. Sin embargo la verdad no entiendo por qué funciona con las funciones normales y no con las arrow functions. Se supone que debería funcionar con las arrow functions. Te dejó el código:

juan = {
  nombre:'Juan',
  apellido:'Perez',
  saludar: saludar = function() {  
  	console.log(`Hola me llamo ${this.nombre} ${this.apellido}`);
  }
}
juan.saludar()  

//Acá cambia la forma en la que se declara el método pero a fin de cuentas es lo mismo	
// juan = {
//   nombre:'juan',
//   apellido:'perez',
//   saludar: function saludar() {
//   	console.log(`Hola me llamo ${this.nombre} y mi apellido es ${this.apellido}`);
//   }
// }
  
// juan.saludar()

Julio J Yépez

student•

Muchos de los conflictos con this en las preguntas del foro creo que tienen que ver con que est[an definiendoa Persona como un objeto JSON y no como un prototipo / clase … pareciera igual pero no lo es.

Omar Gaston

student•

Yo las usaría mas en este orden de prioridad:

Arrow functions
Bind
_This

Miguel Márquez Serrano

student•

Esto rueda sin los _this o los .bind…

<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<title>this</title>
<script type='text/javascript'>

class Persona {

  constructor(nombre, amigos = []) {
    this.nombre = nombre
    this.amigos = amigos
  }

  listadoAmigos(){
    this.amigos.forEach((amigo) => console.log(`Hola, mi nombre es ${this.nombre} y soy amigo de ${amigo}`))
  }
} // fin clase Persona

const miguel = new Persona('Miguel', [ 'Pedro', 'Juan', 'Pepe' ])

miguel.listadoAmigos()

</script>
</head>
<body>
</body>
</html>

Noe Mikhael Huaccharaque Ruiz

student•

bind funciona para hacer referencia fuera de la funcion (scope), cuantos parametros puedo declarar en bind? y que acepta y que no.?

Diego Forero

Team Platzi•

Aquí tienes la documentación oficia, se le pueden pasar varios argumentos https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Franklin Rony Cortez Barrera

student•

No me queda del todo claro cual es la diferencia entre una clase y un prototipo? y en todo caso por que en js se defienden con la palabra reservada class

Franklin Rony Cortez Barrera

student•

Inceible explicacion,en conclusion,si entendi bien, el prototipo si puedo agregar mas atributos y metodos a una instancia,mientras que con la clase,tal como en Java, no se pueden agregar mas popiedades y metodos a las instancias derivadas de una clase.
Por,eso me parecia un poco extraño que agregaban mas metodos a las instancias,sin que estos hubiesen sido definidos en su prototipo.

Con lo ultimo,usando la palabra class en js,sigue siendo un protipo?

Diego Forero

Team Platzi•

JavaScript no es un lenguaje Orientado a Objetos con prototipos se puede por decir de alguna forma emular una clase al igual que al crear una clase con la palabra reservada class, por esto todo sigue siendo un prototype.

Mario Ruano Fernández

student•

Hola! Tengo una duda respecto a _this.

¿Estamos hablando de los mismo cuando hablamos de that? Es otra forma de llamar a ese _this?

const that = this

Es que he visto eso del that y no he entendido muy bien su uso. Al ver esta lección no sé si se trata de dicho uso.

Gracias!

Kath Sánchez

teacher•

That también es una variable que puedes llamar tú igual que _this.

Juan Sáez García

student•

¿Entonces this no se recuerda cuando hay una función dentro de una función del objeto? o eso es lo que creo

Cristian Franco Bedoya

student•

class Persona {
  constructor(nombre, amigos = []) {
    this.nombre = nombre
    this.amigos = amigos
  }

  listarAmigos() {
    const _this = this
    this.amigos.forEach(function (amigo) {
      console.log(`Hola mi nombre es ${_this.nombre} y soy amigo de ${amigo}`)
      // console.log(`Hola mi nombre es ${this.nombre} y soy amigo de ${amigo}`)
    })
  }

  // BIND pasamos el this de la función externa
  listarAmigosBind() {
    this.amigos.forEach(function (amigo) {
      console.log(`Hola mi nombre es ${this.nombre} y soy amigo de ${amigo}`)
    }.bind(this))
  }

  // ARROW FUNCTION
  listarAmigosArrow() {
    this.amigos.forEach( (amigo) => {
      console.log(`Hola, mi nombres es ${this.nombre} y soy amigo de ${amigo}`)
    })
  }

}
 const cristian = new Persona("Cristian", [ "Jose", "Santiago", "Ramón"])

Iván Toro

student•

Los ejemplos de la clase:

class Person {
  constructor(name, friends = []){
    this.name = name
    this.friends = friends
  }
  friendsListError(){
    // Here 'this' is a object create
    this.friends.forEach(function (friendName){
      // Here 'this' is undefined, because into the function the scope
      // is different to the top
      console.log(this) // undefined
      console.log(`Hello, my name is ${this.name}. I'm friend to ${friendName}`)
    })
  }
  friendsList_this(){
     // Copy of 'this' to reference in the function context
    const _this = this
    this.friends.forEach(function (friendName){
      console.log(`Hello, my name is ${_this.name}. I'm friend to ${friendName}`)
    })
  }
  friendsListBind(){
    // bind(this) function define who is this in the function context
    this.friends.forEach(function (friendName){
      console.log(`Hello, my name is ${this.name}. I'm friend to ${friendName}`)
    }.bind(this))
  }
  friendsListArrow(){
    this.friends.forEach((friendName) => {
      console.log(`Hello, my name is ${this.name}. I'm friend to ${friendName}`)
    })
  }
}

var ivan = new Person('Ivan', ['Sebastian', 'Carolina', 'Luis'])

ivan.friendsList_this()
ivan.friendsListBind()
ivan.friendsListArrow()
ivan.friendsListError() // Uncaught TypeError: Cannot read property 'name' of undefined

Victor Riveros

student•

las arrow function hacen magia… 😄

Jesús Alberto Espinoza Fernández

company_admin•

Con forEch en JavaScript además del primer elemento que tenemos que es la estructura, tendremos un segundo elemento que es la posición o indice en el cual se encuentra el objeto dentro del array. De esta forma podemos desplegar en pantalla la posición del elemento

Juan Diego Silva Garcia

student•

Sasha se enredó un poquito al explicar la parte del porqué this no puede acceder en el 6:50 y es simplemente porque this no puede acceder a una función anónima.

El método forEach() es un closure y recordemos que los closures no pueden acceder al contexto de la función externa, this dentro de una función interna anónima no puede acceder al this de la función de la función externa.

Thony Nava

student•

Resumen de la clase

class Persona 
{
	constructor(nombre, amigos = [])
	{
		this.nombre = nombre
		this.amigos = amigos
	}

	listarAmigos()
	{
		const _this = this
		this.amigos.forEach(function (amigo)
		{
		console.log(`Hola, mi nombre es ${_this.nombre}, y soy amigo de ${amigo} `)	
		})		
	}
}

const thony = new Persona("Thony", ["Pedro","Juan","Pepe"])

thony.listarAmigos();

/*
Tambien podemos usar ".bind(this)" 
al final de los parametros de
".forEach" de manera que permita
enlazar "this" fuera de la funsión
*/

class Persona 
{
	constructor(nombre, amigos = [])
	{
		this.nombre = nombre
		this.amigos = amigos
	}

	listarAmigos()
	{
		this.amigos.forEach(function (amigo)
		{
		console.log(`Hola, mi nombre es ${this.nombre}, y soy amigo de ${amigo} `)	
		}.bind(this))		
	}
}

const thony = new Persona("Thony", ["Pedro","Juan","Pepe"])

thony.listarAmigos();

/*
También se puede usar una
"arrow function", y siendo
esto así, el "this" funciona
automaticamente como el "this"
fuera de esa "arrow function"
sin necesidad de usar ".bind(this)"
*/

class Persona 
{
	constructor(nombre, amigos = [])
	{
		this.nombre = nombre
		this.amigos = amigos
	}

	listarAmigos()
	{
		this.amigos.forEach((amigo) => {
		console.log(`Hola, mi nombre es ${this.nombre}, y soy amigo de ${amigo} `)	
		})		
	}
}

const thony = new Persona("Thony", ["Pedro","Juan","Pepe"])

thony.listarAmigos();

This, _this y los arrow functions

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial