Maison >interface Web >js tutoriel >Cas d'utilisation iife: les expressions de fonction immédiatement invoquées en action
function
Grammaire traditionnelle qui utilise la déclaration de fonction:
Syntaxe de la fonction de flèche:
<code class="language-javascript">( function () { console.log('IIFE called'); } )();</code>
Maintenant, nous savons ce qui est iife, et la question suivante est pourquoi elle est utile? Voici quelques cas:
<code class="language-javascript">( () => console.log('IIFE with arrow function called') )();</code>
En créant une nouvelle portée pour éviter la pollution, l'espace de dénomination mondial
Qu'est-ce que cela signifie? Cela signifie essentiellement un conflit entre le nom entre les variables globales et la variable locale du même nom. Cela devient plus évident dans les grandes applications d'entreprise. L'exemple suivant l'illustre.
Après avoir exécuté ce code, la sortie est la suivante:
<code class="language-javascript">// 全局作用域 const value = "此变量位于全局作用域中,名为 'value'。"; const stateLocation = () => console.log("现在位于全局作用域"); stateLocation(); console.log(value); console.log("*********************************************************"); ( function () { // 函数作用域 const value = "此变量位于函数作用域中,即使重用了变量名 'value',也避免了全局污染"; const stateLocation = () => console.log("现在位于 IIFE 的函数作用域"); stateLocation(); console.log(value); } )();</code>
Créer des fermetures avec des variables privées
<code>现在位于全局作用域 此变量位于全局作用域中,名为 'value'。 ********************************************************* 现在位于 IIFE 的函数作用域 此变量位于函数作用域中,即使重用了变量名 'value',也避免了全局污染</code>En regardant en arrière, la fermeture est une fonction interne qui peut accéder aux variables dans la portée de la fonction externe. Cet exemple iife de cette zone circulaire de calcul l'illustre. De plus, les variables des fonctions externes sont privées car elles ne sont pas accessibles en dehors de la fonction.
Sortie:
<code class="language-javascript">const areaOfCircle = ( function () { const pi = Math.PI; // 私有变量 return function (radius) { // 具有访问外部作用域私有变量的闭包 return pi * (radius ** 2); }; } )(); const areaWithRadius2 = areaOfCircle(10); console.log('半径为 10 的圆的面积是', areaWithRadius2); // console.log('PI = ', pi); // ReferenceError: pi is not defined</code>utilisé pour effectuer des fonctions asynchrones et d'attente
iife peut également être utilisé pour effectuer des opérations asynchrones, telles que les appels de réseau. Les exemples suivants obtiennent la liste des éléments à obtenir à partir du serveur analogique.
<code>半径为 10 的圆的面积是 314.1592653589793</code>
Il s'agit d'un module utilisant des équations physiques de base. Il peut être exporté et utilisé par d'autres programmes. Je vais en discuter davantage dans un autre article "en utilisant le mode du module iife pour créer une application de calcul physique de ligne de commande". Veuillez faire attention à l'utilisation de variables privées et de fermetures.
<code class="language-javascript">( async function () { const response = await fetch('https://dummyjson.com/todos'); const todosObject = await response.json(); const todoList = todosObject.todos.map(todo => todo.todo); console.log(todoList); } )();</code>
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!