扩展Backbone.View时的奇怪行为

时间:2012-11-24 04:02:56

标签: javascript object backbone.js

好吧我最近碰到了这个,我无法弄清楚它为什么会发生。有人可以解释为什么this._views得到“交叉授粉”吗?代码如下:

var layout = Backbone.View.extend({
    _views: [],
    addToViews: function(view) {
        this._views.push(view);
    },
    renderViews: function() {
        console.log(this._views);
    }
});

var view1 = new layout();
view1.addToViews('some view');
view1.renderViews(); //outputs array(1)['some view']

var view2 = new layout();
view2.renderViews(); //outputs array(1)['some view'] **incorrect!**

jsfiddle

这很好用:

var layout = Backbone.View.extend({
    //_views: [],
    addToViews: function(view) {
        this._views = this._views || [];
        this._views.push(view);
    },
    renderViews: function() {
        console.log(this._views);
    }
});

var view1 = new layout();
view1.addToViews('some view');
view1.renderViews(); //outputs array(1)['some view']
var view2 = new layout();
view2.renderViews(); //outputs undefined **correct**​

fiddle me batman

普通的vanilla js实现似乎也能正常工作

var layout = function() {
    var _views = [];
    return {
        addToViews: function(view) {
           _views.push(view);
        },
        renderViews: function() {
            console.log(_views);
        }
    }
};

var view1 = new layout();
view1.addToViews('some view');
view1.renderViews(); //outputs array(1)['some view']

var view2 = new layout();
view2.renderViews(); //outputs array(0)[]

you know we fiddle the js

那么为什么this._views会在创建全新实例时保存状态?

1 个答案:

答案 0 :(得分:4)

当您扩展View(或任何其他Backbone类)时,您正在扩展该类的原型。原型在该类的所有实例之间共享。这意味着您设置为原型属性的任何对象将在所有实例之间共享,对每个实例都是唯一的。因此,使用属性(对象或数组)扩展Backbone类将在所有实例中创建对该对象的共享引用。

有关此问题的更多详细信息,请参阅this related answer,因为它会影响使用原型继承的任何类。