Question

所以这很奇怪。我写了自己的小响应开关声明：

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来演示我正在谈论的内容。

预期行为：

如果以移动设备身份启动，则会发生默认设置。换成平板电脑，平板电脑覆盖发生。
如果以平板电脑身份启动，则会发生数位板覆盖交换到移动设备，默认发生

观察到的行为：

如果以移动设备身份启动，则会发生默认设置。换成平板电脑，平板电脑覆盖发生。交换回移动设备，会发生平板电脑覆盖。
如果以平板电脑身份启动，则会发生数位板覆盖交换到移动设备，平板电脑覆盖发生

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

Answer 1

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

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

//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/

变量重新分配保留了先前的原型功能。为什么？

1 个答案: