Exemples de code qui expliquent en détail les différences et l'utilisation des fonctions ordinaires et des fonctions fléchées en JavaScript

Cet article présente principalement la différence et l'utilisation des fonctions ordinaires et des fonctions fléchées en JavaScript. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer<.>

On m'a posé une question récemment :

Quelle est la différence entre la fonction fléchée ( => ) et la fonction ordinaire ( function ) en JavaScript ?

Ce que je pensais à ce moment-là, c'était : Cette question est très simple~ (drapeau), et puis j'ai donné la mauvaise réponse...

Cela dans la fonction flèche n'a rien à voir avec le contexte quand il est appelé, et cela dépend du contexte quand il est défini

Ce n'est pas tout à fait la bonne réponse... même si ce n'est pas complètement faux non plus

cela dans la fonction flèche

Tout d'abord, il n'y a pas de mauvaise partie dans ma réponse : ceci dans la fonction flèche n'a rien à voir avec le contexte lorsqu'elle est appelée

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

Comme vous pouvez le voir sur cet exemple, il est vrai que la fonction flèche est après sa définition, cela ne changera pas, peu importe comment elle est appelée, cela ne changera pas

Mais à proprement parler, cela ne "dépend pas du contexte de définition", car la fonction flèche Elle ne lie pas du tout son propre this Lorsqu'elle appelle ceci dans une fonction flèche, elle recherche simplement vers le haut le long de la chaîne de portée pour trouver. le plus proche et utilisez-le ;

En termes d'effet, c'est le même que le mien. Il n'y a pas beaucoup d'écart par rapport à la compréhension précédente, mais leur essence est complètement différente. La fonction flèche n'ajoute pas la fonctionnalité des fonctions ordinaires. cela n'est pas affecté par le contexte d'appel, mais réduit de nombreuses fonctionnalités

Les fonctions fléchées sont en fait des fonctions plus simples

En fait, ce n'est pas le cas ; juste cela qui est différent des fonctions ordinaires dans les fonctions fléchées. Il n'y a rien d'automatique de tel dans les fonctions fléchées. Les variables locales liées incluent : this, arguments,

super(ES6), new. target(ES6)...

Emprunter un exemple à d'autres :

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

Dans les fonctions ordinaires, diverses variables locales seront automatiquement liées. Les fonctions fléchées sont très simples à rechercher vers le haut le long du chemin. chaîne de portée...

Voici à quoi ressemblent les fonctions fléchées Une chose simple et pure ;

Je pense donc personnellement que les fonctions fléchées sont plus adaptées à la programmation fonctionnelle

Programmation. En plus d'être plus courtes, les fonctions fléchées sont également plus difficiles à utiliser pour les variables qui ne sont pas explicitement déclarées, ce qui vous amène à produire des résultats de calcul inattendus

Les fonctions ordinaires peuvent donc atteindre l'objectif ; même effet que les fonctions fléchées ?

Si vous deviez simplement envisager de réparer ce type instable comme je l'ai fait à l'époque... ce serait très simple, il existe des méthodes couramment utilisées, comme celle-ci :

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

ou

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

Cependant, la deuxième méthode ne peut que corriger cette variable. Comme mentionné ci-dessus, les variables telles que les arguments dans les fonctions fléchées sont également trouvées dans la chaîne de portée. Pour obtenir un effet similaire, nous n'avons qu'une seule façon de redéfinir une variable locale, et babel utilise également cette méthode pour traiter les fonctions fléchées.

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

Alors... et si je veux utiliser des arguments dans une fonction fléchée ?

...Je pense que si vous avez ce besoin, il serait peut-être plus approprié d'utiliser une fonction ordinaire...

Mais cela ne veut pas dire que vous ne peut pas utiliser de fonctions fléchées similaires à

Tous les paramètres sont obtenus sous forme de tableau Nous pouvons utiliser l'opérateur d'expansion pour recevoir des paramètres, comme celui-ci :

.

const testFunc = (...args)=>{
  console.log(args) //数组形式输出参数
}

Il existe peut-être des scénarios dans lesquels cela doit être utilisé. Il existe différentes manières d'écrire, mais je pense toujours que les fonctions fléchées sont plus adaptées aux situations simples qui acceptent des paramètres fixes et renvoient un résultat de calcul

;

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!