Make JavaScript array values auto-update when called
<p>A lot of people where confused by my last question.  I hope I can clear things up with this one.  HERE is what I need to do:</p>

<pre><code>var arr = ["Init Value", "Does Not", "Matter"];
arr.onGet = updater;   // Register arr with updater function
alert(arr[0]);  // should return 1;
alert(arr[0]);  // should return 2;
alert(arr[0]);  // should return 3;
alert(arr[0]);  // should return 4;
alert(arr[0]);  // should return 5;

var counter = 0;
function updater(){
  counter = counter + 1;
  return counter;
}
</code></pre>

<p>See what I did there?  Init value does not matter, it's the updater function that is pulling the values.</p>

<p>Now this does not work of course, since arr does not automatically call the function updater and there is no event onGet.  Some people might say, well that's just crazy talk, how can you run a function when it's not even called.  That is true, but a VARIABLE is called (in our case arr[0], so can't you just bind(link) it up to another function when arr[0] is called?  In essence, this is an auto-updater, hence my question.  </p>

<p>Also, I have given up trying to work this in IE7, how about just Google Chrome?  </p>

<hr>

<p>Solution by Skyd:</p>

<pre><code>function onGet(obj) {
    var index = 0;
    var counter = 0;
    for (var prop in obj) {
        (function(thisIndex, thisProp) {
            obj.__defineGetter__(thisIndex, function() {
                counter = counter + 1;
                return counter ; 
            });
        })(index, prop)
        index++;
    };
    obj.__defineGetter__("length", function() {
        return 1000;
    });
    return obj;
}

var myObj = [100,200,300];

onGet(myObj);

alert(myObj[1]);     // 1
alert(myObj[2]);     // 2
alert(myObj[3]);     // 3
alert(myObj.length); // 1000 &lt;-- Arbitary value which you can change
</code></pre>
