Je voudrais expliquer la technologie de la fermeture JavaScript sous un angle différent. Puisque Java est utilisé pour l'explication, une connaissance de base de Java (c'est-à-dire la définition de classe et les nouveautés) est requise.
«J'ai lu et écouté diverses explications sur la fermeture, mais ce n'est pas tout à fait vrai. Ou je ne comprends pas du tout. Mais avec Java, vous en savez un peu? Comment c'est?
Ensuite, c'est de la conclusion immédiatement. Qu'est-ce qu'une fermeture?
Dites-vous Est-ce OK? Qu'est-ce qu'une fermeture?
** Une classe avec une seule méthode (comme un mon) **
Oh mon Dieu. Je t'ai dit. J'expliquerai plus que ce que j'ai dit.
Je voudrais commencer par un exemple. Il y a souvent un exemple "Faisons un compteur!" Dans la description de la fermeture. Je ne pense pas que ce soit faux comme exemple, donc je vais expliquer en utilisant le compteur comme exemple ici aussi. Voici un exemple de compteur implémenté dans Closure!
//Faire une fermeture
function createCounter() { //Fermeture pour faire un comptoir
var count=0; //Une variable qui stocke la valeur du compteur
return function() { //Déclaration de fonction en fonction
return ++count; //Augmentez la valeur du compteur puis retournez
};
};
Je vois. Je ne sais pas. JavaScript a une grammaire similaire à Java, mais elle est différente. .. ..
Voyons comment l'utiliser sans le savoir.
//Utilisez une fermeture
var cntA=createCounter(); //Création du compteur A
console.log(cntA()); //1 s'affiche en premier
console.log(cntA()); //Puis 2 s'affiche
console.log(cntA()); //Puis 3 s'affiche
var cntB=createCounter(); //Création du compteur B
console.log(cntB()); //1 s'affiche en premier
console.log(cntB()); //Puis 2 s'affiche
console.log(cntB()); //Puis 3 s'affiche
[résultat]
1
2
3
1
2
3
Hmm. .. .. ...... Je ne sais pas ce que signifie être une fermeture. Je pense que.
Jetons un second regard et réécrivons cela en Java. Alors c'est vraiment facile. Je pense, "Quoi? Est-ce tout cela?", Si sérieusement.
Maintenant, créons exactement la même chose (c'est-à-dire la classe de compteur) en Java. Allons-y? Ceci est un exemple de Java!
class Counter //Contre classe
{
private int count; //Champ contenant la valeur du compteur
public int add() //Méthode à ajouter
{
count ++; //J'ajoute la valeur du compteur
return count; //Et revenant
}
}
Du point de vue de ceux qui peuvent utiliser Java, c'est un compteur peu importe comment vous le regardez. Les bases de la création de classe. Il n'y a pas de points difficiles. C'est facile à comprendre jusqu'à la mort.
Ensuite, comment l'utiliser.
Créez deux instances (cntA, cntB) et appelez la méthode ʻadd () `pour augmenter la valeur.
Sans surprise, les deux instances sont indépendantes, de sorte qu'elles augmentent en valeur séparément l'une de l'autre.
La source ressemble à ceci.
//Lors de l'utilisation
Counter cntA=new Counter(); //Créer une instance cntA
System.out.println(cntA.add()); //1 s'affiche
System.out.println(cntA.add()); //2 s'affiche
Counter cntB=new Counter(); //Créer une instance cntB
System.out.println(cntB.add()); //1 s'affiche
System.out.println(cntB.add()); //2 s'affiche
[résultat]
1
2
1
2
Non, c'était avant. Facile Facile. Tout le monde peut comprendre ce mon.
alors. Ça y est. C'est une fermeture.
…… e? !! C'est? Est-ce une fermeture? Vraiment? !! Est-ce la seule chose? !!
alors. C'est tout.
Bref, (encore) une fermeture est une classe (et ses méthodes) avec une seule méthode **. Tout au plus, des choses comme celle-ci sont traitées spécialement avec un nom comme "plus proche". Je ne comprends pas le monde de JavaScript. [^ 3]
[^ 3]: J'ai écrit ça, mais le concept de fermeture existait bien avant la naissance de JavaScript.
Si vous comprenez cela, vous serez en mesure de comprendre clairement "diverses choses que l'on dit être les caractéristiques des fermetures que vous ne comprenez pas" en Java.
--Closer a une fonction dans la fonction! En JavaScript, il n'y a pas de mot-clé de classe (jusqu'à récemment) et nous utilisons à la place function (). Si vous y définissez une méthode (également function ()), cela signifie qu'il y a une fonction à l'intérieur de la fonction.
--Croja peut avoir un état! En Java, il est naturel que les variables d'instance soient actives tant que l'instance est active. Il ne s'agit pas de faire du bruit.
Je me demande ... N'est-ce pas un mon qu'on appelle volontairement une fonctionnalité? J'ai pensé ou pas. C'était juste ça. .. .. ..
Donc, je pense que vous pouvez comprendre le concept de fermeture maintenant. e? Parfait? avec ça? Oui. Conceptuellement, c'est tout.
Maintenant que vous comprenez le concept, jetons à nouveau un coup d'œil à la source de la fermeture écrite en JavaScript!
function createCounter() { //Fermeture pour faire un comptoir
var count=0; //Une variable qui stocke la valeur du compteur
return function() { //Déclaration de fonction en fonction
return ++count; //Augmentez la valeur du compteur puis retournez
};
};
var cntA=createCounter();
console.log(cntA());
console.log(cntA());
Hmm. Je pense que je comprends un peu plus qu'avant, mais je ne comprends toujours pas. .. .. Je pense que. Pourquoi est-ce? Ce n'est pas parce que ** le concept de fermeture est difficile, mais à cause de problèmes de notation spécifiques à JavaScript **. Les fermetures sont conceptuellement similaires aux classes Java, mais la source ci-dessus utilise pleinement les fonctionnalités spécifiques à JavaScript qui ne sont pas familières à Java:
--Peut gérer les fonctions comme des valeurs -Ainsi, vous pouvez l'assigner à une variable ou le renvoyer comme valeur de retour
C'est pourquoi cela semble plus difficile qu'il ne l'est en réalité. C'est également un seuil élevé pour les programmeurs Java, alors jetons un coup d'œil.
Prenons maintenant un exemple de la classe de compteur créée en Java que nous avons vue précédemment, qui est convertie «fidèlement» d'une notation de type Java à JavaScript.
function counter() //Fonctionner la classe()changer en
{
var count=0; //Champ contenant la valeur du compteur
this.add=function() //Méthode à ajouter
{
count ++; //J'ajoute la valeur du compteur
return count; //Et revenant
}
}
//Lors de l'utilisation
var cntA=new counter(); //Créer une instance cntA de fermeture
console.log(cntA.add()); //Ajouter et afficher la valeur de retour à l'écran
console.log(cntA.add());
var cntB=new counter(); //Créer une instance cntB de fermeture
console.log(cntB.add()); //Ajouter et afficher la valeur de retour à l'écran
console.log(cntB.add());
[résultat]
1
2
1
2
Oh. Cela peut être compris par le cerveau Java. C'est vraiment du JavaScript "Java". Il n'y a aucun problème avec le résultat de l'exécution.
alors.
Cette notation est facile à comprendre pour les programmeurs Java, mais d'un autre côté, elle ne ressemble pas à JavaScript, bien sûr.
Par exemple, écrire console.log (cntA.add ()); semble redondant.
C'est vrai.
Ici, counter () joue un rôle de classe, mais comme vous pouvez le voir, c'est en fait function (), donc c'est une fonction en premier lieu.
Quand il s'agit de cela, il n'y a qu'une seule méthode de toute façon, et si vous écrivez console.log (cntA ());, add () est appelé en interne, n'est-ce pas mieux? Je pense.
Donc, en fait (c'est la partie avec laquelle les boutiques Java ne sont pas familières) ** En JavaScript, la fonction est un objet **. En d'autres termes, vous pouvez ** affecter la fonction elle-même à une variable en tant que valeur **, ou ** la renvoyer en tant que valeur de retour **.
Donc, vous devriez implémenter counter () comme "une fonction qui renvoie la fonction ʻadd ()` elle-même "! C'est (probablement) une idée de type JavaScript.
Voyons comment traiter une fonction comme une valeur.
Cela dit, ce n'est pas une histoire séparée, c'est en fait assez facile.
Plus précisément, si vous prenez les parenthèses à la fin de la fonction (c'est-à-dire si c'est ʻadd () , écrivez ʻadd), vous pouvez traiter la fonction comme une valeur.
Vous pouvez le voir immédiatement en regardant l'exemple. Je pense que l'exemple le plus simple ressemble à ceci:
//Cet exemple effectue les opérations suivantes:
//-Attribuer la fonction elle-même à une variable
//-Mettre des parenthèses sur les variables et appeler et exécuter la fonction assignée
function hello() //Définition des fonctions
{
console.log("hello world!"); //Sortie de chaîne
}
var hoge=hello; //Prenez les parenthèses et assignez la fonction elle-même à une variable
hoge(); //Vous pouvez exécuter la fonction affectée en mettant des parenthèses après la variable.
var fuga=hoge; //Essayez de l'attribuer à une autre variable.
fuga(); //Si vous mettez également des parenthèses là-dessus, vous pouvez exécuter la fonction affectée.
Résultat d'exécution
hello world!
hello world!
Oh oh! La fonction est affectée à une variable en tant que valeur! C'est un mécanisme assez sympa de pouvoir l'exécuter en tant que fonction en ajoutant des parenthèses après la variable.
Appliquons ceci au contre-exemple.
Vous pouvez le changer pour que lorsque vous appelez counter (), la fonction ʻadd () `** elle-même ** soit renvoyée.
function counter() // add()Renvoie la fonction elle-même
{
var count=0;
this.add=function()
{
count ++;
return count; //Renvoie la valeur du compteur
}
return add; // ★★★★add()Renvoie la fonction «elle-même»
}
//Lors de l'utilisation
var cntA=counter(); // add()Est retourné et ajouté à cntA()Est inclus
console.log(cntA()); // add()Le résultat de l'exécution est affiché
console.log(cntA());
var cntB=counter(); // add()Est retourné
console.log(cntB()); // add()Le résultat de l'exécution est affiché
console.log(cntB());
Comment c'est? Nous renvoyons les fonctions comme valeurs de retour et les affectons à des variables! C'est devenu une source assez semblable à JavaScript!
Cependant, vous pouvez le rendre plus semblable à JavaScript. La prochaine étape est la "fonction anonyme".
Tout d'abord, regardons à nouveau la source ci-dessus.
Bien que ce soit ʻadd () fourni comme méthode, il n'est appelé que depuis counter () `. Alors vous n'avez pas à vous donner la peine de lui donner un nom comme «ajouter», non? C'est une idée de type JavaScript. C'est donc une fonction anonyme.
C'est la même chose que lorsqu'il n'y a qu'une seule personne autre que vous dans la pièce, l'autre personne se retourne lorsque vous dites «cela» sans avoir à vous donner la peine d'appeler votre nom.
Au fait, il y a quelques classes anonymes en Java, mais si vous les utilisez trop ... il y a un air dans le monde Java. L'image (impression individuelle) est que les passionnés l'utilisent avec un visage bâclé, en partie parce que "la lisibilité diminue lors de l'utilisation d'une classe anonyme". Mais dans le monde de JavaScript, les fonctions anonymes sont utilisées de manière assez vague. Est-ce une différence culturelle entre le côté serveur et le serveur frontal? </ font>
Eh bien c'est bien. Utilisons une fonction anonyme. Plus précisément, les parties suivantes de la source seront modifiées.
this.add=function()
{
count ++;
return count; //Renvoie la valeur du compteur
}
return add; // ★★★★add()Renvoie la fonction «elle-même»
En utilisant la fonction anonyme, la source ci-dessus peut être réécrite comme suit.
return function() //★★★★ Ecrire la fonction à retourner immédiatement après le retour
{
count ++;
return count; //Renvoie la valeur du compteur
}
C'est incroyable. Certainement "ʻadd`" est parti.
C'est un vieux sentiment humain comme moi que c'est parce que c'est parti, mais dans le monde de JavaScript, ce genre de chose est assez normal.
Si on vous dit que vous pouvez renvoyer la fonction elle-même comme valeur de retour, vous comprendrez que c'est le cas.
Cependant, si la fonction qui est réellement retournée est définie sur place immédiatement après l'instruction return comme celle-ci, la boutique Java devra ressentir une sensation d'inconfort. .. ..
C'est probablement
var a=5;
return a;
Combien écrire
return 5;
N'est-ce pas un sentiment qu'il est plus rapide d'écrire?
Regardons maintenant à nouveau la source entière, reflétant la fonction anonyme.
function counter()
{
var count=0;
return function() //★★★★ Immédiatement après le retour, décrit une fonction anonyme à retourner
{
count ++;
return count; //Renvoie la valeur du compteur
}
}
Lors de l'utilisation
var cntA=counter(); //La fonction anonyme elle-même est renvoyée et affectée à la variable cntA
console.log(cntA()); //Vous pouvez l'appeler parce qu'il porte le nom cntA!
console.log(cntA());
var cntB=counter(); //Si vous l'assignez à une autre variable, il devient une autre instance.
console.log(cntB()); //Cela fonctionne indépendamment
console.log(cntB());
Hou la la! Au début, la source de la fermeture JavaScript qui disait "Je ne sais pas du tout ce que vous faites même si vous regardez ça" a été créée avant que vous ne le sachiez! Ca c'était quoi? ** Si vous traitez une fonction comme une valeur ou utilisez une fonction anonyme, ce genre de "vraiment JavaScript!" Devient la source de Kanji **? A été trouvé a été trouvé. Je vois.
J'écrirai le résultat de l'exécution au cas où. C'est comme suit.
1
2
1
2
Je vais résumer brièvement le contenu jusqu'à présent.
――La fermeture est un mécanisme comme "une classe avec une seule méthode" en Java. --Conceptuellement super facile -C'est pourquoi vous pouvez créer plusieurs instances indépendantes ――La raison pour laquelle cela semblait étrangement difficile est à cause de la partie qui est propre à JavaScript, comme le retour de la fonction elle-même ou l'utilisation d'une fonction anonyme, qui n'a rien à voir avec la fermeture. «Je le répète, le concept de fermeture en lui-même n'est pas du tout difficile, c'est facile.
Même si vous regardez divers blogs qui expliquent la fermeture, vous vous retrouverez ici. Mais peut-être que le sens est différent. Dans un tel blog et cet article.
Je pense que les gens qui ont commencé à programmer à partir de JavaScript sont probablement entrés en contact avec l'idée de «classes et instances» (au sens large) après un long moment après avoir commencé la programmation. Parce que, dans le monde de JavaScript, vous pouvez écrire beaucoup de code qui peut être utilisé sur le terrain sans le savoir.
Je pense que la raison pour laquelle ces gens tombent sur des fermetures est probablement parce qu'il y a tellement d'obstacles à comprendre que les fermetures sont des exemples de fonctions. Tout d'abord, "Qu'est-ce qu'une instance?" "Quel est le premier mot que vous entendez?" Et si vous ne connaissez pas les avantages des instances de classe, vous ne connaissez pas les avantages des fermetures.
Il y a beaucoup de questions dans le monde ** "Qu'est-ce qui me rend heureux avec Closure?" **, mais je pense que la réponse est ** "Cela peut être compris en comprenant l'orientation des objets basée sur les classes" **. Je pense personnellement.
D'un autre côté, si vous avez commencé à programmer à partir de Java, vous êtes nouveau depuis le début. Il y a une classe, une nouvelle, une instance est créée et elle peut enfin être utilisée. C'est la structure de Java, un langage orienté objet basé sur des classes, donc si vous ne le comprenez pas, vous ne pouvez pas écrire de code Java.
Donc, au contraire, si vous comprenez Java, vous pouvez facilement comprendre la fermeture. Je pense que c'est juste qu'il n'y avait pas beaucoup de gens qui ont expliqué du point de vue que «les fermiers sont des cours avec une seule méthode».
Donc encore. ** Qu'est-ce qui vous rend heureux à propos de Cloja? ** ** Je l'ai écrit jusqu'à présent, mais je pense que même les magasins Java peuvent avoir cette question. Cependant, ce n'est pas une question de fermetures qui a été dite dans le passé, mais cela signifie "N'est-ce pas d'accord avec une classe, pas une fermeture?"
En fait, d'après le contenu jusqu'à présent, ne pensez-vous pas, "Non, alors vous devriez utiliser la classe normalement au lieu de la fermeture?" En fait, la fermeture est la version dégradée de l'instance de classe elle-même (c'est-à-dire avec la limitation d'une seule méthode). [^ 2]
[^ 2]: Je pense qu'il y a plusieurs choses comme "Je n'aime pas ça, n'est-ce pas exactement une classe?", Mais cela s'écarte du but de l'article.
Je le traite comme un mécanisme particulièrement pratique et difficile, et je ne comprends pas du tout. C'est super facile si vous vous demandez à quel point c'est difficile parce que tout le monde dit que c'est difficile et difficile. Je pense que c'est l'impression des programmeurs Java en général.
En fait, tous les avantages des fermetures (que l'on dit être) peuvent être résolus en les implémentant dans une classe. De plus, si vous l'implémentez dans une classe, vous pouvez avoir plusieurs méthodes. Cette fois, j'ai donné un exemple de compteurs, mais si vous pensez normalement et faites des compteurs, vous voudrez peut-être non seulement augmenter le nombre mais aussi réinitialiser les compteurs et, dans certains cas, les diminuer. Mais non. Une fermeture ne peut avoir qu'une seule méthode. Si tel est le cas, n'est-il pas préférable d'utiliser la classe depuis le début au lieu d'utiliser la fermeture? Je pense qu'il y a beaucoup de gens qui pensent que
C'est juste. C'est une impression individuelle, mais c'est peut-être une différence de valeurs.
Dans le monde Java, il est naturel de créer des classes. Ou plutôt, c'est la seule option. Mais dans le monde de JavaScript, vous pouvez créer des classes ou des fermetures. Si c'est le cas, je pense que c'est une personne facile, mais «facile» est subjectif. Je pense qu'il y a pas mal de gens dans le monde de JavaScript qui ont le sentiment qu'il est gênant de se donner la peine de créer une classe, ou qui ne savent pas ce qu'est une classe en premier lieu, et encore moins comment la créer. Je vais.
Une autre chose que je peux dire, c'est que le monde de JavaScript tourne essentiellement autour de function ().
En premier lieu, je pense que JavaScript est issu "d'un mécanisme pour décrire le traitement de rappel qui est exécuté lorsqu'un certain bouton est enfoncé". Par exemple, si vous essayez d'implémenter un mécanisme simple qui vérifie le contenu en appelant la fonction JavaScript lorsque le bouton est cliqué (bien que je ne l'ai pas beaucoup vu car cette façon d'écrire n'est pas populaire de nos jours), Il est écrit.
<input type="button" name="submitButton" value="ajouter à" onClick="checkInput();">
ʻOnClick = "checkInput ();" part, ce qui signifie" lorsque ce bouton est cliqué, appelez la fonction JavaScript checkInput (); `".
Si vous le regardez, vous pouvez voir l'atmosphère, mais c'est un peu inapproprié de décrire le fait que c'est une instance d'une classe ici.
De plus, récemment, jQuery est utilisé pour une telle partie, mais lors de l'implémentation d'une fonction de rappel ici, écrivez-la comme ceci.
$(function(){
var pushed=false; //Pas encore pressé
$('#button').on('click', function() {
if(pushed===false)
{
pushed=true; //C'était poussé!
submit(); //Soumettre
} else { //Empêche de soumettre deux fois
alert('L'avez-vous déjà pressé?');
}
})
})
C'est aussi une sorte de clôture, mais à un tel niveau de framework, "Non, je veux l'implémenter dans une classe!" N'est pas du tout envisagé en premier lieu. Je ne pense pas qu'il y ait quoi que ce soit que vous ne puissiez pas écrire dans une classe, mais comment l'implémentez-vous? Je réfléchis un instant. Si oui, est-il plus facile d'utiliser la fermeture? Je pense. Est-ce une question de familiarité? C'est ça?
alors,
--Croja était en fait facile «Mais parfois, je pense qu'il serait préférable de l'implémenter dans une classe. ――Cependant, la fermeture peut être plus compatible pour se déplacer sur une page Web
Est-ce que c'est l'endroit? Comment c'est?
J'espère que les programmeurs Java peuvent désormais comprendre les fermetures.
En passant, ne pensez-vous pas que JavaScript est assez intéressant? Je pense que c'est un monde profond. Avec SPA (Application à page unique), les pages Web continueront à être affichées et auront un état, au lieu d'être jetées à chaque fois que l'écran change. Dans ce cas, je pense qu'un sens complètement différent de la programmation JavaScript conventionnelle, mais plutôt proche de la programmation côté serveur, sera nécessaire. Vous devez également écrire des classes et des objets. Le sentiment cultivé en Java n'est-il pas vraiment nécessaire? Je pense.
N'est-il pas intéressant de profiter de cette opportunité pour commencer à étudier sérieusement JavaScript?
Recommended Posts