javascript: Behavior of variables in base object with inheritance
<pre><code>function Resource(){ 
    var id = '';

    this.getId = function(){
        return id;
    }

    this.setId = function(value){
        id = value;
    }
}

function Model(){ } 
Model.prototype = new Resource();
</code></pre>

<p>To test the above code, I have the following:</p>

<pre><code>var m1 = new Model();
m1.setId("blah");
alert("m1 = " + m1.getId());

var m2 = new Model();
m2.setId("blahblah");
alert("m2 = " + m2.getId());

alert("m1 = " + m1.getId());
</code></pre>

<p>I would expect the following to be alerted: <code>m1 = blah, m2 = blahblah, m1 = blah</code>.</p>

<p>However, the following is being displayed: <code>m1 = blah, m2 = blahblah, m1 = blahblah</code>.</p>

<p>I have written the above code as an experiment so that I can begin to understand inheritance in JavaScript.  Perhaps my expectation of what should be displayed is due to my Java/C# background.  Clearly each new Model object created shares the same <code>id</code> variable defined in Resource.  Why is this? </p>

<p>How can I write this so that each new Model can have its own unique <code>id</code> (other than the obvious - defining in within Model)?  </p>

<p>BTW, I have purposely definted id as <code>var id</code> rather than <code>this.id</code>, as I am looking for the private-variable behavior.</p>
