javascript - BackboneJS 中意外的构造函数/扩展行为

Question

对 JavaScript/BackboneJS 的工作原理感到非常困惑。让我们考虑以下示例:

window.MyView = Backbone.View.extend({
    index: 0,
    list: [],        
    initialize: function () {
        console.log("Initializing MyView");
        console.log("this.index = " + this.index);
        console.log("this.list = [" + this.list.join(',') + "]");
        this.index++;
        this.list.push(this.index);
    }
});

var first = new MyView(),
    second = new MyView();

我在这里期望的是 new MyView() 将创建一个干净的 window.MyView“类”副本，因此输出将是:

Initializing MyView
this.index = 0
this.list = []

Initializing MyView
this.index = 0
this.list = []

但是我得到了

Initializing MyView
this.index = 0
this.list = []

Initializing MyView
this.index = 0
this.list = [1] // Very unexpected!

令人困惑的部分是整数变量“index”实际上如预期的那样为 0，但数组“list”已经包含了先前初始化的值。怎么会这样？

演示 http://jsfiddle.net/fqZTp/3/

Answer 1

list 和 index 之间的不同行为可以用这两个答案很好地解释:

• The difference between simply reading and actually setting an object property
• How incrementing (++) is actually an assignment behind the scenes

总结一下:

• list 和 index 都存在于 MyView 的原型(prototype)上。
• 在创建您的 new MyView() 之后，initialize() 在新创建的实例(即不是原型(prototype))的上下文中运行。
• 当您将某些内容push() 到list 时，您是将其推送到原型(prototype)引用 的列表对象。您根本没有更新对列表的引用，只是阅读它。
• 当您index++ 时，这实际上在幕后执行赋值 (this.index = this.index + 1)。当您将某些东西分配给一个对象时，它是否存在于原型(prototype)上并不重要 - 您是在将它分配给那个特定的实例。原型(prototype)不变。

---

对于您期望的行为，只需在 initialize 函数中设置这两个属性:

window.MyView = Backbone.View.extend({
    initialize: function () {
        this.index = 0;
        this.list = [];

        this.index++;
        this.list.push(this.index);
    }
});