Trois façons de créer des fonctions en JS et leurs différences

1. Déclaration de fonction

function sum1(n1,n2){
    return n1+n2;
  };

2. Expression de fonction, également appelée fonction littérale

var sum2=function(n1,n2){
    return n1+n2;
};

Les deux La différence : l'analyseur lira d'abord la déclaration de fonction et la rendra accessible avant d'exécuter un code ; tandis que l'expression de fonction doit attendre que l'analyseur atteigne la ligne de code où elle se trouve avant d'être réellement interprétée et exécutée.

À proprement parler, une fonction auto-exécutable est également appelée expression de fonction. Elle est principalement utilisée pour créer une nouvelle portée. Les variables déclarées dans cette portée ne seront pas en conflit ou ne seront pas confondues avec les variables d'autres portées. d'entre eux Il existe en tant que fonction anonyme et est automatiquement exécuté immédiatement.

(function(n1,n2){
    console.log (n1+n2)
})(1,3);//4

Plusieurs autres fonctions auto-exécutables :

  //可用来传参
  (function(x,y){
    console.log(x+y);
  })(2,3);

  //带返回值
  var sum=(function(x,y){
    return x+y;
  })(2,3);
  console.log(sum);

  ~function(){
    var name='~'
    console.log(name);
  }();

  !function(){
    var name='!'
    console.log(name);
  }();

  ;(function(){
    var name=';'
    console.log(name);
  })();

  -function(){
    var name='-'
    console.log(name);
  }();

  //逗号运算符
  1,function(){
    var name=',';
    console.log(name);
  }();

  //异或
  1^function(){
    var name='^';
    console.log(name);
  }();

  //比较运算符
  1>function(){
    var name='>';
    console.log(name);
  }();

  ~+-!(function(){
    var name='~+-!';
    console.log(name);
  })();

  ~!(function(){
    var name='~!';
    console.log(name);
  })();

  (function(){
    var name='call';
    console.log(name);
  }).call();

  (function(){
    var name='apply';
    console.log(name);
  }).apply();

3. Méthode de construction de fonction, les paramètres doivent être cités

var sum3=new Function('n1','n2','return n1+n2');
console.log(sum3(2,3));//5

Techniquement parlant, il s'agit d'une expression de fonction. Il n'est généralement pas recommandé de définir des fonctions de cette manière, car cette syntaxe entraînera l'analyse du code deux fois (la première fois consiste à analyser le code ECMAScript normal et la deuxième fois à analyser la chaîne passée dans le constructeur), affectant ainsi les performances.

var name='haoxl';
  function fun(){
    var name='lili';
    return new Function('return name');//不能获取局部变量
  }
 console.log(fun()());//haoxl

Le constructeur Function() analysera le corps de la fonction et créera un nouvel objet fonction à chaque fois qu'il est exécuté, donc lors de l'appel de Function dans une boucle ou d'une fonction fréquemment exécutée () l'efficacité du constructeur est très faible. Les littéraux de fonction ne sont pas recompilés à chaque fois qu'ils sont rencontrés. Lors de la création d'une fonction à l'aide du constructeur Function(), il ne suit pas la portée typique. Il l'exécute toujours en tant que fonction de niveau supérieur.

【Tutoriels associés recommandés】

1 Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. tutoriel bootstrap