Variable reassignment retains previous prototype function. Why?

Question

So this is curious. I've written my own little responsive switch statement:

setView = function(x){
    switch(true){
        case x > 1250:
            if(view != desktop){
                view = desktop;
                startView();
            }
            break;
        case x <= 1250 && x >= 924:
            if(view != tablet){
                view = tablet;
                startView();
            }
            break;
        default:
            if(view != mobile){
                view = mobile;
                startView();
            }           
            break;
    }
}

where x is the size of the browser. when switching view from tablet to mobile , mobile has retained some of tablet 's functions. Is this expected behavior? It seems to me like this should not happen.

I've condensed my code into a fiddle to demonstrate what I'm talking about.

Expected behavior:

• If starting as mobile, the default occurs. Swapping to tablet, tablet override occurs.
• If starting as tablet, tablet override occurs. Swapping to mobile, default occurs

Observed behavior:

• If starting as mobile, the default occurs. Swapping to tablet, tablet override occurs. Swapping back to mobile, tablet override occurs.
• If starting as tablet, tablet override occurs. Swapping to mobile, tablet override occurs

From my understanding, prototype should alter all instances, while the simple assignment foo.attribute = should only alter the instance. Is my understanding of prototype flawed? Why is this happening? I've fixed the problem by reassigning the mobile.component.hook default in mobile._component , but it seems to me like I shouldn't have to do this.

Answer 1

The problem is that both views share the same Component object, as you create only one and assign it to the prototype of the View .

To make the views have separate Component object you need to create one instance for each view that you create:

//Setting up everything
function View(){
  this.component = new Component();
}
function Component(){}
Component.prototype.hook = function(){alert("Should be default")}
View.prototype._component = function(){throw "this function is called on Component change, so override.";};

Demo: http://jsfiddle.net/2mJdG/2/