Discussion détaillée sur l'utilisation des fermetures de fonctions JavaScript et du code de précaution, explication détaillée-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Discussion détaillée sur l'utilisation des fermetures de fonctions JavaScript et du code de précaution, explication détaillée

伊谢尔伦

Jul 25, 2017 pm 03:04 PM

javascript js 注意事项

Le mot anglais pour fermeture est fermeture, 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. En bref, c'est très fonctionnel 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. Chaîne de domaines d'effets JavaScript).

Exemple 1

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

Copier après la connexion

Cet exemple semble très simple Si vous analysez attentivement son processus d'exécution, il existe encore de nombreux points de connaissance : l'exécution de la fonction checkClosure est instantanée (peut-être seulement. prend 0,00001 millisecondes), une variable str est créée dans le corps de la fonction de checkClosure. Après l'exécution de checkClosure, str n'est pas libérée 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.

Exemple 2, optimiser le code

function forTimeout(x, y){
    alert(x + y);
}
function delay(x , y  , time){
    setTimeout(&#39;forTimeout(&#39; +  x + &#39;,&#39; +  y + &#39;)&#39; , 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 (c'est l'une des fonctionnalités du langage JavaScript), et vous pouvez également créer des espaces de noms pour réduire l'utilisation globale des variables.

Exemple 3 :

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

Copier après la connexion

Exemple 4 :

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, nous créons une variable rainman et l'initialisons à 5 en appelant directement la fonction anonyme, qui This une petite astuce est parfois très utile.

Exemple 5 :

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.

Remarque : la fermeture permet aux fonctions internes de référencer des variables dans la fonction parent, mais la variable est la valeur finale

Exemple 6 :

/**
 * <body>
 * <ul>
 *     <li>one</li>
 *     <li>two</li>
 *     <li>three</li>
 *     <li>one</li>
 * </ul>
 */
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}

Copier après la connexion

Vous constaterez que lorsque la souris Lorsque vous passez sur chaque élément

Solution un :

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}

Copier après la connexion

Solution deux :

var lists = document.getElementsByTagName(&#39;li&#39;);
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

Solution trois :

function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

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

AI Clothes Remover

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

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

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

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7345

Tutoriel Java

1627

Tutoriel CakePHP

1352

Tutoriel Laravel

1265

Tutoriel PHP

1214

Afficher plus

Related knowledge

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Wuthering WavesIntroduction aux points nécessitant une attention particulière lors des tests Mar 13, 2024 pm 08:13 PM

Pendant le test Mingchao, veuillez éviter les mises à niveau du système, les réinitialisations d'usine et le remplacement de pièces pour éviter que la perte d'informations ne provoque une connexion anormale au jeu. Rappel spécial : il n'y a pas de voie d'appel pendant la période de test, veuillez donc la manipuler avec prudence. Introduction aux précautions lors du test Mingchao : Ne pas mettre à niveau le système, restaurer les paramètres d'usine, remplacer les composants de l'équipement, etc. Notes : 1. Veuillez mettre à niveau le système avec soin pendant la période de test pour éviter la perte d'informations. 2. Si le système est mis à jour, cela peut entraîner un problème d'impossibilité de se connecter au jeu. 3. À ce stade, le canal d'appel n'a pas encore été ouvert. Il est conseillé aux joueurs de choisir s'ils souhaitent effectuer une mise à niveau, à leur propre discrétion. 4. Dans le même temps, un compte de jeu ne peut être utilisé qu’avec un seul appareil Android et un seul PC. 5. Il est recommandé d'attendre la fin du test avant de mettre à niveau le système de téléphonie mobile, de restaurer les paramètres d'usine ou de remplacer l'appareil.

Mar 22, 2024 pm 04:10 PM

Avec l'essor des plateformes de vidéos courtes, Douyin est devenu une partie intégrante de la vie quotidienne de nombreuses personnes. Diffuser en direct sur Douyin et interagir avec les fans sont le rêve de nombreux utilisateurs. Alors, comment démarrer une diffusion en direct sur Douyin pour la première fois ? 1. Comment démarrer une diffusion en direct sur Douyin pour la première fois ? 1. Préparation Pour démarrer la diffusion en direct, vous devez d'abord vous assurer que votre compte Douyin a terminé l'authentification par votre nom réel. Vous pouvez trouver le didacticiel d'authentification par nom réel dans « Moi » -> « Paramètres » -> « Compte et sécurité » dans l'application Douyin. Après avoir terminé l'authentification par nom réel, vous pouvez remplir les conditions de diffusion en direct et démarrer la diffusion en direct sur la plateforme Douyin. 2. Demandez une autorisation de diffusion en direct. Après avoir rempli les conditions de diffusion en direct, vous devez demander une autorisation de diffusion en direct. Ouvrez l'application Douyin, cliquez sur "Moi" -> "Creator Center" -> "Direct

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Foire aux questions et remarques : Utilisation de MyBatis pour les requêtes par lots Feb 19, 2024 pm 12:30 PM

Notes et FAQ sur les instructions de requête par lots MyBatis Introduction MyBatis est un excellent framework de couche de persistance qui prend en charge des opérations de base de données flexibles et efficaces. Parmi eux, les requêtes par lots sont une exigence courante. En interrogeant plusieurs éléments de données en même temps, la surcharge de connexion à la base de données et d'exécution SQL peut être réduite et les performances du système peuvent être améliorées. Cet article présentera quelques précautions et problèmes courants liés aux instructions de requête par lots MyBatis, et fournira des exemples de code spécifiques. J'espère que cela pourra aider les développeurs. Choses à noter lors de l'utilisation de M

Étapes et précautions pour installer pip sans réseau Jan 18, 2024 am 10:02 AM

Méthodes et précautions pour installer pip dans un environnement hors ligne L'installation de pip devient un défi dans un environnement hors ligne où le réseau n'est pas fluide. Dans cet article, nous présenterons plusieurs méthodes d'installation de pip dans un environnement hors ligne et fournirons des exemples de code spécifiques. Méthode 1 : utilisez le package d'installation hors ligne. Dans un environnement où vous pouvez vous connecter à Internet, utilisez la commande suivante pour télécharger le package d'installation pip à partir de la source officielle : pipdownloadpip Cette commande téléchargera automatiquement pip et ses packages dépendants à partir de la source officielle. source et enregistrez-le dans le répertoire courant. Déplacez le package compressé téléchargé vers un emplacement distant

Étapes et précautions d'utilisation du stockage local pour stocker des données Jan 11, 2024 pm 04:51 PM

Étapes et précautions d'utilisation de localStorage pour stocker des données Cet article présente principalement comment utiliser localStorage pour stocker des données et fournit des exemples de code pertinents. LocalStorage est un moyen de stocker des données dans le navigateur qui conserve les données locales sur l'ordinateur de l'utilisateur sans passer par un serveur. Voici les étapes et les éléments à prendre en compte lors de l'utilisation de localStorage pour stocker des données. Étape 1 : Vérifiez si le navigateur prend en charge LocalStorage

La relation entre js et vue Mar 11, 2024 pm 05:21 PM

La relation entre js et vue : 1. JS comme pierre angulaire du développement Web ; 2. L'essor de Vue.js en tant que framework front-end ; 3. La relation complémentaire entre JS et Vue ; Vue.

See all articles