Une brève discussion sur la différence entre les expressions de fonction javascript et les compétences de déclaration de fonction_javascript

Il existe deux manières de déclarer des fonctions en JavaScript : la déclaration de fonction et l'expression de fonction.

Les différences sont les suivantes :

1). Pour les fonctions définies par déclaration de fonction, le nom de la fonction est obligatoire, tandis que le nom de la fonction de l'expression de la fonction est facultatif.

2). Pour les fonctions définies par déclaration de fonction, la fonction peut être appelée avant la déclaration de fonction, tandis que la fonction de l'expression de fonction ne peut être appelée qu'après la déclaration.

3). Les fonctions définies par la déclaration de fonction ne sont pas de vraies déclarations. Elles ne peuvent apparaître que globalement ou imbriquées dans d'autres fonctions, mais elles ne peuvent pas apparaître dans des boucles, des conditions ou try/catch/finally, et

Les expressions de fonction peuvent être déclarées n'importe où.

Les fonctions sont définies de deux manières ci-dessous :

 //函数声明式
 function greeting(){
    console.log("hello world"); 
 }
 
 
 //函数表达式
 var greeting = function(){
   console.log("hello world"); 
 }

Un javascript intéressant ci-dessous :

function f() { console.log('I am outside!'); }
(function () {
 if(false) {
  // 重复声明一次函数f
  function f() { console.log('I am inside!'); }
 }
 f();
}());

Qu'est-ce qui sera affiché ? La première réaction devrait être "Je suis dehors". Le résultat est "Je suis à l'intérieur" dans Chrome, IE11 signale directement une erreur, et la version inférieure de Firefox affiche "Je suis dehors". .

Les résultats générés par Chrome reflètent clairement les caractéristiques des fonctions déclarées à l'aide des déclarations de fonction : la fonction peut être appelée avant d'être déclarée.

L'erreur IE montre que l'objet est manquant car la fonction est déclarée dans la condition, ce qui viole le principe de déclaration de fonction.

Portée de l'expression de la fonction :

Si la fonction déclarée par l'expression de fonction a un nom de fonction, alors le nom de la fonction est équivalent à une variable locale de la fonction et ne peut être appelé qu'à l'intérieur de la fonction.

var f = function fact(x) { 
        if (x <= 1) 
          return 1;
        else 
          return x*fact(x-1);
        };
        alert(fact());  // Uncaught ReferenceError: fact is not defined

fact() peut être appelé à l'intérieur de la fonction, mais lorsqu'il est appelé en dehors de la fonction, une erreur sera signalée : le fait n'est pas défini.

fait

Regardons de plus près

Déclaration de fonction

Exemple de code de déclaration de fonction

Le code est le suivant :

function fn () {
  console.log('fn 函数执行..');
  // code..
}

De cette façon, nous avons déclaré une fonction nommée fn. Voici une pensée. Pensez-vous qu'elle sera exécutée si vous l'appelez en plus de cette fonction ? Ou une erreur sera-t-elle signalée ?

Le code est le suivant : fn(); // Appelez la fonction fn que nous avons déclarée avant function fn () { console.log('fn functionexecution..'); // code..}

Sortie console :

Oui, la fonction fn peut être appelée à ce moment. Voici un résumé des raisons.

Résumé :

1 : A ce moment, la fonction fn est le résultat de la variable, qui est stockée par défaut dans la variable du contexte global (peut être vérifié par le nom window.function)

　2 : Cette méthode est une déclaration de fonction, qui est créée lors de l'entrée dans l'étape de contexte global. Elles sont déjà disponibles lors de l'étape d'exécution du code. ps : javaScript initialisera l'environnement contextuel (de global → local) à chaque fois qu'il entrera dans une méthode

　3 : Cela peut affecter les objets variables (uniquement les variables stockées dans le contexte)

Expression de fonction

Exemple de code d'expression de fonction

Le code est le suivant :

var fn = function () {
  console.log('fn 函数【表达式】声明执行..')
  // code..
}

　De cette façon, nous déclarons une fonction anonyme et pointons sa référence vers la variable

fn?

Appelez à nouveau la fonction déclarée par l'expression ci-dessus et ci-dessous pour voir la sortie sur la console.

Le code est le suivant :

// 为了清晰的看到控制台的输出，我们在各自调用前后做个标记，增加可读性。
console.log('之前调用开始..');
fn();
console.log('之前调用结束..');
var fn = function () {
  console.log('fn 函数【表达式】声明执行..')
  // code..
}
console.log('之后调用开始..');
fn();
console.log('之后调用开始..');

Résultat de l'impression de la console :

Vous pouvez voir que lorsque le code est exécuté et que la fonction fn() est appelée pour la première fois, elle demande : fn n'est pas une fonction (fn n'est pas une méthode), et l'opération se termine lorsqu'une erreur est rencontrés.

Cela montre que lorsque fn() est appelé pour la première fois, la variable var fn n'existe pas en tant qu'attribut de l'objet global, et le contexte de fonction anonyme référencé par fn n'a pas été initialisé, donc l'appel précédent a échoué .

Le code est le suivant :

// 现在先把之前的调用逻辑给注释掉，再看下控制台的输出
//  console.log('之前调用开始..');
//  fn();
//  console.log('之前调用结束..');
  var fn = function () {
    console.log('fn 函数【表达式】声明执行..')
    // code..
  }
  console.log('之后调用开始..');
  fn(); // 在表达式之后调用
  console.log('之后调用开始..');

Résultat de l'impression de la console :

On voit qu'il est possible d'appeler après la fonction expression. Résumons pourquoi ?

Résumé :

1 : Tout d'abord, la variable elle-même n'existe pas en tant que fonction, mais en tant que référence à une fonction anonyme (les types valeur ne sont pas des références)

2 : Lors de la phase d'exécution du code, lorsque le contexte global est initialisé, il n'existe pas en tant qu'attribut global, il ne provoquera donc pas de pollution des objets variables

3 : Ce type de déclaration est généralement courant dans le développement de plug-ins, et peut également être utilisé comme appel à une fonction de rappel dans une fermeture

　Donc la fonction fn () {} n'est pas égale à var fn = function () {}. Elles sont essentiellement différentes.

Ce qui précède est tout le contenu de cet article. L'idée est très claire et la comparaison est également très claire. C'est un très bon article, vous devez le lire attentivement

.