具有继承同一父级的类的sibings实例的主干继承模式

Backbone inheritance pattern with sibings instance of class inheriting of the same parent

本文关键字：继承 sibings 实例 模式      更新时间：2023-09-26

我在Backbone:中遇到了一些奇怪的东西

常见父类的所有子类似乎都会与它们的兄弟姐妹一起获得"引用"属性！！

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

        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();

这是由JavaScript中对象文字的求值引起的。此行：

items:['foo'],

立即计算数组，并且父类型/子类型都持有对同一对象的引用。

所有主干对象都使用对象文字进行扩展，以创建新类型。对象文字是键：值对，其中键始终是文字键，并且在JavaScript解析器到达该行时立即计算值。因此，您将获得对父类中数组['foo']的单个引用。对象在JavaScript中是通过引用实现的，每个子类都将包含对同一数组的引用。

解决此问题的最简单方法是将items分配给返回数组的函数（在您的情况下，这似乎不是一个好的选项），或者在父类的构造函数中分配数组（如果需要，也可以是initialize方法）：


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/

items，当您将其添加到extend调用时，使新的主干"类"成为类原型的一部分。

由于JavaScript使用原型继承，这意味着它是可用的，并且被该类的所有实例共享。

相关文章：