javascript - 变量重新赋值保留了之前的原型(prototype)函数。为什么？

Question

所以这很好奇。我已经编写了自己的小响应式 switch 语句:

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;
    }
}

其中 x 是浏览器的大小。当将 view 从 tablet 切换到 mobile 时，mobile 保留了一些 tablet'功能。这是预期的行为吗？在我看来，这不应该发生。

我已将代码压缩为 fiddle来证明我在说什么。

预期行为:

• 如果以移动方式启动，则使用默认设置。切换到平板电脑，平板电脑覆盖发生。
• 如果以平板电脑启动，则会发生平板电脑覆盖。切换到手机，默认发生

观察到的行为:

• 如果以移动方式启动，则使用默认设置。切换到平板电脑，平板电脑覆盖发生。切换回移动设备时，平板电脑会被覆盖。
• 如果以平板电脑启动，则会发生平板电脑覆盖。切换到手机，发生平板电脑覆盖

根据我的理解，原型(prototype)应该改变所有实例，而简单赋值 foo.attribute = 应该只改变实例。我对原型(prototype)的理解有缺陷吗？为什么会这样？我已经通过在 mobile._component 中重新分配默认的 mobile.component.hook 解决了这个问题，但在我看来我不应该这样做。

Answer 1

问题是两个 View 共享相同的 Component 对象，因为您只创建一个并将其分配给 View 的原型(prototype)。

要使 View 具有单独的 Component 对象，您需要为您创建的每个 View 创建一个实例:

//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.";};

演示:http://jsfiddle.net/2mJdG/2/