La meilleure Façon d'Ajouter des Méthodes Existantes Objet Javascript

Je suis la réception de l'ajax d'alimentation de documents qui ressemble à quelque chose comme ceci (très simplifié):

aDocs = [{title:'new doc', ext:'pdf'}, {title:'another', ext:'xlsx'}];

Je vais parcourir l'aDocs tableau et afficher des informations sur chaque doc, tout en ajoutant quelques méthodes pour chaque doc qui va permettre de modifier le code HTML pour l'affichage et faire des appels API pour mettre à jour la base de données.

J'ai lu ici que, dans le but d'ajouter des méthodes à des objets existants, vous pouvez utiliser le __proto__ attribut. Quelque chose le long des lignes de:

function Doc(){}
Doc.prototype.getExt = function(){return this.ext}
Doc.prototype.getTitle = function(){return this.title}
for (var i=0; i<aDocs.length; i++){
  aDocs[i].__proto__ = Doc.prototype
}

Selon que l'article ci-dessus,ce n'est pas officiel, javascript, n'est pas pris en charge par IE (ne le sera jamais), et sera probablement obsolète dans les navigateurs webkit.

Voici une alternative coup de couteau à elle:

function getExt(){ return this.ext }
function getTitle(){return this.title}
for (var i=0; i<aDocs.length; i++){
  aDocs[i].getExt = getExt;
  aDocs[i].getTitle = getTitle;
}

Est cette seconde alternative viable et efficace? Ou suis-je re-création de ces fonctions et de créer ainsi redondant dessus?

À nouveau les exemples ci-dessus sont simplifiées (je sais aDocs[i].ext permettra de résoudre le problème ci-dessus, mais mes méthodes d'affichage et d'appels de l'API est plus compliquée).

Quel est le problème avec ce que vous avez essayé?

OriginalL'auteur Eric H. | 2013-03-12

  1. 7

    Est cette seconde alternative viable et efficace?

    Oui.

    Ou suis-je re-création de ces fonctions et de créer ainsi redondant dessus?

    Non, les fonctions sont réutilisés, pas de re-créé. Tous les objets partageront la unique copie de la getExt et getTitle fonctions. Lors de l'appel aux fonctions de (dis) aDocs[1], dans l'appel, this fera référence à l'objet de la fonction est attaché. (Ceci s'applique uniquement si vous l'appeler en tant que partie d'une expression de la récupération de l'objet, par exemple, var title = aDocs[1].getTitle();)

    Alternativement, si vous avez aimé, vous pouvez créer de nouveaux objets qui partagent un prototype, et copier les propriétés de la aDocs objets pour les nouveaux objets, mais vous avez demandé à propos de l'attribution de nouvelles fonctions à existant objets, donc...

    OriginalL'auteur T.J. Crowder

  2. 2

    Augmentation (ajout de méthodes d') le prototype est souvent la meilleure façon de le faire, mais puisque vous avez à traiter avec des objets littéraux (ou JSON.l'analyse des résultats), vous auriez à soit augmenter la Object.prototype qui est pas fait, ou de créer un wrapper constructeur, avec les méthodes que vous devez attaché à son prototype. Le problème sera de: se familiariser avec this dans ce cas... je l'avais laisser les choses comme elles sont: l'utilisation de la deuxième approche: une simple boucle fera l'amende juste. En outre: prototype méthodes sont (un peu) plus lent de toute façon...

    La fonction des objets eux-mêmes sont en cours de création les plus brefs délais (si ils sont définis dans l'espace de noms global, ils sont créés dès que le script est analysé). Simplement en parcourant ces objets, et l'attribution une référence à une fonction pour chaque objet, vous n'êtes pas créer des fonctions supplémentaires.

    Juste essayer ceci:

    var someObj = {name:'someObj'}, 
anotherObj = {name: 'anotherObj'},
someFunction = function()
{
    console.log(this);
};
someObj.func = someFunction;
anotherObj.func = someFunction;
//or, shorter
someObj.func = anotherObj.func = someFunction;
//therefore:
console.log(someObj.func === anotherObj.func);//logs true! there is only 1 function object
someObj.func();//logs {name: 'someObj'}
anotherObj.func();//logs: {name: 'anotherObj'}

    N'a été posté beaucoup de questions (et de réponses) qui traitent de ce sujet plus en profondeur, donc si vous êtes intéressés:

    Des objets et des fonctions en javascript

    Imprimer la sous-classe nom à la place de "Classe" lors de l'utilisation de John Resig JavaScript de l'héritage de Classe de mise en œuvre

    Ce qui rend my.class.js si vite?

    Quelles sont les différences entre ces trois modèles de "classe" définitions en JavaScript?

    Sont tous plus ou moins liés à votre question

    Merci pour votre réponse et les ressources. J'ai donné TJ la réponse b/c il avait plus tôt et a toute l'essence ici. Mais +1 pour les ressources supplémentaires.

    OriginalL'auteur Elias Van Ootegem

  3. 1

    Dans ce cas, je voudrais juste passer l'objet dans le constructeur de la Doc;

    function Doc(obj){
   this.obj = obj;
}

Doc.prototype.getExt = function(){
    return this.obj.ext;
}
Doc.prototype.getTitle = function(){
   return this.obj.title;
}

var docs = [];
for (var i=0; i<aDocs.length; i++){
  docs.push(new Doc(aDocs[i]));
}

    Il y a deux problèmes avec votre approche:

    • Vous devez copier chaque méthode individuellement pour chaque instance.
    • Votre "classe" n'est pas documentée, n'importe où, faisant d'elle une classe rend plus claire que votre objet a ces méthodes.

    OriginalL'auteur Juan Mendes