javascript - Backbone 继承模式与继承同一父类的同胞实例

Question

我在 Backbone 中遇到了一些奇怪的事情:

公共(public)父类的所有子类似乎都与其 sibling 一起获得“引用”属性...!!

检查这个简单的测试用例:

        var MyParentClass = Backbone.View.extend({
            items:['foo'],
            initialize: function() {
            }
        });

        var MyFirstChildrenClass = MyParentClass.extend({
            initialize: function() {
                MyFirstChildrenClass.__super__.initialize.apply(this, arguments);
                console.warn('MyFirstChildrenClass::initalize()');
                this.items.push('bar');
            }
        });

        var MySecondChildrenClass = MyParentClass.extend({
            initialize: function() {
                MySecondChildrenClass.__super__.initialize.apply(this, arguments);
                console.warn('MySecondChildrenClass::initalize()');
                console.warn(this.items); // expecting [foo] & getting [foo,bar] !
            }
        });


    var firstInstance = new MyFirstChildrenClass();
    var secondInstance = new MySecondChildrenClass();

Answer 1

这是由 JavaScript 中的对象字面量计算引起的。这一行:

items:['foo'],

立即评估数组，父类型/子类型都持有对同一对象的引用。

所有 Backbone 对象都使用对象字面量进行扩展，以创建新类型。对象字面量是键值对，其中键始终是字面量键，一旦 JavaScript 解析器命中该行，就会计算值。因此，您将获得对父类中数组 ['foo'] 的单个引用。对象在 JavaScript 中是通过引用实现的，您的每个子类都将包含对同一数组的引用。

解决此问题的最简单方法是将 items 分配给返回数组的函数(在您的情况下这似乎不是一个好的选择)或在父类(或初始化方法，如果需要):

Backbone.View.extend({
  constructor: function(){
    Backbone.View.prototype.constructor.apply(this, arguments);

    this.items = ['foo'];
  }
});

有关对象字面量和值的冗长讨论(在 jQuery 的上下文中，但此处适用相同的原则)，请参阅我的博客文章:http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/