Maison interface Web js tutoriel Une brève analyse des fonctions anonymes Javascript et des compétences auto-exécutables en fonctions_javascript

Une brève analyse des fonctions anonymes Javascript et des compétences auto-exécutables en fonctions_javascript

May 16, 2016 pm 03:16 PM

La fonction est l'objet le plus flexible de JavaScript. Nous expliquons ici uniquement l'utilisation de ses fonctions anonymes. Fonction anonyme : C'est une fonction sans nom de fonction.

La définition de la fonction peut être grossièrement divisée en trois manières :

Le premier type : C'est aussi le type le plus courant

function double(x){ 
return 2 * x; 
}
Copier après la connexion

Deuxième méthode : cette méthode utilise le constructeur Function et traite à la fois la liste de paramètres et le corps de la fonction comme des chaînes. Ceci est très gênant et n'est pas recommandé.

var double = new Function('x', 'return 2 * x;');
Copier après la connexion

Troisième type :

var double = function(x) { return 2* x; }
Copier après la connexion

Notez que la fonction à droite de "=" est une fonction anonyme. Après avoir créé la fonction, la fonction est affectée à la variable carré.

Création de fonctions anonymes

La première méthode consiste à définir la fonction carré comme mentionné ci-dessus, qui est également l'une des méthodes les plus couramment utilisées.

La deuxième façon :

(function(x, y){ 
alert(x + y); 
})(2, 3);
Copier après la connexion

Une fonction anonyme est créée ici (à l'intérieur de la première parenthèse), et la deuxième parenthèse est utilisée pour appeler la fonction anonyme et transmettre les paramètres. Les parenthèses sont des expressions, et les expressions ont des valeurs de retour, vous pouvez donc ajouter une paire de parenthèses après elles pour les exécuter

.

Fonction anonyme auto-exécutable

1. Qu'est-ce qu'une fonction anonyme auto-exécutable ?

Il fait référence à une fonction qui ressemble à ceci : (function {// code})();

2.Questions

Pourquoi (function {// code})(); peut être exécuté, mais function {// code}(); signale une erreur ?

3. Analyse

(1). Tout d’abord, il faut comprendre la différence entre les deux :
(function {// code}) est une expression, function {// code} est une déclaration de fonction.
(2). Deuxièmement, les caractéristiques de la "précompilation" js :
Dans la phase de "pré-compilation" de js, les déclarations de fonctions seront interprétées, mais les expressions seront ignorées.
(3). Lorsque js exécute function() {//code}();, puisque function() {//code} a été interprété dans l'étape de "précompilation", js ignorera function(){/ /code}, essayer d'exécuter ();, donc une erreur sera signalée
Lorsque js exécute (function {// code})();, puisque (function {// code}) est une expression, js la résoudra pour obtenir la valeur de retour Puisque la valeur de retour est une fonction, elle rencontre () ;, il sera exécuté.

De plus, la méthode de conversion d'une fonction en expression ne repose pas nécessairement sur l'opérateur de regroupement () On peut également utiliser l'opérateur void, l'opérateur ~, !

.

Par exemple :

!function(){ 
alert("另类的匿名函数自执行"); 
}();
Copier après la connexion

Fonctions et fermetures anonymes

Le mot anglais pour Closure est Closure, qui est une partie très importante des connaissances en JavaScript, car l'utilisation de fermetures peut réduire considérablement la quantité de notre code, rendre notre code plus clair, etc. Bref, c'est très puissant.

La signification de la fermeture : pour parler franchement, la fermeture est l'imbrication de fonctions. La fonction interne peut utiliser toutes les variables de la fonction externe, même si la fonction externe a été exécutée (cela implique une chaîne de portée JavaScript).

function checkClosure(){ 
var str = 'rain-man'; 
setTimeout( 
function(){ alert(str); } //这是一个匿名函数 
, 2000); 
} 
checkClosure();

Copier après la connexion

Cet exemple semble très simple. Il reste encore de nombreux points de connaissance après une analyse minutieuse de son processus d'exécution : l'exécution de la fonction checkClosure est instantanée (peut-être que cela ne prend que 0,00001 millisecondes), et une variable str est créée dans le corps de la fonction. de checkClosure. , str n'est pas libéré après l'exécution de checkClosure, car la fonction anonyme dans setTimeout a une référence à str. Après 2 secondes, la fonction anonyme dans le corps de la fonction est exécutée et str est libérée.

Utilisez des fermetures pour optimiser le code :

function forTimeout(x, y){ 
alert(x + y); 
} 
function delay(x , y , time){ 
setTimeout('forTimeout(' + x + ',' + y + ')' , time); 
} 
/** 
* 上面的delay函数十分难以阅读,也不容易编写,但如果使用闭包就可以让代码更加清晰 
* function delay(x , y , time){ 
* setTimeout( 
* function(){ 
* forTimeout(x , y) 
* } 
* , time); 
* } 
*/
Copier après la connexion

La plus grande utilisation des fonctions anonymes est de créer des fermetures (qui est l'une des fonctionnalités du langage JavaScript), et peuvent également créer des espaces de noms pour réduire l'utilisation de variables globales.

var oEvent = {}; 
(function(){ 
var addEvent = function(){ /*代码的实现省略了*/ }; 
function removeEvent(){} 

oEvent.addEvent = addEvent; 
oEvent.removeEvent = removeEvent; 
})();
Copier après la connexion

Dans ce code, les fonctions addEvent et removeEvent sont des variables locales, mais nous pouvons les utiliser via la variable globale oEvent, ce qui réduit considérablement l'utilisation de variables globales et améliore la sécurité de la page Web.

Nous souhaitons utiliser ce code :

oEvent.addEvent(document.getElementById('box') , 'click' , function(){});
var rainman = (function(x , y){ 
return x + y; 
})(2 , 3); 
/** 
* 也可以写成下面的形式,因为第一个括号只是帮助我们阅读,但是不推荐使用下面这种书写格式。 
* var rainman = function(x , y){ 
* return x + y; 
* }(2 , 3);
Copier après la connexion

Ici on crée une variable rainman et on l'initialise à 5 en appelant directement la fonction anonyme. Cette petite astuce est parfois très pratique.

var outer = null; 
(function(){ 
var one = 1; 
function inner (){ 
one += 1; 
alert(one); 
} 
outer = inner; 
})(); 
outer(); //2 
outer(); //3 
outer(); //4
Copier après la connexion

La variable one dans ce code est une variable locale (car définie au sein d'une fonction), elle n'est donc pas accessible de l'extérieur. Mais ici, nous avons créé la fonction interne, qui peut accéder à la variable un ; et la variable globale external fait référence à inner, donc appeler external trois fois fera apparaître le résultat incrémentiel.

Attention

1 La fermeture permet à la fonction interne de référencer la variable dans la fonction parent, mais la variable est la valeur finale

/** 
* <body> 
* <ul> 
* <li>one</li> 
* <li>two</li> 
* <li>three</li> 
* <li>one</li> 
* </ul> 
*/ 
var lists = document.getElementsByTagName('li'); 
for(var i = 0 , len = lists.length ; i < len ; i++){ 
lists[ i ].onmouseover = function(){ 
alert(i); 
}; 
}
Copier après la connexion

你会发现当鼠标移过每一个

  • 元素时,总是弹出4,而不是我们期待的元素下标。这是为什么呢?注意事项里已经讲了(最终值)。显然这种解释过于简单,当mouseover事件调用监听函数时,首先在匿名函数( function(){ alert(i); })内部查找是否定义了 i,结果是没有定义;因此它会向上查找,查找结果是已经定义了,并且i的值是4(循环后的i值);所以,最终每次弹出的都是4。

    解决方法一:

    var lists = document.getElementsByTagName('li'); 
    for(var i = 0 , len = lists.length ; i < len ; i++){ 
    (function(index){ 
    lists[ index ].onmouseover = function(){ 
    alert(index); 
    }; 
    })(i); 
    }
    
    
    Copier après la connexion

    解决方法二:

    var lists = document.getElementsByTagName('li'); 
    for(var i = 0, len = lists.length; i < len; i++){ 
    lists[ i ].$$index = i; //通过在Dom元素上绑定$$index属性记录下标 
    lists[ i ].onmouseover = function(){ 
    alert(this.$$index); 
    }; 
    }
    
    
    Copier après la connexion

    解决方法三:

    function eventListener(list, index){ 
    list.onmouseover = function(){ 
    alert(index); 
    }; 
    } 
    var lists = document.getElementsByTagName('li'); 
    for(var i = 0 , len = lists.length ; i < len ; i++){ 
    eventListener(lists[ i ] , i); 
    }
    Copier après la connexion

    2 内存泄露

    使用闭包十分容易造成浏览器的内存泄露,严重情况下会是浏览器挂死

  • Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Commandes de chat et comment les utiliser
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Comment créer et publier mes propres bibliothèques JavaScript? Comment créer et publier mes propres bibliothèques JavaScript? Mar 18, 2025 pm 03:12 PM

    L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.

    Comment optimiser le code JavaScript pour les performances dans le navigateur? Comment optimiser le code JavaScript pour les performances dans le navigateur? Mar 18, 2025 pm 03:14 PM

    L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.

    Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

    Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

    Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur? Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur? Mar 18, 2025 pm 03:16 PM

    L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.

    Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

    Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

    Comment utiliser les cartes source pour déboguer le code JavaScript minifié? Comment utiliser les cartes source pour déboguer le code JavaScript minifié? Mar 18, 2025 pm 03:17 PM

    L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.

    La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

    Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

    Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

    Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

    See all articles