Réponse détaillée à la fonction d'exécution immédiate en JavaScript

Le mode de fonction d'exécution immédiate en JavaScript permet à votre fonction d'être exécutée immédiatement après avoir été définie. Prenons une analyse approfondie de la fonction d'exécution immédiate en JavaScript. Les amis dans le besoin peuvent se référer à

Qu'est-ce que c'est En JavaScript, chaque fonction, lorsqu'elle est appelée, crée un nouveau contexte d'exécution. Étant donné que les variables définies dans les fonctions et les fonctions sont les seules variables accessibles en interne plutôt qu'en externe, le contexte fourni par la fonction fournit un moyen très simple de créer des variables privées lorsque la fonction est appelée.

function makeCounter() {
  var i = 0;
  return function(){
    console.log(++i);
  };  
}

//记住：`counter`和`counter2`都有他们自己的变量 `i`

var counter = makeCounter();
counter();//1
counter();//2

var counter2 = makeCounter();
counter2();//1
counter2();//2

i;//ReferenceError: i is not defined(它只存在于makeCounter里)

Dans de nombreux cas, vous n'aurez peut-être pas besoin d'une fonction comme makeWhatever pour renvoyer plusieurs valeurs accumulées, et vous ne pourrez l'appeler qu'une seule fois pour obtenir une seule valeur. Dans d'autres cas, vous n'aurez même pas besoin de Know. la valeur de retour explicitement.

Le cœur de celui-ciMaintenant, que vous définissiez une fonction comme celle-ci function foo(){} ou var foo = function(){}, lors de l'appel, vous devez ajouter une paire de parenthèses, comme foo().

//向下面这样定义的函数可以通过在函数名后加一对括号进行调用，像这样`foo()`，
//因为foo相对于函数表达式`function(){/* code */}`只是一个引用变量

var foo = function(){/* code */}

//那这可以说明函数表达式可以通过在其后加上一对括号自己调用自己吗？

function(){ /* code */}(); //SyntaxError: Unexpected token (

Comme vous pouvez le constater, une erreur a été détectée ici. Lorsque des parenthèses apparaissent après une fonction pour appeler une fonction, qu'elle rencontre un tel mot-clé de fonction dans l'environnement global ou dans l'environnement local, par défaut, elle le traitera comme une déclaration de fonction plutôt que comme une expression de fonction. Si vous ne dites pas explicitement aux parenthèses qu'il s'agit d'une expression, il la traitera comme une déclaration de fonction sans nom et générera une erreur, car les déclarations de fonction nécessitent un nom.

Question 1 : Pouvons-nous réfléchir à une question ici, pouvons-nous aussi appeler directement la fonction comme ceci var foo = function(){console.log(1)}(), la réponse est oui.

Question 2 : De même, on peut aussi réfléchir à une question. Que se passe-t-il si une déclaration de fonction comme celle-ci est directement appelée avec des parenthèses à la fin ? Veuillez consulter la réponse ci-dessous.

Fonction, parenthèses, erreurFait intéressant, si vous donnez un nom à une fonction et mettez une paire de parenthèses après, la même erreur sera renvoyée, mais cette fois c'était pour une autre raison. Lorsque des parenthèses sont placées après une expression de fonction, cela indique qu'il s'agit d'une fonction appelée, et lorsque des parenthèses sont placées après une déclaration, cela signifie qu'elle est complètement séparée de la déclaration de fonction précédente. À ce stade, les parenthèses ne sont qu'une simple. représentation. Une parenthèse (parenthèses utilisées pour contrôler la priorité des opérations).

//然而函数声明语法上是无效的，它仍然是一个声明，紧跟着的圆括号是无效的，因为圆括号里需要包含表达式

function foo(){ /* code */ }();//SyntaxError: Unexpected token

//现在，你把一个表达式放在圆括号里，没有抛出错误...,但是函数也并没有执行，因为：

function foo(){/* code */}(1)

//它等同于如下，一个函数声明跟着一个完全没有关系的表达式:

function foo(){/* code */}
(1);

Expression de fonction immédiatement exécutée (IIFE) Heureusement, corriger les erreurs de syntaxe est facile. La méthode la plus populaire et la plus acceptée consiste à placer une déclaration de fonction entre parenthèses pour indiquer à l'analyseur d'exprimer une expression de fonction, car en JavaScript, les parenthèses ne peuvent pas contenir de déclarations. Pour cette raison, lorsque des parenthèses entourent une fonction et rencontrent le mot-clé function, il sait l'analyser comme une expression de fonction plutôt que comme une déclaration de fonction. Faites attention à comprendre que les parenthèses ici se comportent différemment des parenthèses ci-dessus lorsqu'elles rencontrent des fonctions, c'est-à-dire.

Lorsque des parenthèses apparaissent à la fin d'une fonction anonyme et que vous souhaitez appeler une fonction, la fonction sera par défaut une déclaration de fonction.

Lorsque des parenthèses enveloppent une fonction, la fonction sera analysée par défaut comme une expression au lieu d'une déclaration de fonction.

//这两种模式都可以被用来立即调用一个函数表达式，利用函数的执行来创造私有变量

(function(){/* code */}());//Crockford recommends this one，括号内的表达式代表函数立即调用表达式
(function(){/* code */})();//But this one works just as well，括号内的表达式代表函数表达式

// Because the point of the parens or coercing operators is to disambiguate
// between function expressions and function declarations, they can be
// omitted when the parser already expects an expression (but please see the
// "important note" below).

var i = function(){return 10;}();
true && function(){/*code*/}();
0,function(){}();

//如果你并不关心返回值，或者让你的代码尽可能的易读，你可以通过在你的函数前面带上一个一元操作符来存储字节

!function(){/* code */}();
~function(){/* code */}();
-function(){/* code */}();
+function(){/* code */}();

// Here's another variation, from @kuvos - I'm not sure of the performance
// implications, if any, of using the `new` keyword, but it works.
// http://twitter.com/kuvos/status/18209252090847232

new function(){ /* code */ }
new function(){ /* code */ }() // Only need parens if passing arguments

Remarques importantes sur les parenthèsesDans certains cas, des parenthèses ambiguës supplémentaires autour d'une expression de fonction ne sont pas nécessaires (car les parenthèses servent déjà à l'exprimer en tant qu'expression), mais c'est quand même une bonne idée lorsque les parenthèses sont utilisées pour appeler des expressions de fonction.

De tels crochets indiquent que l'expression de fonction sera appelée immédiatement et que la variable stockera le résultat de la fonction, pas la fonction elle-même. Lorsqu'il s'agit d'une expression de fonction très longue, cela peut éviter à une personne qui lit votre code d'avoir à faire défiler vers le bas de la page pour voir si la fonction est appelée.

En règle générale, lorsque vous écrivez du code clair et concis, il est nécessaire d'empêcher JavaScript de générer des erreurs. Il est également nécessaire d'empêcher d'autres développeurs de vous lancer des erreurs WTFError !

<. 🎜> Préserve l'état d'une fermeture

tout comme les arguments sont passés lorsqu'une fonction est appelée par leur nom, et les arguments sont passés lorsqu'une expression de fonction est appelée immédiatement. Une expression de fonction immédiatement appelée peut être utilisée pour verrouiller la valeur et enregistrer efficacement l'état actuel, car toute fonction définie dans une fonction peut utiliser les paramètres et les variables transmis par la fonction externe (cette relation est appelée fermeture).

N'oubliez pas que dans ces deux derniers exemples, LockInIndex peut accéder à i sans aucun problème, mais l'utilisation d'un identifiant nommé différent comme paramètre de fonction peut rendre le concept plus facile à expliquer.

// 它的运行原理可能并不像你想的那样，因为`i`的值从来没有被锁定。
// 相反的，每个链接，当被点击时（循环已经被很好的执行完毕），因此会弹出所有元素的总数，
// 因为这是 `i` 此时的真实值。

var elems = document.getElementsByTagName('a');
for(var i = 0;i < elems.length; i++ ) {
  elems[i].addEventListener(&#39;click&#39;,function(e){
    e.preventDefault();
    alert(&#39;I am link #&#39; + i)
    },false);
}

// 而像下面这样改写，便可以了，因为在IIFE里，`i`值被锁定在了`lockedInIndex`里。
// 在循环结束执行时，尽管`i`值的数值是所有元素的总和，但每一次函数表达式被调用时，
// IIFE 里的 `lockedInIndex` 值都是`i`传给它的值,所以当链接被点击时，正确的值被弹出。

var elems = document.getElementsByTagName(&#39;a&#39;);
for(var i = 0;i < elems.length;i++) {
  (function(lockedInIndex){
    elems[i].addEventListener(&#39;click&#39;,function(e){
      e.preventDefault();
      alert(&#39;I am link #&#39; + lockedInIndex);
      },false)
  })(i);
}

//你同样可以像下面这样使用IIFE，仅仅只用括号包括点击处理函数，并不包含整个`addEventListener`。
//无论用哪种方式，这两个例子都可以用IIFE将值锁定，不过我发现前面一个例子更可读

var elems = document.getElementsByTagName( &#39;a&#39; );

for ( var i = 0; i < elems.length; i++ ) {
  elems[ i ].addEventListener( &#39;click&#39;, (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( &#39;I am link #&#39; + lockedInIndex );
    };
    })( i ),false);
  }

L'un des avantages les plus importants de l'exécution immédiate d'une fonction est que même si elle est sans nom ou anonyme, une expression de fonction peut être appelée immédiatement sans utiliser d'identifiant, et une fermeture peut être appelée immédiatement sans variable actuelle. . la contamination est utilisée.

Quel est le problème avec la fonction anonyme auto-exécutable (« Fonction anonyme auto-exécutable ») ?

你看到它已经被提到好几次了，但是它仍然不是那么清楚的被解释，我提议将术语改成"Immediately-Invoked Function Expression"，或者，IIFE，如果你喜欢缩写的话。

什么是Immediately-Invoked Function Expression呢？它使一个被立即调用的函数表达式。就像引导你去调用的函数表达式。

我想Javascript社区的成员应该可以在他们的文章里或者陈述里接受术语，Immediately-Invoked Function Expression和 IIFE，因为我感觉这样更容易让这个概念被理解，并且术语"self-executing anonymous function"真的也不够精确。

//下面是个自执行函数，递归的调用自己本身

function foo(){foo();};

//这是一个自执行匿名函数。因为它没有标识符，它必须是使用`arguments.callee`属性来调用它自己

var foo = function(){arguments.callee();};

//这也许算是一个自执行匿名函数，但是仅仅当`foo`标识符作为它的引用时，如果你将它换成用`foo`来调用同样可行

var foo = function(){foo();};

//有些人像这样叫'self-executing anonymous function'下面的函数,即使它不是自执行的，因为它并没有调用它自己。然后，它只是被立即调用了而已。

(function(){ /*code*/ }());

//为函数表达式增加标识符(也就是说创造一个命名函数)对我们的调试会有很大帮助。一旦命名，函数将不再匿名。

(function foo(){/* code */}());

//IIFEs同样也可以自执行，尽管，也许他不是最有用的模式

(function(){arguments.callee();}())
(function foo(){foo();}())

// One last thing to note: this will cause an error in BlackBerry 5, because
// inside a named function expression, that name is undefined. Awesome, huh?

(function foo(){ foo(); }());

希望上面的例子可以让你更加清楚的知道术语'self-executing'是有一些误导的，因为他并不是执行自己的函数，尽管函数已经被执行。同样的，匿名函数也没用必要特别指出，因为，Immediately Invoked Function Expression，既可以是命名函数也可以匿名函数。

最后：模块模式当我调用函数表达式时，如果我不至少一次的提醒我自己关于模块模式，我便很可能会忽略它。如果你并不属性 JavaScript 里的模块模式，它和我下面的例子很像，但是返回值用对象代替了函数。

var counter = (function(){
  var i = 0;
  return {
    get: function(){
      return i;
    },
    set: function(val){
      i = val;
    },
    increment: function(){
      return ++i;
    }
  }
  }());
  counter.get();//0
  counter.set(3);
  counter.increment();//4
  counter.increment();//5

  conuter.i;//undefined (`i` is not a property of the returned object)
  i;//ReferenceError: i is not defined (it only exists inside the closure)

模块模式方法不仅相当的厉害而且简单。非常少的代码，你可以有效的利用与方法和属性相关的命名，在一个对象里，组织全部的模块代码即最小化了全局变量的污染也创造了使用变量。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript中各数制转换全面总结（图文教程）

原生JavaScript来实现对dom元素class的操作方法（图文教程）

JavaScript中的字符串连接问题（图文教程）

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!