Fermer

avril 28, 2020

Quatre façons de créer une fonction en JavaScript10 minutes de lecture



Nous allons voir les quatre façons de créer une fonction en JavaScript: comme une instruction, comme une expression, comme une fonction fléchée et en utilisant le constructeur Function.

«Je souhaite qu'undefined soit une fonction en JavaScript.»

Il existe quatre façons de créer une fonction en JavaScript. Ils sont les suivants:

  • Une fonction en tant qu'instruction
  • Une fonction en tant qu'expression
  • Une fonction en tant que fonction flèche
  • Une fonction créée à l'aide du constructeur Function

Les quatre modes de création de fonction ont des caractéristiques distinctes telles qu'une fonction de flèche qui n'a pas son propre cet objet une instruction de fonction qui est hissée en haut du contexte d'exécution et une expression de fonction qui peut être immédiatement invoquée sans créer de portée distincte . Avoir une bonne compréhension des différentes caractéristiques des différents types de fonctions JavaScript est utile pour écrire un meilleur code. Cet article explique ces fonctions.

Une fonction en tant qu'instruction

Une fonction en tant qu'instruction peut être créée comme illustré dans l'exemple de code suivant:

 function Add (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
}

soit res = Ajouter (7,8);
console.log (res); // 15

Une instruction de fonction commence par le mot-clé function. Il peut renvoyer une valeur de type primitif, un objet ou une autre fonction. Par exemple, une instruction de fonction peut renvoyer un objet comme indiqué dans l'exemple de code suivant:

 function getProduct () {
    laissez produit = {
        Id: 1,
        Titre: «Livre»,
        Prix: 30
    };
    retourner le produit;
}

soit p1 = getProduct ();
console.log (p1); // imprime l'objet produit

La principale caractéristique d'un énoncé de fonction est qu'il est hissé en haut du contexte d'exécution. Par conséquent, vous pouvez appeler une instruction de fonction avant qu'elle ne soit déclarée, comme illustré dans l'exemple de code suivant:

 let res = Add (7,8);
console.log (res); // 15

// .... autres codes

fonction Ajouter (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
}

Comme vous le voyez, cette fonction Ajouter est appelée avant sa création, ce qui est possible car une instruction de fonction est hissée en haut du contexte d'exécution.

Une instruction de fonction est hissée en haut du contexte d'exécution. Ainsi, il peut être invoqué avant d'être créé.

Dans une instruction de fonction, vous pouvez transmettre des valeurs primitives en tant que paramètres ou valeurs non primitives, comme un objet ou un tableau. Les paramètres primitifs sont passés en tant que valeur et les valeurs non primitives sont passées en tant que référence. Ainsi, si vous passez un objet à une instruction de fonction et que la fonction modifie les propriétés de l'objet, cette modification est visible en dehors de la fonction, comme illustré dans l'exemple de code suivant:

 function updateProduct (product) {
    product.Title = 'Livre mis à jour';
}

laissez produit = {
    Id: 1,
    Titre: «Livre»,
    Prix: 30
};

console.log (product.Title); // Livre
updateProduct (produit);
console.log (product.Title); // Livre mis à jour

Dans le code ci-dessus, JavaScript met à jour le titre de l'objet produit. Cependant, si vous transmettez une chaîne, un nombre ou des paramètres booléens dans la fonction, ils ne seront pas reflétés globalement.

Dans un énoncé de fonction, les paramètres primitifs sont transmis en tant que valeur et les paramètres non primitifs tels que les objets et les tableaux sont transmis en tant que référence .

Une fonction comme une expression

Une fonction en tant qu'expression peut être créée comme indiqué dans l'exemple de code suivant.

 let add = function a (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
}

soit res = ajouter (8,9);
console.log (res); // 17

Dans une expression de fonction, vous affectez une fonction à une variable. Une expression de fonction peut également être créée comme anonyme sans nom, comme illustré dans l'exemple de code suivant:

 let add = function (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
}

soit res = ajouter (8,9);
console.log (res); // 17

Le nom de l'expression de fonction est local au corps de fonction et très utile pour les récursions ou tout scénario dans lequel vous devez vous référer à la fonction à l'intérieur du corps de fonction. Vous pouvez écrire une fonction factorielle en utilisant le nom de l'expression de fonction:

 var Calculator = {

    factoriral: fonction fait (n) {
      si (n <= 1) {
        retour 1;
      }
      retourne n * fact (n-1);
    }
}

let result = Calculator.factoriral (7);
console.log (résultat); // 5040

Les principales différences entre une instruction de fonction et une expression de fonction sont:

  • Une expression de fonction peut être créée sans nom, tandis qu'une instruction de fonction doit avoir un nom
  • Une expression de fonction n'est pas hissée en haut de le contexte d'exécution, alors qu'une instruction de fonction est hissée en haut du contexte d'exécution

Puisqu'une expression de fonction n'est pas hissée en haut du contexte d'exécution, l'appel de la fonction avant sa création renvoie ReferenceError , comme illustré dans l'exemple de code suivant:

 let res = add (8,9);
console.log (res); // ReferenceError: add n'est pas une fonction

laissez add = fonction (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
}

Ainsi, vous pouvez résumer la différence de levage comme suit:

  • Une instruction de fonction est hissée en haut du contexte d'exécution, elle peut donc être invoquée avant sa création
  • Une expression de fonction n'est pas hissée en haut du contexte d'exécution, il ne peut donc pas être invoqué avant sa création

Une expression de fonction n'est pas hissée en haut du contexte d'exécution. Ainsi, elle ne peut pas être invoquée avant d'être créée.

Une autre caractéristique importante d'une expression de fonction est qu'elle peut être immédiatement invoquée dès qu'elle est définie, également connue sous le nom de Expression de fonction immédiatement invoquée :

 laissez add = fonction (num1, num2) {
    soit sum = num1 + num2;
    somme de retour;
} (8,9);

console.log (ajouter); // 17

D'un autre côté, une instruction de fonction ne peut pas être invoquée immédiatement dès qu'elle est définie sans créer une étendue distincte, comme illustré dans l'exemple de code suivant.

 (fonction add (num1, num2) {
    soit sum = num1 + num2;
    console.log (somme); // 17
}) (8,9);

Une fonction de flèche

Les fonctions de flèche ont été introduites dans ECMA 2015 dans le but principal de donner une syntaxe plus courte à une expression de fonction. En plus de fournir une syntaxe plus courte, ce qui augmente la lisibilité du code, il n'a pas sa propre valeur de l'objet this . La valeur de cet objet à l'intérieur d'une fonction flèche est héritée de la portée englobante.

Vous pouvez écrire une fonction de flèche pour ajouter deux nombres, comme indiqué dans l'exemple de code suivant.

 var add = (num1, num2) => num1 + num2;
soit res = ajouter (5,2);
console.log (res); // 7

Certaines règles de syntaxe pour une fonction fléchée sont les suivantes:

  • Les paramètres doivent être passés dans une petite parenthèse
  • S'il n'y a qu'un seul paramètre, la parenthèse est facultative
  • S'il n'y a pas de paramètre, alors il doit avoir une petite parenthèse vide
  • S'il n'y a qu'une seule expression dans le corps de la fonction, l'utilisation de parenthèses est facultative
  • S'il n'y a qu'une seule expression dans le corps de la fonction, l'utilisation de l'instruction return est facultative

Vous pouvez appliquer les règles de syntaxe ci-dessus pour créer des fonctions fléchées, comme illustré dans l'exemple de code suivant.

 // Plusieurs paramètres et une seule expression
var add = (num1, num2) => num1 + num2;

// Pas de paramètres et pas de déclaration de retour

laissez salut = () => console.log ('hey');

// Plusieurs paramètres et plusieurs expressions dans le corps
var divide = (num1, num2) => {
   si (num2 == 0) {
    retour «ne peut pas diviser»;
   }
   autre {
       return num1 / num2;
   }
}

Pour renvoyer un objet à partir d'une fonction de flèche, vous pouvez utiliser une instruction return ou une syntaxe légèrement différente pour enfermer l'objet dans une petite parenthèse, comme indiqué dans l'exemple suivant:

 let product = (title, price ) => ({
    titre: titre,
    prix: prix
})

soit p1 = produit («stylo», 100);
console.log (p1);

Voici quelques autres caractéristiques importantes d'une fonction de flèche:

  • Elle prend en charge les paramètres de repos
  • Elle prend en charge les paramètres par défaut
  • Elle n'a pas d'objet arguments
  • Elle n'a pas la sienne cet objet
  • Il ne peut pas être utilisé comme constructeur

La valeur de cet objet à l'intérieur d'une fonction flèche est héritée de la portée englobante. Pour mieux le comprendre, considérons l'exemple de code suivant:

 let Product = {
    Titre: «Pen»,
    Prix: 100
  }


  fonction foo () {

      console.log (this); // Objet produit

     fonction koo () {

           console.log (this); // objet global
     }

     koo ();
  }

  foo.call (Product); 

La fonction foo est appelée indirectement à l'aide de la méthode call () pour transmettre l'objet Product comme valeur de ce à l'intérieur. Et puisque la fonction koo est appelée en utilisant le modèle d'invocation de fonction, la valeur de cet objet car c'est l'objet global. Ainsi, même si koo est une fonction interne de foo il a sa propre valeur de cet objet .

Mais, si vous refactorisez le koo fonctionne comme une fonction de flèche, puis au lieu d'avoir son propre cet objet il l'hérite de la portée englobante, comme le montre l'exemple de code suivant.

 let Product = {
    Titre: «Pen»,
    Prix: 100
  }


  fonction foo () {

      que cela = ceci;

      console.log (this); // Objet produit
      var koo = () => console.log (this);
      koo ();
  }

  foo.call (Produit);

L'autre restriction sur les fonctions fléchées est qu'elles ne peuvent pas être utilisées comme constructeurs, donc l'exemple de code suivant lève une exception.

 var Product = (Title, Price) => {

    revenir {
      Titre: Title,
      Prix: Prix
    }
}

soit p1 = nouveau produit ('Pen', 200); // Le produit d'erreur n'est pas un constructeur

Utilisation du constructeur de fonctions

Une fonction peut être créée dynamiquement à l'aide du constructeur de fonctions, mais elle souffre de problèmes de sécurité et de performances et n'est pas recommandée.

Vous pouvez créer une fonction à l'aide du constructeur Function, comme indiqué dans l'exemple suivant.

 var add = Function ('num1', 'num2', 'return num1 + num2');
soit res = ajouter (7,8);
console.log (res); // 15

Dans le constructeur Fonction vous passez des paramètres et un corps de fonction sous forme de chaîne. La fonction créée avec le constructeur Function est toujours créée dans la portée globale.

Résumé

Dans cet article, vous avez découvert différentes manières de créer une fonction et ses caractéristiques. Par exemple, une instruction de fonction est hissée en haut du contexte d'exécution, une expression de fonction n'est pas hissée et peut être créée sans un nom et une fonction de flèche n'a pas son propre cet objet .

J'espère que vous avez trouvé l'article utile. Merci d'avoir lu.





Source link

0 Partages