title: Best Way to Add Methods to Existing Javascript Object
body: <p>I am receiving an ajax feed of documents that looks something like this (much simplified):</p>
  
  <pre><code>aDocs = [{title:'new doc', ext:'pdf'}, {title:'another', ext:'xlsx'}];
  </code></pre>
  
  <p>I am going to iterate through the aDocs array and display information about each doc, while adding some methods to each doc that will allow for modifying the HTML for display and making API calls to update the database.</p>
  
  <p>I read <a href="https://stackoverflow.com/questions/7015693/how-to-set-the-prototype-of-a-javascript-object-that-has-already-been-instantiat">here</a> that in order to add methods to existing objects, you can use the <code>__proto__</code> attribute.  Something along the lines of:</p>
  
  <pre><code>function Doc(){}
  Doc.prototype.getExt = function(){return this.ext}
  Doc.prototype.getTitle = function(){return this.title}
  for (var i=0; i&lt;aDocs.length; i++){
    aDocs[i].__proto__ = Doc.prototype
  }
  </code></pre>
  
  <p>According to that article above,this isn't official javascript, isn't supported by IE (never will be), and will likely be deprecated in webkit browsers.</p>
  
  <p>Here's an alternative stab at it:</p>
  
  <pre><code>function getExt(){ return this.ext }
  function getTitle(){return this.title}
  for (var i=0; i&lt;aDocs.length; i++){
    aDocs[i].getExt = getExt;
    aDocs[i].getTitle = getTitle;
  }
  </code></pre>
  
  <p>Is this second alternative viable and efficient?  Or am I re-creating those functions and thereby creating redundant overhead?</p>
  
  <p>Again the above examples are simplified (I know <code>aDocs[i].ext</code> will solve the problem above, but my methods for display and API calls are more complicated).</p>