Fonctions fléchées vs fonctions régulières en JavaScript

En quoi les fonctions fléchées sont-elles différentes des fonctions régulières dans JS?


Les fonctions régulières sont les fonctions «old school» que nous utilisons depuis la création de JavaScript:

function run() {

}

Ils peuvent être exécutés directement:

run()

ou ils peuvent être affectés à une variable:

const run = function run() {

}

run()

Lorsque vous le faites, la fonction peutégalementêtre anonyme:

const run = function () {

}

run()

La seule différence est que maintenant, dans la trace de pile qui apparaît en cas d'erreur, vous ne verrez plus le nom de la fonction.

Les fonctions fléchées, introduites dans ES6 en 2015, sont un peu comme cette dernière version des fonctions régulières, car elles n'ont pas de nom. Jamais.

La syntaxe «encombrement» est plus petite:

const run = () => {

}

run()

Si nous avons un paramètre, nous pouvons omettre les parenthèses:

const run = param => {

}

run()

Et si nous n'avons qu'une seule instruction, nous pouvons également omettre les accolades:

const run = param => 'running'
run()

Dans ce cas, la valeur de retour est la chaîne'running'.

Les fonctions fléchées et les fonctions régulières peuvent être utilisées comme méthodes objet.

Vient maintenant la plus grande différence entre ces 2 fonctions, et elle est liée à la façon dontthisest lié dans une méthode.

Prenons cet exemple:

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(`Started ${this.brand} ${this.model}`)
  },
  stop: () => {
    console.log(`Stopped ${this.brand} ${this.model}`)
  }
}

thisdans lestart()méthode fait référence à l'objet lui-même.

Mais dans lestop()méthode, qui est une fonction de flèche, ce n'est pas le cas.

thisn'est pas lié à l'instance d'objet. Cela montre ce quethispointe vers dans la portée externe.

Cela implique queles fonctions fléchées ne conviennent pas pour les méthodes objetquand tu veux accéderthis.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: