Explication détaillée des fonctions JavaScript types_javascript skills

Cet article présente principalement les fonctions ordinaires, les fonctions anonymes et les fonctions de fermeture

Table des matières

• Fonctions ordinaires : Présente les caractéristiques des fonctions ordinaires : remplacements du même nom, objets arguments, valeurs de retour par défaut, etc.
• Fonctions anonymes : Présentation des caractéristiques des fonctions anonymes : fonctions anonymes variables, fonctions anonymes sans nom.
• Fonction de fermeture : Présente les caractéristiques de la fonction de fermeture.

1. Fonctions ordinaires
Exemple 1.1

function ShowName(name) {
  alert(name);
}
 

1.2 Écrasement des fonctions du même nom en Js

En JS, les fonctions ne sont pas surchargées. Si vous définissez des fonctions avec le même nom de fonction et des signatures de paramètres différentes, les fonctions ultérieures écraseront les fonctions précédentes. Lorsqu'elles sont appelées, seules les fonctions suivantes seront appelées.

var n1 = 1;
 
function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3
 
function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出：3
 

Objet arguments 1.3

arguments est similaire aux params de C#, exploitant les paramètres des variables : le nombre de paramètres passés dans la fonction est supérieur au nombre de paramètres une fois défini.

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 Valeur de retour par défaut de la fonction

Si la fonction ne spécifie pas de valeur de retour, la valeur de retour par défaut est « non définie »

function showMsg() {
}
alert(showMsg());//输出：undefined
　　

2. Fonction anonyme
2.1 Fonction anonyme variable

2.1.1 Descriptif
Des fonctions peuvent être affectées à des variables et des événements.

2.1.2 Exemple

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出9

2.1.3 Scénarios applicables
①Évitez la pollution du nom de fonction. Si vous déclarez d'abord une fonction avec un nom puis l'attribuez à une variable ou à un événement, vous abuserez du nom de la fonction.

2.2 Fonction anonyme sans nom

2.2.1 Descriptif
Autrement dit, lorsque la fonction est déclarée, elle est suivie des paramètres. Lorsque la syntaxe JS analyse cette fonction, le code qu'il contient est exécuté immédiatement.

2.2.2 Exemple

(function (p1) {
  alert(p1);
})(1);

2.2.3 Scénarios applicables
①Il ne doit être exécuté qu’une seule fois. Si le navigateur est chargé, la fonction ne doit être exécutée qu'une seule fois et ne sera pas exécutée ultérieurement.

3. Fonction de fermeture
3.1 Description

Supposons que la fonction A déclare une fonction B à l'intérieur, que la fonction B fait référence à une variable à l'extérieur de la fonction B et que la valeur de retour de la fonction A est une référence à la fonction B. Alors la fonction B est une fonction de fermeture.

3.2 Exemple

3.2.1 Exemple 1 : Référence globale et référence locale

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
 
function partShowA() {
  var showa = funA();//局部变量引用：只输出1
  showa();
}

allShowA est une variable globale qui fait référence à la fonction funA. L'exécution répétée de allShowA() affichera les valeurs accumulées de 1, 2, 3, 4, etc.

Exécutez la fonction partShowA(), car seule la variable locale showa est déclarée en interne pour référencer funA. Après exécution, en raison de la portée, les ressources occupées par showa sont libérées.

La clé de la fermeture est la portée : les ressources occupées par les variables globales ne seront libérées que lorsque la page changera ou que le navigateur sera fermé. Lorsque var allShowA = funA(), cela équivaut à allShowA faisant référence à funB(), de sorte que les ressources de funB() ne seront pas recyclées par GC, donc les ressources de funA() ne seront pas non plus recyclées.

3.2.2 Exemple 2 : Fonction de fermeture paramétrique

function funA(arg1,arg2) {
  var i = 0;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return funB;
}
var allShowA = funA(2, 3); //调用的是funA arg1=2，arg2=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(3);//调用的是funB setp=3,输出 4

3.2.3 Exemple 3 : Partage de variables au sein de la fonction parent funA

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

3.3 Scénarios applicables

① Assurer la sécurité des variables à l'intérieur de la fonction funA, car les variables de funA ne sont pas directement accessibles de l'extérieur.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.