Fonction fonction en JavaScript-js tutoriel-php.cn

Fonction fonction en JavaScript

PHPz

Libérer： 2018-09-29 09:49:37

original

5188 Les gens l'ont consulté

Une fonction est un bloc de code réutilisable qui est piloté par un événement ou exécuté lorsqu'il est appelé. Ensuite, suivez l'éditeur pour apprendre la fonction en JavaScript. Amis, venez nous rejoindre. apprendre

Tout d'abord, je vais vous présenter plusieurs façons de définir des fonctions en JavaScript :

1. Le plus basique Utilisé comme déclaration de fonction distincte.

Le code est le suivant :

function func(){

Copier après la connexion

var func=function(){}

Copier après la connexion

2. Utiliser comme constructeur de classe :

function class(){}
class.prototype={};
var item=new class();

Copier après la connexion

3. Utiliser comme fermeture :

(function(){
//独立作用域
})();

Copier après la connexion

4. :

var addEvent=new function(){
   if(!-[1,]) 
      return  function(elem,type,func){
         attachEvent(elem,&#39;on&#39;+type,func);
      };
   else 
      return function(elem,type,func){
          addEventListener(elem,type,func,false);
      }
};//避免了重复判断

Copier après la connexion

5. Application mixte des quatre situations ci-dessus :

var class=new function(){
var privateArg;//静态私有变量
function privateMethod=function(){};//静态私有方法
return function(){/*真正的构造器*

Copier après la connexion

Types de fonctions de fonction JavaScript : présentez principalement les fonctions ordinaires, les fonctions anonymes et les fonctions de fermeture

Introduction aux fonctions ordinaires

1.1 Exemple

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

Copier après la connexion

1.2 Couverture des fonctions du même nom en Js

En Js, les fonctions ne sont pas surchargées Définissez des fonctions avec le même nom de fonction et différentes. les signatures de paramètres et les fonctions suivantes écraseront la fonction précédente. 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

Copier après la connexion

1.3 objets arguments

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 paramètres lorsqu'il a été défini quantité.

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

Copier après la connexion

1.4 Valeur de plage 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

Copier après la connexion

2. Fonction anonyme

2.1 Fonction anonyme variable

2.1.1 Description

peut être Les fonctions sont affectées aux variables et aux événements.

2.1.2 Exemple

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

Copier après la connexion

2.1.3 Scénarios applicables

①Évitez la pollution du nom de la 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 Description
c'est lorsque la fonction est déclarée, 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);

Copier après la connexion

2.2.3 Scénario applicable

①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 et que la fonction B fasse référence à l'extérieur de la fonction B. variable, et 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();
}

Copier après la connexion

allShowA est une variable globale et 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, les ressources occupées par showa sont libérées en raison de la portée.

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

Copier après la connexion

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

Copier après la connexion

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.

Le contenu ci-dessus est l'introduction de cet article à la fonction function dans js. J'espère que vous l'aimerez. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !