JS Class variable changes appearing outside prototype

Question

I'm currently setting up JavaScript classes by extending a function prototype with my object of functions / variables like so....

//class shorthand
var clss = function(args){
    var c = function() {};
    _.extend(c.prototype, args); //using underscore.js
    return c;
};

//class definition
var ThisIsMyClass = clss({
    varExample: 5,
    test: function() {
        console.log(this.varExample);
    },
    alter: function(){
        this.varExample = 8;
    }
});

//class initialisers
var hello = new ThisIsMyClass();
var hi = new ThisIsMyClass();
var ayup = new ThisIsMyClass();

My question is that everything resides inside the ThisIsMyClass.prototype and the functions can be called and the variables read, but when the values are changed, they then appear outside of the prototype for that object (and also remaining in the prototype with its original value)?

after running this code

//class initialisers
hello.varExample = 6;
hi.alter();
//look at object structure
console.log(hello);
console.log(ayup);
console.log(hi);
//trace the values
hello.test();
ayup.test();
hi.test();

The console looks like this

Is prototype just a reference to the structure, and then when any changes are made, it copies them to object itself?

Answer 1

When you read a property on an object, the interpreter first looks on the actual object itself for that property. If it finds it there, it returns that value. If it does not find the property on the actual object, then it looks on the prototype. If it finds the property on the prototype, it returns that value.

When you set a property on an object, it always sets the property on the actual object (not on the prototype). So, once you've set the property on an object, any reading of that property will come from the one you set on the actual object, not the one on the prototype. Setting a property directly onto the object essentially "hides" or "overrides" the value set on the prototype. You can think of the prototype as the default value for the property, but as soon as you set one on the object itself, the prototype value is no longer used.

function foo() {}

foo.prototype.greet = function() {
    console.log("Hello");
}

var x = new foo();
x.greet();        // will log "Hello" - finds method on the prototype

// set new method - will set this property directly on the object itself
//   overriding what was on the prototype
x.greet = function() {
    console.log("Goodbye");
}
x.greet();        // will log "Goodbye" - finds method on the object

Demo: http://jsfiddle.net/jfriend00/h6akb/

---

In the implementation of a javascript object, the object has both a set of properties on the object itself and a reference to its prototype. When looking up a property, it is looked for first on the object itself. If it is not found there, then the interpreter gets the reference to the prototype and looks for the property on the prototype object. The prototype object itself is just yet another object, so the interpreter looks for the property directly on the prototype object and, if found returns it. If not found, it checks to see if the prototype object itself has a prototype and so on (allowing for an inheritance chain).