Fonction flèche vs fonction régulière en JavaScript. Lequel utiliser ?

JavaScript nous offre deux manières principales de définir des fonctions : les fonctions fléchées et les fonctions régulières. Bien qu'ils puissent sembler similaires à première vue, il existe certaines différences clés qui peuvent avoir un impact sur la façon dont votre code s'exécute et sur la façon dont vous le structurez. Décomposons ces différences afin que vous puissiez mieux comprendre quand utiliser chaque type.

Différences de syntaxe

Les fonctions fléchées sont plus courtes et utilisent un => symbole. Voici à quoi ils ressemblent par rapport aux fonctions classiques :

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Avec une fonction fléchée, vous pouvez ignorer le mot-clé return si vous renvoyez une seule expression. Cela rend les fonctions fléchées populaires pour les fonctions plus courtes et plus simples.

cette liaison

Dans les fonctions régulières, cela fait référence à l'objet qui appelle la fonction. Cependant, les fonctions fléchées n’ont pas leur propre contexte. Au lieu de cela, ils héritent de cela du code environnant où ils sont définis.

Voici un exemple pour montrer comment cette différence affecte le comportement :

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

Cela peut être utile lorsque vous transmettez une fonction aux écouteurs d'événements, jetez un œil :

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

objet arguments

Les fonctions régulières ont accès à l'objet arguments, qui contient tous les arguments transmis à la fonction. Les fonctions fléchées n'ont pas cela ; ils utilisent des paramètres de repos ...args à la place.

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

Utilisation dans les rappels

Les fonctions fléchées peuvent simplifier votre code, en particulier lorsqu'il s'agit d'éléments nécessitant des callbaks - par exemple des promesses ou des méthodes de tableau comme .map() et .filter().

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

Quand utiliser les fonctions fléchées par rapport aux fonctions régulières

En général, les fonctions fléchées fonctionnent bien pour :

• Fonctions courtes et concises comme dans les méthodes de tableau ou les rappels
• Situations où cela devrait rester cohérent, comme les méthodes ou les fermetures en classe

Les fonctions régulières sont utiles lorsque :

• Vous avez besoin d'une liaison this spécifique, comme dans les méthodes objet ou les écouteurs d'événements
• Vous souhaitez utiliser l'objet arguments sans définir de paramètres de repos

Remarquons ici quelque chose d'intéressant. Comme vous pouvez le constater, les différences sont assez subtiles. Dans la plupart des cas, peu importe celui que vous choisissez, à moins que votre base de code n'en fasse un usage intensif ou des arguments (peu probable).

L'essentiel est que choisissez simplement celui que vous préférez, soyez simplement cohérent dans l'ensemble de votre projet.

Êtes-vous d'accord avec cette approche ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!