javascript - 为什么这是递归并导致无限循环？

Question

我正在扩展 Backbone.View 以支持 subview ，并且我有一个 addSubview 方法，该方法仅将 Backbone View 添加到哈希中。很容易。我现在尝试做到这一点，以便每当您销毁一个 View 时，它都会销毁所有 subview 。我认为这也很容易，但我的方法陷入了无限循环:

destroy: function () {
  debugger;
  // Call destroy on all subviews. If the subviews have subviews they'll
  // be destroyed as well
  for (var v in this._subviews) {
    this._subviews[v].destroy();
  }

  // Instead of calling `delete` on every view we wipe everything out after
  // we're done destroying all the views
  this._subviews = {};

  // Finally, since all the subviews are destroyed it's safe to destroy
  // this view
  this.remove();
},

发生的情况是，第一次调用该调试器，this 是调用 destroy 的 View (右)，第二次在第一个 subview 上调用它(右)，第三个 - ∞ 它仍然继续调用第一个 subview 。一步步玩下去吧:

1. 点击调试器
2. 到达 this._subviews[v].destroy(); 行且 v == 第一个 subview
3. 跳回到顶部调试器。

仅此而已。并且它会永远重复。有什么想法或建议吗？

演示:http://jsbin.com/iyApuga/1/edit

Answer 1

这里发生的是 object叫_subviews正在存储在 Foo.View的原型(prototype)(Backbone 的 extend 方法正在执行此操作)，因此由 Foo.View 的所有实例共享。这是设置的地方:

Foo.View = Backbone.View.extend({
    _subviews: {},  // right here

这会导致问题，因为当您添加第一个 subview 时，它会添加到 this._subviews 。因为_subviews对象被 View 的每个实例共享，当你向 subview 添加 subview 时，所有其他 View 都认为View是它们自己的 subview 。

具体来说，这里发生的事情是当您调用 .destroy() 时，在循环的顶部调用 destroy()在所有 subview 上意外调用 destroy()再次在同一个 View 上。 _subviews直到循环后几行变量才会被清除:

// Instead of calling `delete` on every view we wipe everything out after
// we're done destroying all the views
this._subviews = {};

因此，它变得无限，因为它正在迭代 _subviews 的相同列表。一遍又一遍，卡在第一个似乎永远无法完全删除。

为了让世界幸福，_subviews object 应该是一个实例变量 View而不是 View原型(prototype)。为此，您应该为每个新的View分配一个新的。 :

  initialize: function () {
    this._subviews = {};
  }