Analyse approfondie des fonctions et méthodes de mise en œuvre des fermetures JavaScript

1. Quelle est l'écriture et l'utilisation des fermetures et des fermetures

1. Qu'est-ce qu'une fermeture

Fermetures, l'explication officielle des fermetures est: une expression (généralement une fonction) qui a de nombreuses variables et un environnement lié à ces variables, de sorte que ces variables font également partie de l'expression. Caractéristiques des fermetures:

1). En tant que référence à une variable de fonction, elle est dans un état actif lorsque la fonction retourne.

2). Une fermeture est une zone de pile où aucune ressource n'est libérée lorsqu'une fonction revient.

En termes simples, JavaScript permet l'utilisation de fonctions internes - c'est-à-dire que les définitions de fonction et les expressions de fonction sont situées dans le corps de fonction d'une autre fonction. De plus, ces fonctions internes peuvent accéder à toutes les variables locales, paramètres et autres fonctions internes déclarées dans la fonction externe où ils résident. Lorsque l'une de ces fonctions internes est appelée en dehors de la fonction externe les contenant, une fermeture est formée.

2. Plusieurs façons d'écrire et d'utiliser des fermetures

Tout d'abord, nous devons comprendre que dans JS, tout est un objet, et une fonction est un type d'objet. Voyons d'abord les 5 façons d'écrire des fermetures et de comprendre brièvement ce que sont les fermetures. Une explication détaillée sera donnée plus tard.

 // La première fonction d'écriture de la méthode Circle (r) {this.r = r; } Cercle.pi = 3.14159; Cercle.prototype.area = function () {return cercle.pi * this.r * this.r; } var c = nouveau cercle (1.0); alerte (c.area ());

Cette méthode d'écriture n'a rien de spécial, elle ajoute simplement certaines propriétés à la fonction.

 // la deuxième façon d'écrire var cercle = function () {var obj = nouveau objet (); obj.pi = 3,14159; obj.area = fonction (r) {return this.pi * r * r; } return obj; } var c = new Circle (); alerte (c.area (1.0));

Cette façon d'écrire consiste à déclarer une variable et à attribuer une fonction à une variable en tant que valeur.

 // la troisième façon d'écrire var cercle = new object (); Cercle.pi = 3,14159; Cercle.area = function (r) {return this.pi * r * r; } alert (cercle.area (1.0));

Cette méthode est mieux comprise, qui consiste à nouveau un objet, puis à ajouter des propriétés et des méthodes à l'objet.

 // la quatrième façon d'écrire var cercle = {"pi": 3.14159, "zone": function (r) {return this.pi * r * r; }}; alerte (cercle.Area (1.0));

Cette méthode est utilisée plus fréquemment et est la plus pratique. var obj = {} doit déclarer un objet vide.

 // la cinquième façon d'écrire var cercle = nouvelle fonction ("this.pi = 3.14159; this.area = function (r) {return r * r * this.pi;}"); alerte ((new Circle ()). Area (1.0));

Pour être honnête, je n'ai jamais utilisé cette méthode d'écriture, vous pouvez donc vous y référer.

En général, les méthodes ci-dessus sont plus courantes dans les deuxième et quatrième, et vous pouvez choisir en fonction de vos habitudes.

Le prototype couramment utilisé dans JS apparaît dans le code ci-dessus, alors quelle est l'utilisation du prototype? Jetons un coup d'œil ci-dessous:

 var dom = function () {}; dom.show = function () {alert ("show message"); }; dom.prototype.display = function () {alert ("Message de propriété"); }; dom.display (); // erreur dom.show (); var d = new Dom (); D.Display (); D.Show (); //erreur

Nous déclarons d'abord une variable et y attribuons une fonction, car en JavaScript, chaque fonction a une propriété portotype, et l'objet ne le fait pas. Ajoutez deux méthodes, ajoutez et brise directement le prototype ci-dessus et consultez la situation de l'appel. Les résultats de l'analyse sont les suivants:

1. La méthode d'objet définie par l'attribut prototype est une méthode statique et ne peut être appelée directement avec le nom de classe! De plus, cette variable ne peut pas être utilisée dans cette méthode statique pour appeler d'autres propriétés de l'objet!

2. La méthode d'objet définie à l'aide de l'attribut prototype est une méthode non statique et ne peut être utilisée qu'après l'instanciation! Cela peut faire référence à d'autres propriétés de l'objet lui-même dans la méthode!

Regardons un autre code:

 var dom = function () {var name = "default"; this.sex = "boy"; this.success = function () {alert ("succès"); }; }; alert (dom.name); alert (dom.sex);

Jetons un coup d'œil en premier, que sera affiché? La réponse est que les deux sont affichés indéfinis, pourquoi? En effet, en JavaScript, chaque fonction forme une portée, et ces variables sont déclarées dans la fonction, elles sont donc dans le cadre de cette fonction et sont inaccessibles à l'extérieur. Pour accéder aux variables, vous devez de nouvelles instances.

 var html = {name: 'objet', succès: function () {this.say = function () {alert ("Bonjour, monde"); }; alerte ("OBJ Success"); }};

Jetons un coup d'œil à cette méthode d'écriture. En fait, il s'agit d'un «sucre grammatical» en JavaScript. Cette méthode d'écriture est équivalente à:

 var html = nouveau objet (); html.name = 'objet'; html.success = function () {this.say = function () {alert ("Bonjour, monde"); }; alerte ("OBJ Success");

Le HTML variable est un objet, pas une fonction, donc il n'a pas d'attribut prototype, et ses méthodes sont toutes des méthodes publiques, et HTML ne peut pas être instancié. Sinon, l'erreur suivante apparaîtra:

Mais il peut être attribué à d'autres variables en tant que valeur, comme var o = html; Nous pouvons l'utiliser comme ceci:

alert (html.name);

html.success ();

En parlant de cela, est-ce fini? Des gens prudents peuvent demander, comment accéder à la méthode Say dans la méthode de réussite? Est-ce html.success.say ()?

Bien sûr que non. Comme mentionné ci-dessus, en raison des restrictions de portée, il ne peut être accessible. Vous devez donc y accéder en utilisant la méthode suivante:

 var s = new html.success (); s.say (); // vous pouvez également écrire à l'extérieur html.success.prototype.show = function () {alert ("haha");}; var s = new html.success (); s.show ();

En ce qui concerne la portée de JavaScript, il ne peut pas être expliqué clairement en une ou deux phrases. Si vous êtes intéressé, vous pouvez trouver des informations en ligne.

2. Le but des fermetures JavaScript

En fait, en utilisant des fermetures, nous pouvons faire beaucoup de choses. Par exemple, simulez le style de code orienté objet; Exprimez le code plus élégamment et de manière concise; et améliorer l'efficacité de l'exécution du code sous certains aspects.

1. Fonction anonyme auto-exécutante

Nous savons que si toutes les variables ne sont pas ajoutées avec le mot clé VAR, la valeur par défaut sera ajoutée aux propriétés de l'objet global. Il existe de nombreux inconvénients à l'ajout de telles variables temporaires à l'objet global.

Par exemple: d'autres fonctions peuvent abuser de ces variables; Rendre l'objet global trop grand et affecter la vitesse d'accès (car la valeur de la variable doit être traversée de la chaîne prototype).

En plus d'utiliser le mot clé VAR chaque fois que nous utilisons la variable, nous rencontrons souvent une situation dans laquelle certaines fonctions ne doivent être exécutées qu'une seule fois et leurs variables internes n'ont pas besoin d'être maintenues, comme l'initialisation de l'interface utilisateur, afin que nous puissions utiliser des fermetures:

 var data = {table: [], arbre: {}}; (fonction (dm) {for (var i = 0; i <dm.Table.Rows; i ++) {var row = dm.Table.Rows [i]; for (var j = 0; j <row.cells; i ++) {drawCell (i, j);}}}) (data);

Nous créons une fonction anonyme et l'exécutons immédiatement. Étant donné que l'extérieur ne peut pas se référer aux variables à l'intérieur, la ressource sera publiée immédiatement après l'exécution de la fonction. La clé n'est pas de polluer l'objet global.

2. Cache de résultat

Nous rencontrerons de nombreuses situations de développement. Imaginez que nous avons un objet de fonction très long qui prend beaucoup de temps pour traiter chaque appel.

Ensuite, nous devons stocker la valeur calculée. Lorsque nous appelons cette fonction, nous recherchons d'abord dans le cache. Si cela ne peut être trouvé, nous le calculerons, puis mettez à jour le cache et renvoyez la valeur. Si cela est trouvé, nous pouvons renvoyer directement la valeur trouvée. Les fermetures font exactement cela car elle ne publie pas de références externes, afin que les valeurs à l'intérieur de la fonction puissent être préservées.

 var cachedSearchbox = (function () {var cache = {}, count = []; return {attachSearchbox: function (dsid) {if (dsid in cache) {// si le résultat est dans le cache return cache [dsid]; // renvoie l'objet dans le cache directement} var fsb = newit.webctrl cache [dsid] = fsb; // Mettez à jour le cache if (count.length> 100) {// Taille de cache de sécurité <= 100 CACHE [COUNT.SHIFT ();} CachedSearchbox.AttachSearchbox ("entrée");

De cette façon, nous lirons l'objet à partir du cache du deuxième appel.

3. Emballage

 var personne = fonction () {// La portée de la variable est à l'intérieur de la fonction, et le nom var ne peut pas être accessible à l'extérieur. var name = "Default"; return {getName: function () {return name; }, setName: function (newname) {name = newname; }}} (); print (personne.name); // Accédez directement, le résultat est un imprimé non défini (personne.getName ()); personne.setName ("Abruzzi"); print (personne.getName ());

Les résultats sont les suivants:

indéfini

défaut

Abruzzes

4. Implémenter les classes et l'héritage

 fonction personne () {var name = "default"; return {getName: function () {return name; }, setName: function (newname) {name = newname; }}}; var p = new personne (); P.SetName ("Tom"); alert (p.getName ()); var jack = function () {}; // hérité de la personne jack.prototype = new personne (); // Ajouter une méthode privée jack.prototype.say = function () {alert ("Bonjour, mon nom est jack"); }; var j = new Jack (); J.SetName ("Jack"); J.Say (); alert (j.getName ());

Nous définissons la personne, c'est comme une classe, nous avons un nouvel objet de personne, accédant à sa méthode.

Ci-dessous, nous définissons Jack, héritant de la personne et ajoutons nos propres méthodes.

Résumé personnel:

Je pensais que JavaScript n'était qu'une branche de Java, un langage de script, et c'était facile à apprendre, mais maintenant je trouve qu'il y a vraiment beaucoup de choses à apprendre. JavaScript est beaucoup plus puissant que nous ne le pensions.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.