1. fonctions anonymes
Les fonctions sont l'objet le plus flexible de JavaScript. Nous expliquons ici le but de ses fonctions anonymes. Fonctions anonymes: Ce sont des fonctions sans noms de fonction.
1.1 Définition d'une fonction. Tout d'abord, introduisons brièvement la définition d'une fonction. Il peut être à peu près divisé en trois manières.
Le premier: c'est aussi le plus courant
La copie de code est la suivante:
fonction double (x) {
retour 2 * x;
}
La deuxième méthode: cette méthode utilise le constructeur de fonction, qui utilise à la fois la liste des paramètres et le corps de fonction comme chaînes, qui est très gênant et n'est pas recommandée.
La copie de code est la suivante:
var double = nouvelle fonction ('x', 'return 2 * x;');
Le troisième type:
var double = fonction (x) {return 2 * x; }
Notez que la fonction à droite de "=" est une fonction anonyme. Après avoir créé la fonction, la fonction est affectée au carré variable.
1.2 Création de fonctions anonymes
La première méthode: définissez la fonction carrée mentionnée ci-dessus, qui est également l'une des méthodes les plus couramment utilisées.
La deuxième méthode:
La copie de code est la suivante:
(fonction (x, y) {
alerte (x + y);
})(vingt-trois);
Ici, une fonction anonyme est créée (dans le premier support), et le deuxième support est utilisé pour appeler la fonction anonyme et passer dans les paramètres.
2. Clôture
Le mot anglais pour la fermeture est la fermeture, qui est une partie très importante de JavaScript, car l'utilisation des fermetures peut considérablement réduire la quantité de notre code, rendre notre code plus clair, etc. En bref, les fonctions sont très puissantes.
Le sens de la fermeture: pour le dire franchement, les fermetures sont des fonctions de nidification. La fonction interne peut utiliser toutes les variables de la fonction extérieure, même si la fonction extérieure a été exécutée (cela implique la chaîne de portée JavaScript).
Exemple 1
La copie de code est la suivante:
Fonction CheckClosure () {
var str = 'rain-man';
setTimeout (
function () {alert (str); } // Ceci est une fonction anonyme
, 2000);
}
CheckClosure ();
Cet exemple semble très simple. Après une analyse minutieuse de son processus d'exécution, il y a encore de nombreux points de connaissance: l'exécution de la fonction de contrôle de contrôle est instantanée (peut-être qu'il n'a pris que 0,00001 millisecondes), une STR variable est créée dans le corps de la fonction de contrôle. Une fois la cloison exécutée, STR n'est pas libéré. En effet, la fonction anonyme dans Settimeout a une référence à Str. Le STR n'est libéré qu'après 2 secondes.
Exemple 2, optimiser le code
La copie de code est la suivante:
fonction fortimeout (x, y) {
alerte (x + y);
}
Retard de fonction (x, y, temps) {
setTimeout ('fortimeout (' + x + ',' + y + ')', temps);
}
/ **
* La fonction de retard ci-dessus est très difficile à lire et n'est pas facile à écrire, mais si vous utilisez des fermetures, le code peut être plus clair
* Retard de fonction (x, y, temps) {
* setTimeout (
* fonction(){
* Fortimeout (x, y)
*}
* , temps);
*}
* /
3. Donnez un exemple
La plus grande utilisation des fonctions anonymes consiste à créer des fermetures (l'une des fonctionnalités de la langue JavaScript), et également à créer des espaces de noms pour réduire l'utilisation de variables globales.
Exemple 3:
La copie de code est la suivante:
var oevent = {};
(fonction(){
var addEvent = function () {/ * L'implémentation du code est omise * /};
Fonction SupporEvent () {}
oevent.addevent = addevent;
OEVENT.REMOVEEVENT = REVOVEEVENT;
}) ();
Dans ce code, les fonctions AddEvent et DeVoveEvent sont toutes deux des variables locales, mais nous pouvons l'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 voulons utiliser ce code: oevent.addevent (document.getElementById ('box'), 'click', function () {});
Exemple 4:
La copie de code est la suivante:
var rainman = (fonction (x, y) {
retour x + y;
})(vingt-trois);
/ **
* Il peut également être écrit sous la forme suivante, car le premier support ne nous aide à lire, mais le format d'écriture suivant n'est pas recommandé.
* var rainman = fonction (x, y) {
* retourne x + y;
* }(vingt-trois);
* /
Ici, nous créons un Rainman variable et l'initialisons à 5 en appelant directement la fonction anonyme. Cette astuce est parfois très pratique.
Exemple 5:
La copie de code est la suivante:
var extérieur = null;
(fonction(){
var un = 1;
fonction inner () {
un + = 1;
alerte (une);
}
extérieur = intérieur;
}) ();
extérieur(); // 2
extérieur(); // 3
extérieur(); // 4
La variable dans ce code est une variable locale (car elle est définie dans une fonction), donc l'extérieur est inaccessible. Mais ici, nous créons une fonction intérieure, qui peut accéder à la variable; et référence également à la variable globale extérieure à l'intérieur, de sorte que trois appels à l'extérieur apparaîtront le résultat incrémentiel.
4. Faites attention
4.1 La fermeture permet aux fonctions de couche intérieure de se référer à des variables dans les fonctions parents, mais la variable est la valeur finale
Exemple 6:
La copie de code est la suivante:
/ **
* <body>
* <ul>
* <li> un </li>
* <li> deux </li>
* <li> trois </li>
* <li> un </li>
* </ul>
* /
var lists = document.getElementsByTagName ('li');
pour (var i = 0, len = lists.length; i <len; i ++) {
lists [i] .onMouseOver = function () {
alerte (i);
};
}
Vous constaterez que lorsque la souris déplacera chaque <li & rt; Élément, il apparaît toujours 4 au lieu de l'indice d'élément que nous attendons. Pourquoi est-ce? Les précautions ont été discutées (valeur finale). De toute évidence, cette explication est trop simple. Lorsque l'événement Mouseover appelle la fonction d'écoute, recherchez d'abord si je est défini dans la fonction anonyme (fonction () {alert (i);}), et le résultat est qu'il n'est pas défini; Par conséquent, il regardera vers le haut, et le résultat de la recherche est qu'il a été défini, et la valeur de i est 4 (la valeur de i après la boucle); Ainsi, à la fin, chaque pop-up est de 4.
Solution 1:
La copie de code est la suivante:
var lists = document.getElementsByTagName ('li');
pour (var i = 0, len = lists.length; i <len; i ++) {
(fonction (index) {
lists [index] .onMouseOver = function () {
alerte (index);
};
})(je);
}
Solution 2:
La copie de code est la suivante:
var lists = document.getElementsByTagName ('li');
pour (var i = 0, len = lists.length; i <len; i ++) {
listes [i]. $$ index = i; // Enregistrez l'index en liant l'attribut d'index $$ sur l'élément DOM
lists [i] .onMouseOver = function () {
alerte (cet index. $$);
};
}
Solution trois:
La copie de code est la suivante:
fonction eventListener (list, index) {
list.onmouseOver = function () {
alerte (index);
};
}
var lists = document.getElementsByTagName ('li');
pour (var i = 0, len = lists.length; i <len; i ++) {
EventListener (lists [i], i);
}
4.2 Fuite de mémoire
L'utilisation de fermetures est très facile à provoquer la fuite de la mémoire du navigateur. Dans les cas graves, le navigateur sera mort. Si vous êtes intéressé, veuillez vous référer à: http://www.vevb.com/article/57404.htm