Explorez le concept de portée des fonctions JavaScript et les différents types de fonctions JavaScript-js tutoriel-php.cn

Explorez le concept de portée des fonctions JavaScript et les différents types de fonctions JavaScript

WBOY

Libérer： 2023-09-07 14:41:02

avant

1075 Les gens l'ont consulté

探索 JavaScript 函数作用域的概念和不同类型的 JavaScript 函数

En JavaScript, différentes portées nous permettent d'accéder à des fonctions et des variables à partir de différents emplacements dans le code. Nous découvrirons la portée des fonctions dans ce didacticiel. De plus, nous explorerons les différents types d’expressions de fonction en JavaScript.

Gamme de fonctions

Lorsque nous créons une nouvelle fonction en JavaScript, cela crée également la portée de cette fonction spécifique. Cela signifie que quelle que soit la variable que nous déclarons à l'intérieur d'une fonction ou définissons une fonction imbriquée à l'intérieur de celle-ci, nous ne pouvons y accéder que dans le bloc fonctionnel.

Si nous essayons d'accéder à une variable définie à l'intérieur d'un bloc fonctionnel depuis l'extérieur de la fonction, nous obtiendrons une erreur de référence.

Grammaire

Vous pouvez suivre la syntaxe suivante pour définir des fonctions et comprendre la portée des fonctions.

function  function_name(){
   var variable = 10; // variable has a function scope.
}
let variable1 = variable; 
// we can't access the variable here as it has a function scope.

Copier après la connexion

Dans la syntaxe ci-dessus, vous pouvez voir que nous ne pouvons pas accéder aux variables en dehors de la fonction car le bloc fonction la restreint.

Exemple 1

Dans cet exemple, nous avons créé l'exemple de fonction et défini les variables à l'intérieur de la fonction avec une portée de bloc. Si nous essayons d'accéder à une variable définie dans la fonction Sample() depuis l'extérieur de la fonction, JavaScript générera une erreur de référence.

<html>
<body>
   <h2>Function Scope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // defining the function
      function sample() {
         //  variables with function scope.
         var website = "TutorialsPoint!";
         var language = "JavaScript";
         output.innerHTML +=
            "You are learning the " +
            language +
            " programming language on " +
            website +
            " </br>";
      }
      sample();
      // we can't access language and website variables here.
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Nous avons défini nested_function() dans l'exemple de fonction dans ce cas. Nous ne pouvons pas appeler nested_funciton() en dehors de la fonction sample() car nested_function entre dans le cadre de l'exemple de fonction.

<html>
<body>
   <h2>Function sSope in JavaScript</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      function sample() {
         //  variables with function scope.
         var num = 10;
         function nested_function() {
            // num variables also can be accessed here as nested_function() is
            //inside the scope of sample function
            var string = "JavaScript";
            output.innerHTML +=
               "The value of the num variable is " + num + "<br/>";
            output.innerHTML +=
               "The value of the string variable is " + string + "</br>";
         }
         //  we can call the nested_function() inside the sample() function only
         nested_function();
         // we can't access the string variable here as the scope of 
         //nested_function bounds it
      }
      sample();
   </script>
</body>
</html>

Copier après la connexion

Différents types de fonctions en JavaScript

Selon la définition et la déclaration des fonctions, il existe de nombreux types de fonctions, nous allons les apprendre un par un ici.

Fonction normale

Les fonctions normales sont des fonctions couramment utilisées par tous les développeurs JavaScript. Nous pouvons définir des fonctions régulières en utilisant le nom de la fonction suivi du mot-clé function.

Les fonctions régulières restent en haut de la portée actuelle de la fonction. Cela signifie que nous pouvons appeler la fonction avant de la définir, mais qu'elle doit être définie après l'exécution.

Grammaire

Suivez cette syntaxe pour définir les fonctions régulières.

function function_name(){
   // function body
}

Copier après la connexion

Dans la syntaxe ci-dessus, nous avons utilisé le mot-clé function pour définir une fonction. « function_name » est le nom de la fonction, et nous pouvons écrire le code du corps de la fonction entre accolades.

Expression de fonction

Les expressions de fonction fonctionnent également comme des fonctions ordinaires. Cependant, la différence est qu'elle n'a pas de nom et que nous devons stocker l'expression de la fonction dans une variable. Nous pouvons utiliser l'identifiant pour appeler la fonction qui le stocke.

JavaScript évalue les expressions de fonction étape par étape. Il n’est donc pas hissé en haut du périmètre, on ne peut donc pas l’appeler avant de le déclarer.

Grammaire

Suivez cette syntaxe pour définir les expressions de fonction.

var function_identifier = function () {
   // function body
}
function_identifier();

Copier après la connexion

Dans la syntaxe ci-dessus, nous avons défini une fonction sans nom en utilisant uniquement le mot-clé function et l'avons stocké dans la variable function_identifier. De plus, les utilisateurs peuvent voir comment nous utilisons function_identifier pour appeler des expressions de fonction.

Fonction flèche

Les fonctions fléchées ont été introduites dans ES6, la dernière révision majeure de JavaScript en 2015. Il s'agit d'une syntaxe plus courte pour définir des fonctions sans nom de fonction. En outre, on l'appelle expressions et fonctions anonymes car elle ne contient pas leurs identités.

Grammaire

Suivez cette syntaxe pour définir les fonctions fléchées.

var function_identifier =  (params) => {
   // function body
}
function_identifier(arguments);

Copier après la connexion

Dans la syntaxe ci-dessus, nous stockons l'expression de la fonction flèche dans function_identifier. De plus, nous avons passé les arguments et arguments à l'intérieur de la fonction flèche tout en appelant la fonction à l'aide de la variable function_identifier.

Fonction de fermeture

Nous pouvons créer des fonctions imbriquées en JavaScript et accéder aux variables de fonction parent à l'aide de fonctions enfants. Étant donné que la fonction enfant contient l'accès à toutes les variables définies dans la portée de la fonction parent, nous pouvons appeler la fonction enfant une fonction de fermeture.

Grammaire

function parent() {
   // variables of the parent
   var child = () => {
      // variables of child
      // access variables of the parent
   };
   return child;
}
var child = parent();
child();

Copier après la connexion

Dans la syntaxe ci-dessus, nous pouvons accéder à toutes les variables de la fonction parent à l'intérieur de la fonction enfant, et la fonction parent renvoie la fonction enfant. Par conséquent, nous pouvons appeler une fonction enfant indirectement depuis l’extérieur de la fonction parent, même si elle est définie dans la portée de la fonction parent.

Constructeur

Grammaire

Nous pouvons utiliser un constructeur pour créer des objets.

function constructor(property){
   this.property = property
}
var string = new constructor("value");

Copier après la connexion

Dans la syntaxe ci-dessus, nous créons l'objet du constructeur.

Nous avons appris comment fonctionne la portée des fonctions pour les fonctions imbriquées avec deux exemples dans ce didacticiel. De plus, nous avons découvert les différents types de fonctions. De plus, il existe d'autres types de fonctions telles que les fonctions récursives ou de rappel que les utilisateurs peuvent explorer sur Internet.

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!