Expression de fonction VS déclaration de fonction en JS, parlons de leurs différences

En JavaScript, les déclarations de fonction et les expressions de fonction utilisent toutes deux le mot-clé function pour créer des fonctions. Pensez-vous qu'elles sont très similaires et peuvent être facilement confondues ? L'article suivant vous amènera à analyser les expressions de fonction et les déclarations de fonction, et à présenter les différences entre les expressions de fonction et les déclarations de fonction.

En JavaScript, le mot-clé function peut faire un travail simple : créer une fonction. Cependant, utiliser des mots-clés pour définir des fonctions permet de créer des fonctions avec des propriétés différentes.

Dans cet article, nous voyons comment utiliser le mot-clé function pour définir des déclarations de fonction et des expressions de fonction, et quelles sont les différences entre ces deux fonctions.

1. Expression de fonction vs déclaration de fonction

La déclaration de fonction et l'expression de fonction sont 2 façons de créer des fonctions à l'aide du mot-clé function.

À titre d'exemple pour illustrer la différence, nous créons deux versions de la fonction sommes :

function sumA(a, b) {
  return a + b;
}

(function sumB(a, b) {
  return a + b;
});

sumA(1, 2); // ???
sumB(1, 2); // ???

Essayez-le vous-même : https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2 /

En général, définissez les fonctions (sumA函数) comme d'habitude. Dans un autre cas, la fonction est placée entre parenthèses (sumB函数).

Que se passe-t-il si sumA(1,2) et sumB(1,2) sont appelés ?

Comme prévu, sumA(1, 2) renvoie 3. Cependant, l'appel de sumB(1, 2) lève une exception : Uncaught ReferenceError: sumB is not defined.

La raison est que sumA est créé à l'aide d'une déclaration de fonction qui crée une variable de fonction (avec le même nom que le nom de la fonction) dans la portée actuelle. Mais sumB est créé à l'aide d'une expression de fonction (en la mettant entre parenthèses) qui ne crée pas de variable de fonction dans la portée actuelle.

Si vous souhaitez accéder à une fonction créée à l'aide d'une expression de fonction, enregistrez l'objet fonction dans une variable :

// Works!
const sum = (function sumB(a, b) {
  return a + b;
});

sum(1, 2); // => 3

Fonction si l'instruction commence par la déclaration du mot-clé `function`, sinon une expression de fonction.

// 函数声明：以`function`关键字开头
function sumA(a, b) {
  return a + b;
}

// 函数表达式：不以`function`关键字开头
const mySum = (function sumB(a, b) {
  return a + b;
});

// 函数表达式：不以`function`关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { 
  return acc + number 
});

D'un point de vue général, les déclarations de fonction sont utiles pour créer des fonctions autonomes, mais les expressions de fonction peuvent être utilisées comme rappels.

Maintenant, nous examinons de plus près le comportement des déclarations de fonction et des expressions de fonction.

2. Déclaration de fonction

Comme vous l'avez vu dans l'exemple précédent, sumA est une déclaration de fonction :

// Function declaration
function sumA(a, b) {
  return a + b;
}

sumA(4, 5); // => 9

Lorsqu'une instruction A La déclaration de fonction se produit lorsqu'elle contient le mot-clé function, suivi du nom de la fonction, d'une paire de parenthèses (param1, param2, paramN) avec des paramètres et du corps de la fonction entouré d'une paire d'accolades {}. La déclaration de fonction

crée une variable de fonction : une variable portant le même nom que le nom de la fonction (par exemple, sumA dans l'exemple précédent). La variable de fonction est accessible dans la portée actuelle (avant et après la déclaration de la fonction), et même dans la portée de la fonction elle-même.

Les variables de fonction sont généralement utilisées pour appeler des fonctions ou pour transmettre des objets de fonction à d'autres fonctions (en passant à des fonctions d'ordre supérieur).

Par exemple, écrivez une fonction sumArray(array) qui accumule récursivement les éléments d'un tableau (le tableau peut contenir des nombres ou d'autres tableaux) :

sumArray([10, [1, [5]]]); // => 16

function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}

sumArray([1, [4, 6]]); // => 11

Essayez-le : https : //jsfiddle.net/dmitri_pavlutin/n7wcryuo/

function sumArray(array) { ... } est une déclaration de fonction.

Les variables de fonction sumArray contenant des objets fonction sont disponibles dans la portée actuelle : avant sumArray([10, [1, [5]]]) et après sumArray([1, [4, 6]]), la déclaration de fonction et la portée sumArray([1, [4, 6]]) de la fonction elle-même (les appels récursifs sont autorisés ).

En raison du levage, les variables de fonction sont disponibles avant que la fonction ne soit déclarée.

2.1 Notes sur la déclaration de fonction

La syntaxe de déclaration de fonction consiste à créer des fonctions indépendantes. Les déclarations de fonctions doivent être dans la portée globale, ou directement dans la portée d'autres fonctions :

// Good!
function myFunc1(param1, param2) {
  return param1 + param2;
}

function bigFunction(param) {
  // Good!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }

  const result = myFunc2(1, 3);
  return result + param;
}

Pour la même raison, cela n'est pas recommandé dans les conditions (if) et les boucles (while, for) Utilisez les déclarations de fonction :

// Bad!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}

myFunction(2, 3);

Utilisez des expressions de fonction pour une meilleure exécution de la création conditionnelle de fonctions.

3. Expression de fonction

L'expression de fonction se produit lorsque le mot-clé function crée une fonction (avec ou sans nom) dans un mode d'expression.

Ce qui suit est un exemple de fonction créée à l'aide d'une expression :

// Function expressions

const sum = (function sumB(a, b) {
  return a + b;
});

const myObject = {
  myMethod: function() {
    return 42;
  }
};

const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

crée deux types de fonctions dans une expression de fonction :

• if fonction dans une expression Sans un nom, comme function（）{return 42}, c'est une expression de fonction anonyme
• Si la fonction a un nom, comme sumB et le rappel dans l'exemple précédent, alors c'est une expression de fonction nommée

3.1 Remarques sur les expressions de fonction

Les expressions de fonction conviennent aux rappels ou aux fonctions créées comme conditions :

// Functions created conditionally
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}

// Functions used as callbacks
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

Si une expression de fonction nommée a été créée, veuillez noter que cette variable de fonction n'est disponible que dans la portée de la fonction créée :

const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});

console.log(callback); // ReferenceError: callback is not defined

试一试：https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/

callback是一个命名的函数表达式，因此callback函数变量仅在callback()函数使用域可用，而在外部则不可用。

但是，如果将函数对象存储到常规变量中，则可以在函数作用域内外从该变量访问函数对象：

const callback = function(number) {
  console.log(callback); // logs function() { ... }
};

const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }

试一试：https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/

4. 总结

根据使用function关键字创建函数的方式，可以通过两种方法来创建函数：函数声明和函数表达式。

留个问题： function sum(a, b) { return a + b } + 1 是函数声明还是函数表达式，可以在留言中说出你的答案。

英文文章地址：https://dmitripavlutin.com/javascript-function-expressions-and-declarations/

作者：Dmitri Pavlutin

更多编程相关知识，请访问：编程视频！！

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!