Qu'est-ce qu'une meilleure approche de prototype pour plusieurs types

Question

Ignorant le fait que cela est mis en œuvre par nombreux cadres ..

Quelle est la meilleure façon de prototype pour plusieurs types d'objets.

Par exemple, devrais-je écrire:

Element.prototype.bind = function(eventType, fn) { 
    this.addEventListener(eventType, fn, false); 
}; 
NodeList.prototype.bind = function(eventType, fn) { 
    for (var i = 0, l = this.length; i < l; i++) { 
     this[i].addEventListener(eventType, fn, false); 
    } 
}; 

ou

Object.prototype.bind = function(eventType, fn) { 
    if (this instanceof Element) { 
     this.addEventListener(eventType, fn, false); 
    } else if (this instanceof NodeList) { 
     for (var i = 0, l = this.length; i < l; i++) { 
      this[i].addEventListener(eventType, fn, false); 
     } 
    } 
} 

Answer 1

Big drapeau rouge: jamais étendre Object.prototype! Il casse for (x in y) (ou au moins les attentes des gens de la façon dont cela fonctionne).

Dans le cas général, cependant, il est préférable d'étendre les prototypes de types individuels plutôt que d'essayer de trouver une base commune et d'effectuer des vérifications de réflexion. Il y a deux raisons fondamentales à cela. Tout d'abord, JavaScript est un langage dynamiquement typé, donc vous devriez généralement préférer le typage de canard et l'héritage de base sur instanceof et la réflexion. Dans de nombreux cas, il y a un petit avantage de performance, mais surtout c'est pour que vous ne perdiez pas de temps à combattre la langue. Deuxièmement, ce type de changement de méthode implique des connexions entre les méthodes commutées qui n'existent pas nécessairement. Dans votre exemple de code, cela peut être vu dans la version NodeList. Conceptuellement, une liste ne devrait pas être contraignante; s'il a une méthode bind, il devrait simplement traduire en appelant la méthode bind sur chacun de ses éléments. Cela garantit que si des étapes supplémentaires doivent être ajoutées à la liaison dans le futur (par exemple, solutions de contournement pour les anciens navigateurs non conformes au DOM ...), vous n'avez besoin de le faire qu'au même endroit. Mais le regarder en termes de commutation de type dans la "même fonction" donne la fausse impression que les deux Element.bind et NodeList.bind devraient fonctionner de la même manière - en appelant addEventListener. Voici comment je le mettre en œuvre:

Element.prototype.bind = function(eventType, fn) { 
    this.addEventListener(eventType, fn, false); 
}; 

NodeList.prototype.bind = function(eventType, fn) { 
    for (var i = 0, l = this.length; i < l; i++) { 
     this[i].bind(eventType, fn); 
    } 
};