Explication détaillée du modèle de fonction dans les compétences JavaScript_javascript

Le rôle des modèles de conception JavaScript est d'améliorer la réutilisabilité et la lisibilité du code, ce qui facilite la maintenance et l'extension du code

En JavaScript, une fonction est un type d'objet, ce qui signifie qu'elle peut être transmise en paramètre à d'autres fonctions. De plus, les fonctions peuvent également fournir une portée ;

Syntaxe de création de fonctions

Expression de fonction nommée

Copier le code Le code est le suivant :

//Expression de fonction nommée
var ajouter = fonction ajouter(a,b){
Renvoyer un b ;
};

Expression de fonction

Copier le code Le code est le suivant :

//Également connue sous le nom de fonction anonyme
var ajouter = fonction(a,b){
Renvoyer un b ;
};

La valeur attribuée à la variable add est la définition de la fonction elle-même. De cette façon, add devient une fonction qui peut être appelée n’importe où.

Déclaration de fonction

Copier le code Le code est le suivant :

fonction foo(){
//code ici
} //Aucun point-virgule n'est nécessaire ici

Un point-virgule final doit toujours être utilisé dans les expressions de fonction, et un point-virgule final n'est pas requis dans les déclarations de fonction.

Déclarations et expressions de fonctions

Histage des fonctions

Le comportement des déclarations de fonctions n'est pas équivalent à celui des expressions de fonctions nommées. La différence réside dans le comportement de levage. Voir l'exemple suivant :

Copier le code Le code est le suivant :

Toutes les variables, peu importe où elles sont déclarées dans le corps de la fonction, sont hissées en interne au sommet de la fonction. La raison pour laquelle il est universellement applicable aux fonctions est que les fonctions ne sont que des objets affectés à des variables.

L'Ascension, comme son nom l'indique, consiste à élever les choses d'en bas vers le haut. En JS, il s'agit de promouvoir des choses (variables ou fonctions) définies à la fin pour être définies à l'avant. Comme le montre l'exemple ci-dessus, foo et bar à l'intérieur du palan de fonction sont déplacés vers le haut, couvrant ainsi les fonctions globales foo et bar. La différence entre les fonctions locales bar et foo est que foo est promu au sommet et peut s'exécuter normalement, alors que la définition de bar() n'est pas promue, seule sa déclaration est promue, donc lorsque bar() est exécuté, le résultat est affiché comme indéfini au lieu d'être utilisé comme fonction.

Mode fonction instantanée

Les fonctions sont également des objets, elles peuvent donc servir de valeurs de retour. L'avantage d'utiliser une fonction auto-exécutable est de déclarer directement une fonction anonyme et de l'utiliser immédiatement, éliminant ainsi le besoin de définir une fonction qui est utilisée une fois puis de ne pas l'utiliser, et d'éviter le problème des conflits de noms. d'espace de noms dans js, il est donc facile que des conflits de noms de fonctions se produisent. En cas de conflit de noms, le dernier déclaré prévaudra.

Mode 1 :

Copier le code Le code est le suivant :

<script><br> (fonction () {<br>       var a = 1;<br>          fonction de retour () {<br> alerte(2);<br>         };<br> }()());//Pop up 2, la première parenthèse est auto-exécutable et la deuxième parenthèse exécute la fonction anonyme interne <br> </script>

Mode 2 : Pointage vers des variables de fonction auto-exécutables

Copier le code Le code est le suivant :

Mode 3 : Fonctions imbriquées

Copier le code Le code est le suivant :

Mode 4 : La fonction auto-exécutable attribue sa valeur de retour à une variable

Copier le code Le code est le suivant :

var abc = (fonction () {
          var a = 1;
              fonction de retour () {
                      renvoyer un ;
            }
           })();//La fonction auto-exécutable renvoie la fonction après retour à la variable
alert(abc());//Si c'est alert(abc), le code après l'instruction return apparaîtra ; si c'est abc(), la fonction après return sera exécutée

Mode 5 : La fonction s'exécute en interne, de manière récursive

Copier le code Le code est le suivant :

// Il s'agit d'une fonction auto-exécutable. La fonction s'exécute en interne, de manière récursive
. fonction abc() { abc();🎜>

Mode de rappel

Fonction de rappel : Lorsque vous passez une fonction write() en paramètre à une autre fonction call(), alors call() peut exécuter (ou appeler) write() à un certain moment. Dans ce cas, write() est appelée une fonction de rappel.

Écouteur d'événements asynchrones

Le modèle de rappel a de nombreuses utilisations. Par exemple, lors de l'attachement d'un écouteur d'événement à un élément de la page, il fournit en fait un pointeur vers une fonction de rappel qui sera appelée lorsque l'événement se produit. Tel que :

Copier le code Le code est le suivant :

document.addEventListener("click",console.log,false);


L'exemple de code ci-dessus montre le passé à la fonction de rappel console.log() en mode bouillonnant lorsque l'événement de clic sur le document est

Javascript est particulièrement adapté à la programmation événementielle car le mode de rappel permet au programme de s'exécuter de manière asynchrone.

Délai d'expiration

Un autre exemple d'utilisation du mode de rappel est l'utilisation des méthodes de délai d'attente fournies par l'objet fenêtre du navigateur : setTimeout() et setInterval(), telles que :

Copier le code Le code est le suivant :

Modèle de rappel dans la bibliothèque

Lors de la conception d'une bibliothèque js, les fonctions de rappel seront utiles. Le code d'une bibliothèque doit utiliser du code réutilisable autant que possible, et les rappels peuvent aider à réaliser cette généralisation. Lorsque nous concevons une énorme bibliothèque js, en fait, les utilisateurs n'auront pas besoin de la plupart des fonctions, et nous pouvons nous concentrer sur les fonctions de base et fournir des fonctions de rappel sous forme de "hook", ce qui nous facilitera la construction d'extensions, et méthodes de bibliothèque personnalisées

Curry

La technologie Curry est une technologie qui convertit une fonction en une nouvelle fonction simplifiée (lui permettant d'accepter moins de paramètres) en remplissant plusieurs paramètres dans le corps de la fonction. ————【Maîtrise de JavaScript】

En termes simples, le currying est un processus de conversion, c'est-à-dire le processus dans lequel nous effectuons une conversion de fonction. Exemple ci-dessous :

Copier le code Le code est le suivant :

Lorsque add() est appelé pour la première fois, il crée une fermeture pour la fonction interne renvoyée. Cette fermeture stocke les valeurs x et y d'origine dans des variables privées oldx et oldy.

Désormais, nous allons pouvoir utiliser les méthodes générales de n'importe quelle fonction curry, telles que :

Copier le code Le code est le suivant :

Quand utiliser le curry

Lorsqu'il s'avère que la même fonction est appelée et que les paramètres transmis sont pratiquement les mêmes, alors la fonction peut être un bon paramètre candidat pour le curry