title: Javascript, jQuery.extend and "new"
body: <p>I have a strange behavior while extending a prototype of an object using jQuery.extend.</p>
  
  <p>Assuming this sample class:</p>
  
  <pre><code>var SampleClass = function (anArray) { this.Init(anArray); };
  
  $.extend(SampleClass.prototype, {
  
      array: null,
      collection: new Array(),
  
      Init: function (arr) {
          var c = this;
          c.array = arr;
          c.insertInCollection();
      },
  
      insertInCollection: function () {
  
          var c = this;
          var l = c.array.length;
          for (var i = 0; i &lt; l; i++) {
              var bar = {};
              c.collection.push(bar);
          }
  
          alert(c.collection.length);
      }
  });
  </code></pre>
  
  <p>Then I execute this sample code</p>
  
  <pre><code>var arr1 = [{ name: 'foo', value: 20 }, { name: 'baz', value: 20}];
  var arr2 = [{ name: 'bar', value: 60 }, { name: 'gaz', value: 40}];
  
  c = new SampleClass(arr1);
  d = new SampleClass(arr2); //&lt;-- HERE LIES THE PROBLEM
  </code></pre>
  
  <p>When I create the object "c", the collection gets populated inside the "insertInCollection" function, and the alert returns a length of 2.
  However, when I instantiate the object "d" (doing a new TestClass(arr2)), the alert inside the "insertInCollection" function is fired and the alert shows 4!</p>
  
  <p>In practice, I can't get what happens in the background. Seems like the elements of the first collection are never deleted - when the second object ("d") is created, it already has the 2 elements of the object "c" existing inside the "collection" property.</p>
  
  <p>This also happens without using jQuery.extend, using the plain .prototype approach.</p>
  
  <p>Anyone can help me with this?</p>
  
  <p>Thank you in advance!</p>