Explication détaillée du code d'application de la fermeture js et du prototype

1. Fermetures

Une fermeture en js est une fonction (une structure de package fermé ou un espace qui n'est pas ouvert sur le monde extérieur)

1. Problèmes à résoudre par les fermetures

• Les données à l'intérieur de la fonction ne sont pas accessibles en dehors de la fonction

• À être résolu Le problème est que les données à l'intérieur de la fonction doivent être accessibles indirectement de l'extérieur

2 Structure de base

 function outer(){
        var data = "数据";        return function(){
            return data;
        }
    }

 function outer(){
    var data = "数据";     return {
         getData:function(){
             return data;
         },
         setData:function(value){
             data = value;             return data;
         }
     }
 }

3. fermeture

1) Utilisez des fermetures pour résoudre les problèmes de minuterie

由于js是单线程执行的，会先执行主任务，然后执行次要任务(包括setTimeOut和setInterval中的回调函数中的代码)

Par exemple :

for(var i = 0 ; i < 10; i++){
    setTimeout(function(){
         console.log(i);
     },0);
 }

n'imprimera pas 1 à 10 comme prévu, mais imprimera 10 10s Parce que la fonction de rappel setTimeout ne sera exécutée qu'après l'exécution de la boucle for. Si le temps est écoulé, exécutez

Solution :

 for(var i = 0; i< 3; i++){   function foo(j){
        return function(){
            console.log(j);
        };
    }    var f = foo(i);
    setTimeout(f, 0);
}

sera imprimé sous la forme 1 2. 3

2) Utilisez des fermetures pour sauvegarder l'environnement

Les fermetures partagent la même définition de fonction, mais enregistrent des environnements lexicaux différents

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Le texte changera lorsque vous cliquerez dessus12, 14 , 16

Mais si vous changez l'écriture :

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

Si vous l'écrivez comme ça, la taille du texte sera de 12, car ils partagent le même lexical environnement, après la première exécution, après et avant consiste à partager un environnement lexical

3) Utiliser des fermetures lors de la création d'objets ou de classes

Lors de la création d'un nouvel objet ou d'une nouvelle classe, les méthodes doivent est généralement associé au prototype de l'objet et n'est pas défini dans le constructeur de l'objet. La raison en est que la méthode sera réaffectée à chaque fois que le constructeur est appelé (c'est-à-dire que chaque objet est créé).

Par exemple, on peut écrire comme ceci :

function MyObject(name, message) {
  this.name = name.toString();  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

2 Prototype

Recommandations associées. :

Explication détaillée de l'utilisation des fermetures js - tutoriel js

Détails de l'analyse approfondie des fermetures Javascript et des méthodes d'implémentation du code

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!