javascript - 了解主干扩展

Question

我是 Backbone 的忠实粉丝，但最近发现 Backbone 的扩展有一些奇怪的行为。我之所以称其为怪异，可能是因为误解了意图，并且不了解 javascript 工作原理的深层细节。 长话短说，修改任何实例的属性都会在重新实例化对象时重置为默认值，修改子属性将更改所有 future 实例的属性。我希望对此事有任何见解。

下面是一些使用 Backbone 扩展的代码:

var myObj = function () {
    this.a = true;
};

myObj.extend = extend; //the backbone version, link provided at bottom

//the pattern used throughout backbone
var myExtension = myObj.extend({
    b: "hello"
});

var instance1 = new myExtension();
instance1.b = "goodbye";

var instance2 = new myExtension();
console.log(instance2.b); //logs hello!!

var myBadExtension = myObj.extend({
    b: {
        c: "hello"
    }
});

var bad1 = new myBadExtension();
bad1.b.c = "goodbye";

var bad2 = new myBadExtension();
console.log(bad2.b.c); //!!! logs "goodbye" !?!?!?!

非常感谢任何帮助。

Link to backbone extend .

Answer 1

是的，因为 bad2.b 和 bad1.b 是同一个对象，来自它们的共享原型(prototype)。为避免这种情况，您应该在 initialize 方法中为 b 分配一个值。

var myBadExtension = myObj.extend({
    initialize: function() {
      this.b = {
        c: "hello"
      };
    }
});

如果一个属性是原始的(IOW 不是对象或数组)并不重要，但我认为以相同的方式初始化原始更常见。

假设您没有使用 backbone 的内置类，这可能会有更好的工作机会。

var myBadExtension = myObj.extend({
  constructor: function() {        
    myObj.apply(this, arguments);

    this.b = {
      c: "hello"
    };
  }
});