title: How to change array of one instance
body: <p>relevant parts of the code:</p>
  
  <pre><code>function myObj(wgtId, options, parentPage) {
      if (!wgtId) return;
  
      this.colors=['red','pink'];
      hmiWidget.call(this, wgtId, options, parentPage);
  }
  
  myObj.prototype = new hmiWidget();  // Inheriting the base class Widget
  
  myObj.prototype.setValue = function (newValue) {
      var index = newValue;
      var color = this.colors[index];
      this.elem.style.backgroundColor = color;
  };
  
  $hmi.fn.myObj = function (options, parentPage) {
      return new myObj(this.wgtId, options, parentPage);
  };
  </code></pre>
  
  <p>Usage:</p>
  
  <pre><code>  $(".myClass").myObj( {colors:['#ccccff','#000099']} );  // start with blue
    . . .
    objWidget.setValue(newVal); 
  </code></pre>
  
  <p>All this works well.</p>
  
  <p>Now I need to change the colors array for specific instance.</p>
  
  <p>I tried to use -</p>
  
  <pre><code>objWidget.colors[0] = "#ccffcc"; 
  </code></pre>
  
  <p>but it affected all instances. (I do not understand why all instances are affected.)</p>
  
  <p>from <a href="https://stackoverflow.com/questions/4425318/javascript-object-members-that-are-prototyped-as-arrays-become-shared-by-all-cla">Javascript object members that are prototyped as arrays become shared by all class instances</a> 
  I understand that I cannot add and use</p>
  
  <pre><code>code:
  myObj.prototype.setColor = function (index, newColor) {
      this.colors[index] = newColor;
  }
  usage:
  objWidget.setColor(0, "#009900");
  </code></pre>
  
  <p>because 'prototype' will share my colors array between all instances.</p>
  
  <p>so how can I affect colors array of only one instance?</p>