Header Ads Widget

Ticker

6/recent/ticker-posts

Mejores prácticas de la función de flecha

 Cuando thisse usa en una función de flecha, thisserá el thisvalor en el ámbito léxico circundante.

Las funciones de flecha cambian MUCHAS cosas, por lo que hay dos mejores prácticas que debe conocer.

  1. No cree métodos con funciones de flecha
  2. Crear funciones métodos INISDE con funciones de flecha

Este artículo es un extracto de Learn JavaScript . Compruébelo usted mismo si este artículo le resultó útil.

Antes de leer esto

Si está confundido acerca de la thispalabra clave, intente leer este artículo . Puede ayudarlo a aclarar algunas confusiones con respecto a this.

Práctica n. ° 1: no cree métodos con funciones de flecha

Cuando utiliza la programación orientada a objetos, es posible que deba llamar a un método desde otro método. Para llamar a un método desde otro método, debe thisapuntar de nuevo a la instancia (que llamó al método).

Ejemplo:

Construyamos un Humancon un sayHimétodo. sayHidice Hi!, luego procede a terminar la conversación diciendo el nombre de la persona.

Podemos usar un getFullnamemétodo que devuelva el nombre completo de la persona que está dentro sayHi.

function Human (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Human.prototype.getFullname = function () {
  return this.firstName + ' ' + this.lastName
}

Human.prototype.sayHi = function () {
  console.log(`Hi! My name is ${this.getFullName()}`)
}

Una instancia puede usar el sayHimétodo y esperaría que funcione. Funciona porque thisapunta a la instancia.

const zell = new Human('Zell', 'Liew')
zell.sayHi()
Zell dice hola.

Observe lo que sucede si cambia sayHia una función de flecha.

Human.prototype.sayHi = _ => {
  console.log(`Hi! My name is ${this.getFullName()}`)
}

// ...
zell.sayHi()
Error, this.getFullname no es una función.

...

¿Por qué?

En este caso, thisinside sayHiapunta a WindowComo Windowno tiene un getFullNamemétodo, la llamada getFullNameresultará en un error.

thisapunta a Windowporque Windowes el thisvalor léxico es WindowPodemos verificar que thises Windowingresando la misma.

Human.prototype.sayHi = _ => {
  console.log(this)
  console.log(`Hi! My name is ${this.getFullName()}`)
}

// ...
zell.sayHi()
Esto es Windows.

En resumen: ¡No use las funciones de flecha para crear métodos!

Crear funciones DENTRO de métodos con funciones de flecha

thissiempre apunta a Windowcuando se usa en una función simple. La afirmación es verdadera incluso si crea una función simple dentro de un método.

const object = {
  this () {
    function sayThis () {
      console.log(this)
    }
    sayThis()
  }
}

object.this()
Esta es la ventana.

Por lo general, queremos thisser el objeto cuando usamos thisdentro de un método. (Entonces podemos llamar a otros métodos).

Una forma es asignar thisa otra variable. A menudo llamamos a esta variable selfthatLuego usaremos selfthatdentro de la función.

const object = {
  this () {
    const self = this
    function sayThis () {
      console.log(self)
    }
    sayThis()
  }
}

object.this()
Este es el objeto.

Otra forma es crear una nueva función con bind.

const object = {
  this () {
    function sayThis () {
      console.log(this)
    }
    const correctSayThis = sayThis.bind(this)
    correctSayThis()
  }
}

object.this()
Este es el objeto.

Si utiliza la flecha funciones, que no es necesario el uso selfthatbindPuede escribir la función de flecha directamente y thisapuntará al objeto (porque el thisvalor circundante es el objeto).

const object = {
  hello () {
    const sayThis = _ => {
      console.log(this)
    }
    sayThis()
  }
}

object.hello()
Este es el objeto.

Publicar un comentario

0 Comentarios