title: Javascript OOP / Classes - multiple instances share same data
body: <p>I am writing some oop javascript code. I have a couple of instances of a class and have put different data into each. Unfortunately, as you will see with the example below, they appear to share the same data.</p>
  
  <p>Is it possible to get two separate instances of my class? How would it be done.</p>
  
  <p>Index.html</p>
  
  <pre><code> &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
  &lt;script type="text/javascript" src="test.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  debugger;
  
  // Do this because a page resart seems to keep old data
  function SetGlobals()
  {
      var ui;
      var el;
  
      // Arr00
      ui = document.getElementById("Arr00");
      el = arr0.arrayGet(0);
      ui.innerHTML = el.m_String;
  
      // Arr01
      ui = document.getElementById("Arr01");
      el = arr0.arrayGet(1);
      ui.innerHTML = el.m_String;
  
      // Arr10
      ui = document.getElementById("Arr10");
      el = arr1.arrayGet(0);
      ui.innerHTML = el.m_String;
  
      // Arr11
      ui = document.getElementById("Arr11");
      el = arr1.arrayGet(1);
      ui.innerHTML = el.m_String;
  }
  
  function MyOnLoad()
  {
      SetGlobals();
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000"&gt;
  
  &lt;div id="divScreen" style="display: block; width:100%; height="100%"&gt;
      &lt;div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Array 0/String 0: &lt;label id="Arr00"&gt;&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Array 0/String 1: &lt;label id="Arr01"&gt;&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Array 1/String 0: &lt;label id="Arr10"&gt;&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      Array 1/String 1: &lt;label id="Arr11"&gt;&lt;/label&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Test.js</p>
  
  <pre><code>var BaseARR = function()
  {
      _arr = []; // new Array();
  
      // Public functions that can access private members
      this.Add = function(arg)
      {
          var i, addAt;
  
          if(arg==null || (addAt = FindEnterPos(arg))&lt;0)
              return false;
  
          // since adding and not deleting anything, nothing of value will be returned
          _arr.splice(addAt, 0, arg);
  
          return true;
      };
      // This finds the entry position for in
      FindEnterPos = function(arg)
      {
          return (_arr.length + 1);
      };
      this.arrayGet = function(i)
      {
          return ((_arr != null &amp;&amp; i &gt;= 0 &amp;&amp; i &lt; _arr.length) ? _arr[i] : null);
      };
  };
  
  var stringId = function(id, str)
  {
      // public has a this. , privates have just var
      this.m_Id = id; // int
      this.m_String = str; // string
  };
  
  // This so allow statics
  var stringIdARR = function()
  {
      BaseARR.call(this);
  };
  </code></pre>