Why is JavaScript prototyping?
<p>That may strike you as a grammatically incorrect and possibly insane question, but here's what I mean: When trying to understand the concept of <code>prototype</code> in JavaScript, I came upon examples that were slightly more or less complicated versions of the following:</p>

<pre><code>//Guitar function constructor
function Guitar(color, strings) {
    this.color = color;
    this.strings = strings;
}
//Create a new instance of a Guitar
var myGuitar = new Guitar('Black', ['D', 'A', 'D', 'F', 'A', 'E']);
//Adding a new method to Guitar via prototype
Guitar.prototype.play = function (chord) {
    alert('Playing chord: ' + chord);
};
//Now make use of this new method in a pre-declared instance
myGuitar.play('D5');
</code></pre>

<p>So, on to my problem: Why the hell would you want to do this? Why would you not just put the <code>play</code> function in <code>Guitar</code> to begin with? Why declare an instance and then start adding methods later? The only reason I can see is if you wanted <code>myGuitar</code> to not have access to <code>play</code> when it is originally created, but I can come up with no example that elucidates a reason as to why you would want something like this.</p>

<p>It seems like it would make more sense to do this:</p>

<pre><code>function Guitar(color, string) {
    this.color = color;
    this.strings = strings;
    this.play = function (chord) {
        alert('Playing chord: ' + chord);
    };
}
var myGuitar = new Guitar('White', ['E', 'A', 'D', 'G', 'B', 'E']);
myGuitar.play('E7#9');
</code></pre>

<p>The real problem here is that the second example makes sense to me while the first example does not, whereas in reality, the first example is probably better for some reason(s). Unfortunately, every tutorial I have ever found just goes through the steps of using <code>prototype</code> but not why the <code>prototype</code> paradigm exists at all to begin with.</p>

<p>It seems that <code>prototype</code> allows you to do things that you would not otherwise be able to do, but I can come up with no good reasons as to why you would want to do them.</p>

<p><strong>Edit:</strong> Some responses:</p>

<ul>
<li>When I said "Why declare an instance and then start adding methods later?" I was more critiquing all of the examples I see that play out in the order of my first example. When this order is changed, as in Harmen's response below, it does make slightly more sense visually. However, this doesn't change the fact that, in the same vein as my first example, you can create an empty object function constructor, declare 100 instances of this object, and then only afterwards define what the original object actually <em>is</em> by giving it methods and properties via <code>prototype</code>. Perhaps this is generally done this way to hint at the Copy vs. Reference idea outlined below.</li>
<li>Based on several responses, here is my new understanding: If you add all of your properties and methods to the object function constructor, then create 100 instances of that object, you get 100 copies of all of the properties and methods. Instead, if you add all of your properties and methods to the <code>prototype</code> of the object function constructor, then create 100 instances of that object, you get 100 <em>references</em> to the single (1) copy of the object's properties and methods. This is obviously faster and more efficient and is why <code>prototype</code> is used (aside from altering things like <code>String</code> and <code>Image</code>, as mentioned below). So, why not do this:</li>
</ul>

<p>(Bulleted lists break any code right after them, apparently, so I have to add a line of separate text here)</p>

<pre><code>function Guitar(color, strings) {
    this.prototype.color = color;
    this.prototype.strings = strings;
    this.prototype.play = function (chord) {
        alert('Playing chord: ' + chord);
    };
}
var myGuitar = new Guitar('Blue', ['D', 'A', 'D', 'G', 'B', 'E']);
myGuitar.play('Dm7');
</code></pre>
