Funciones de flecha en JavaScript this

Las funciones de flecha en JavaScript nos brindan la posibilidad de escribir funciones sin utilizar la palabra clave function, pero mas all de la sintaxis, las funciones de flecha o arrow functions tienen algunas particularidades y diferencias de cuando creamos funciones de manera "tradicional".

Sintaxis

//Declaracin de funcinfunction sayHello() {  console.log("Hi")}//Expresin de funcinconst sayHello = function() {  console.log("Hi")}//Funcin de flechaconst sayHello = () => console.log("Hi")

Como mencion al inicio de este artculo, las funciones de flecha nos permiten crear funciones de una manera mas compacta en algunos casos, ahora hablemos de sus diferencias y algunas limitaciones.

This y Funciones de flecha

Una de las diferencias mas llamativas es cuando asociamos el concepto de this en JavaScript con las funciones de flecha.

Como this determina su valor?.

La palabra clave this y su valor dependen del contexto de ejecucin o como se invoca determinada funcin o mtodo en JavaScript.

Aprendiendo este concepto (this keyword) yo tambin estaba confundido como la imagen mas arriba , pero no te preocupes espero que con este artculo despejes tus dudas.

En los navegadores el valor de this ejecutndose en un contexto global es el objeto window.

console.log(this === window) // true

En una funcin

Cuando utilizamos this dentro de una funcin, su valor depende del contexto de ejecucin de la funcin.

function sayHello() {  console.log(this)}sayHello() *contexto de ejecucin global// Window {...}

En un objeto declarado

Al utilizar this dentro de un mtodo en un objeto declarado, el valor de this ser el del objeto en el que se est llamando el mtodo.

const nameObj = {  name: "Alfredo",  getUserName: function () {    console.log(this)  }}nameObj.getUserName()// {name: 'Alfredo', ...}

En este ejemplo a continuacin, el valor de this se determina de acuerdo a su referencia mas cercana.

const nameObj = {  name: "Alfredo",  nested : {    lastName: "Moscoso",    getUserName: function () {      console.log(this);    },  }};nameObj.nested.getUserName()//{lastName: 'Moscoso', ...}

Como podemos ver su valor depende del contexto de ejecucin del mtodo.

En una funcin constructora

Si trabajamos con una funcin constructora y la palabra clave new su valor est vinculado al nuevo objeto que se est creando.

function Car(model, year) {  this.model = model;  this.year = year;}const ford = new Car("Ford", "1970")console.log(ford.year) // 1970const chevrolet = new Car("Chevrolet", "1956")console.log(chevrolet.year) // 1956

En los mtodos call, apply y bind

Con los mtodos de funciones call y apply podemos enlazar el valor de this dentro de una funcin a un objeto.

call()

const nameObj ={  name: "Alfredo"}function getUserName(lastName) {  console.log(`${this.name} ${lastName}`)}getUserName.call(nameObj, "Moscoso")//Alfredo Moscoso

apply()

const nameObj ={  name: "Alfredo"}function getUserName(lastName) {  console.log(`${this.name} ${lastName}`)}getUserName.apply(nameObj, ["Moscoso"])//Alfredo Moscoso

bind()

En el mtodo bind tambin podemos enlazar un valor de this con un objeto, la diferencia es que el mtodo bind crea una nueva funcin que podemos llamar luego.

const nameObj ={  name: "Alfredo"}function getUserName(lastName) {  console.log(`${this.name} ${lastName}`)}const user = getUserName.bind(nameObj, "Moscoso")user()//Alfredo Moscoso

Ms informacin sobre estos mtodos.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Ahora que ya vimos algunos ejemplos y como this modifica su valor, veamos como se comportan las funciones de flecha y la palabra clave this.

This en una funcin de flecha

const nameObj = {  name: "Alfredo",  getUserName: () => console.log(this)}nameObj.getUserName() // ???

Cual crees ser la salida del cdigo ?

La salida de este cdigo es la siguiente, el window object.

// Window {...}

Esto ocurre porque las funciones de flecha no tienen un this atado a ellas o no predeterminan this al alcance de Window, estas se ejecutan en el alcance en que fueron creadas.

En este ejemplo el mtodo getUserName() est retornando una funcin de flecha, como estas funciones no tienen su propio this, el valor de this es el del mbito adjunto, el del mtodo getUserName() y como estamos utilizando una funcin "tradicional" en el mtodo getUserName(), this tendr el valor del objeto nameObj.

const nameObj = {  name: "Alfredo",  getUserName: function () {    return () => console.log(this)  }}const inside = nameObj.getUserName()inside() //{name: 'Alfredo', ..}

O con este ejemplo, donde la funcin de flecha del mtodo setInterval se est ejecutando en el contexto de la instancia count.

function IncreaseCount(count) {  this.count = count  setInterval(() => {    console.log(this.count += 1)  }, 1000);}const count = new IncreaseCount(30)//31//32//...

A diferencia de este caso donde se utiliza una funcin "tradicional" dentro del mtodo setInterval() y como esta se ejecuta en el mbito global, la salida no es la esperada.

function IncreaseCount(count) {  this.count = count  setInterval(function () {    console.log(this.count)  }, 1000);}const count = new IncreaseCount(30)// undefined

Como te habrs dado cuenta las funciones de flecha no es solo una sintaxis mas corta sino que su comportamiento es diferente a una funcin tradicional.

Algunas consideraciones.

• No utilices funciones de flecha en mtodos de objeto.
• No utilices funciones de flecha como constructores.
• No utilices funciones de flecha con los mtodos call, apply o bind.
• Las funciones de flecha no tienen una propiedad prototype.

Espero este post haya aclarado tus dudas sobre como funciona this en JavaScript y las funciones de flecha.

Tu feedback es de mucha ayuda para mi

Conectemos en twitter
https://twitter.com/JairDevep

Nos vemos pronto!