javascript - Backbone.js 继承问题

Question

我相信我在 backbone.js 方面有很好的背景，但我有一个我不明白的问题。

假设我们有这两个 View :

BaseView = Backbone.View.extend({

    foo: {},

    initialize: function(options) {
        this.render();
    },

    render: function() {
        // ...
    }
});

PageView = BaseView.extend({

    render: function() {
        this.foo.bar = 23;
    }
});

如果我们在两个 View 中检查属性 'foo'，显然，它将是一个空对象:

> BaseView.prototype.foo
  Object {}
> PageView.prototype.foo
  Object {}

但是如果我们创建一个 PageView 实例，BaseView 的 'foo' 属性将被更改。这怎么可能？

> page = new PageView()
> page.foo
  Object {foo: 23}
> BaseView.prototype.foo
  Object {foo: 23}

[编辑]

实际上，这是一个一般的 OOP 问题。在 python 中:

class A(object):
    foo = {}

class B(A):

    def __init__(self):
        self.foo['bar'] = 23

>>> print A.foo
{}
>>> b = B()
>>> print A.foo
{'bar': 23}

Answer 1

当你这样做时:

BaseView = Backbone.View.extend({
    foo: {},
    //...
});

foo: { } 附加到 BaseView 原型(prototype)。这意味着该对象由 BaseView 的所有实例以及任何 BaseView“子类”的所有实例共享。所以鉴于此:

var BaseView = Backbone.View.extend({
    foo: {},
    //...
});
var PageView = BaseView.extend({
    //...
});
var bv = new BaseView;
var pv = new PageView;

数据真的是这样的:

bv.foo -->--+-->-- BaseView.prototype.foo -->-- { }
            |
pv.foo -->--/

所以如果你用类似pv.foo.x = y的东西改变pv.foo，你实际上改变了BaseView.prototype.foo 和 bv.foo 是同一个对象；当然，如果您 pv.foo = something_else 那么您已经更改了引用并且 bv.foo 和 pv.foo 将不再引用相同的底层对象。您只有一个基础对象，并对其有多个引用。

当您实例化或扩展您的 BaseView 或 PageView 时，没有复制(既不浅也不深)，您只是共享对底层对象的单个引用。

如果您希望您的 foo 是特定于实例的(您几乎总是这样做)，那么请在您的构造函数中设置它:

var BaseView = Backbone.View.extend({
    initialize: function() {
        this.foo = { };
        //...
    },
    //...
});

当然，initialize 方法不会自行链接，因此如果您的 PageView 需要一个，您必须自己执行此操作:

var PageView = BaseView.extend({
    initialize: function() {
        BaseView.prototype.initialize.apply(this, arguments);
        // Whatever else you need done...
    },
    //...
});

演示:http://jsfiddle.net/ambiguous/4duQ5/

---

另外，你真的应该说 var BaseView 而不仅仅是 BaseView，没有 var 意味着你正在创建一个全局的并且你可能不想那样做。