Existe-t-il une raison pratique pour laquelle je choisirais une fermeture sur un objet?

Question

Je suis entré dans le javascript OOP récemment et de plus en plus, j'ai entendu parler de fermetures. Après une journée de torsion dans mon cerveau, je les comprends maintenant * mais je ne vois toujours pas l'avantage d'utiliser un objet. Ils semblent faire la même chose mais je soupçonne qu'il me manque quelque chose.

* Je pense que

Modifier

Je viens de passer 20 minutes à essayer d'écrire un exemple en utilisant un compteur écrit comme un objet et un compteur écrit une fermeture. Je suis arrivé à la conclusion que je ne comprends toujours pas les fermetures.

2 Modifier

Ok je suis parvenu à fouet d'un extrêmement exemple simple. Il n'y a pas grand-chose entre les deux, mais je trouve la version de l'objet plus lisible. Pourquoi aurais-je choisi l'un sur l'autre?

 

/*** Closure way ***/ 

function closureCounter() { 
    var count = 0; 
    return { 
     increase : function() { 
      count++; 
      alert(count); 
     }, 
     decrease : function() { 
      count--; 
      alert(count); 
     } 
    }; 
} 

var myCounter = closureCounter(); 

myCounter.increase(); 
myCounter.decrease(); 


/*** Object way ***/ 

function objCounter() { 
    var count = 0; 
    this.increase = function() { 
     count++; 
     alert(count); 
    } 
    this.decrease = function() { 
     count--; 
     alert(count); 
    } 

} 

var myCounter = new objCounter(); 

myCounter.increase(); 
myCounter.decrease(); 




 

Answer 1

Vous ne devez pas risquer de bogues supplémentaires et la confusion en créant un nouvel objet tout quand une fermeture fera la même chose avec un code plus propre et plus simple. Avec les fermetures, il est beaucoup plus facile de lier des objets.

Exemple:

function attachOnclick(eSource, eParent) { 
    var e = document.createElement("div"); 
    eParent.appendChild(e); 
    eSource.onclick = function() { e.style.backgroundColor = "881010"; } 
} 

contre

var elemLinks = []; 
function attachOnclick2(eSource, eParent) { 
    var e = document.createElement("div"); 
    eParent.appendChild(e); 
    elemLinks.push({elemSrc: eSource, elemDest: e}); // Append to mappings list 
    eSource.onclick = changeColor; 
} 

function changeColor() { 
    for(var i = elemLinks.length; i--;) { 
     if(this == elemLinks[i].elemSrc) { // We've found our match 
      elemLinks[i].elemDest.style.backgroundColor = "881010"; 
      return true; 
     } 
    } 

    return false; 
} 

Si vous trouvez des bugs dans le second échantillon, il prouve simplement que mon point de fermeture faire de l'écriture simple, un code plus propre plus facile.

Answer 2

Comme masterik dit, vous comparez des pommes et des oranges.

Un objet est juste une collection de paires clé/valeur. Une fermeture concerne une portée variable. Vous pouvez créer une fermeture dans n'importe quel scénario, en enveloppant cette partie de votre code dans une fonction. Cela crée une nouvelle fermeture dans cette portée de fonction.

http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

La différence entre vos deux exemples de création d'un objet est lié à différents modèles de classes d'écriture/objets JS. Le premier exemple que je crois est appelé le modèle de module? Le deuxième exemple est une autre façon courante de définir des classes dans JS, ou vous pouvez également utiliser le prototype de l'objet pour ajouter ces méthodes.

Pour plus d'informations sur la façon d'écrire des classes, essayez googler « modèles de classe js » (il y a assez peu de ressources, avec des motifs différents - module, le module révélant, singleton, etc.)