Another One in - Retour aux sources ♻️ - ⬆️Arrow⬇️ Fonctions en Js

Fonctions fléchées - Ce sujet peut prêter à confusion pour de nombreux développeurs. Voici une explication simple des fonctions des flèches ainsi que quelques conseils à leur sujet :

Quoi ?

Les fonctions fléchées (=>) sont une syntaxe plus courte pour écrire des fonctions en JavaScript. Ils n'ont pas leur propre ceci, leurs arguments ou leur propre prototype, et ils adoptent ce contexte à partir de leur portée environnante.

Pourquoi ?

Les fonctions fléchées ont été introduites pour simplifier la syntaxe d'écriture des fonctions, en particulier pour les rappels en ligne. Ils facilitent également la gestion de cela en l'héritant lexicalement de la portée externe, éliminant ainsi le besoin de solutions de contournement bind ou self = this.

Quand ?

Utiliser les fonctions fléchées :

• Pour les rappels en ligne dans les méthodes de tableau (par exemple, map, filter, forEach), les écouteurs d'événements ou les chaînes de promesses.

• Lorsque vous avez besoin d'une portée lexicale de cela, comme dans des méthodes ou des rappels qui s'appuient sur le contexte environnant.

Cas d'utilisation :

• Rappels de tableau : array.map(item => item * 2)

• Gestionnaires d'événements dans React : onClick={() => this.handleClick()}

• Opérations asynchrones : .then(result => console.log(result))

Limites :

• Pas de contexte : ne peut pas être utilisé comme méthodes dans des objets s'ils ont besoin du leur.

• Objet sans arguments : pas idéal pour les fonctions qui ont besoin d'accéder aux arguments.

• Ne peuvent pas être utilisées comme constructeurs : les fonctions fléchées n'ont pas de prototype, elles ne peuvent donc pas être utilisées avec new.

Donc, la prochaine fois que vous écrirez du code avec une fonction fléchée, demandez-vous si c'est vraiment nécessaire dans cette situation ou si vous pouvez utiliser une fonction normale à la place. N’utilisez pas un seul style sans réfléchir. Comprenez les raisons de votre choix puis prenez votre décision.

Extrait ci-dessous qui explique pratiquement les choses ci-dessus.

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!