javascript - 主干 View 继承共享属性

Question

我正在扩展 Backbone View ，例如:

var baseView = Backbone.View.extend({
    fruits : [],
    listFruits : function() {
        console.log(this.fruits);
    }
});

var firstView = baseView.extend({
    initialize : function() {
        this.fruits.push("apple");
    }
});

var secondView = baseView.extend({
    initialize : function() {
        this.fruits.push("pear");
    }
});


var firstViewInstance = new firstView(); // ["apple", "pear"]
var secondViewInstance = new secondView(); // ["apple", "pear"]

firstViewInstance.listFruits();
secondViewInstance.listFruits();

在我看来，firstViewInstance 和secondViewInstance 应该是完全独立的，但它们显然是相关的。我怎样才能实现两个独立的 View 对象，它们都继承自一个公共(public)基础，但不共享数据？

编辑:根据下面的答案，我在 http://jsfiddle.net/qZ7SU/ 有一个更新的 fiddle 这似乎解决了这个问题。我仍然不完全清楚发生了什么，但我认为明确地将 fruits[] 附加到 this，将其创建为实例变量，而不是将其附加到原型(prototype)。

Answer 1

这是因为对原始 fruits 属性的引用是被复制到 subview 的属性。参见 underscore.js extend

_.extend = function(obj) {
  each(slice.call(arguments, 1), function(source) {
    if (source) {
      for (var prop in source) {
        obj[prop] = source[prop];
      }
    }
  });
  return obj;
};

要继承公共(public)基础，但不共享数据，需要在初始化函数中初始化非共享属性。

var baseView = Backbone.View.extend({
  initialize: function() {
    this._initializeBase();
  },

  _initializeBase: function() {
    this.fruits = [];
  },

  listFruits : function() {
    console.log(this.fruits);
  }
});

var firstView = baseView.extend({
  initialize : function() {
    this._initializeBase();
    this.fruits.push("apple");
  }
});

这样属性会在对象初始化的时候被添加到对象中，数据不会被共享。

希望这对您有所帮助!