为什么我的javascript Backbone.js模型共享相同的"实例“;他们的父类

Why do my javascript Backbone.js Models share the same "instance" of their parent class?

本文关键字：quot 实例 父类 他们的 Backbone javascript 我的 js 模型 共享 为什么      更新时间：2023-09-26

EDIT：修正了我的示例来演示行为

我希望AbstractParent的details属性是我所说的"实例属性"，但它的行为更像是一个"静态属性"。我意识到这些术语不适合javascript，那么为什么当我创建一个新的子类时，它没有得到自己唯一的AbstractParent原型呢？为什么他们共用一个？

在下面的代码中，我期望一个空警报，但我得到了"新细节"

var AbstractParent = Backbone.Model.extend({
  details: [],
  addDetail: function(detail) {
    this.details.push(detail);
  },
  getDetails: function() {
    var rtn = '';
    for(var i=0;i<this.details.length;i++) {
      rtn += this.details[i];
    }
    return rtn;
  }
});
var Child = AbstractParent.extend({});
var ch1 = new Child;
ch1.addDetail("new details");
var ch2 = new Child;
alert(ch2.getDetails()); // => 'new details'

这似乎只有在details是一个数组时才起作用。如果它是字符串或对象，则ch1和ch2不共享它。

好吧，我解决了问题。我最初的问题代码不准确，所以我向其他回答者道歉（他们在我提供的代码中是正确的）。

解决方案描述如下：原型化为数组的Javascript对象成员由所有类实例共享

基本上，两个子实例共享相同的AbstractParent函数作为它们的原型，这意味着AbstractParent中的任何更改都将反映在两个子实例的原型中。

这只在使用数组时表现出来的原因是，我在原型中初始化了数组，然后只是更改它，而不是在addDetail函数中覆盖它。当我使用对象或字符串作为属性名，然后进行赋值时，函数调用时上下文中的this属于Child实例，因此在AbstractParent函数中执行this.name = 'Billy';实际上是将其附加到Child实例上，而不是在Abstract Parent中。我想每个Child实例都会有自己的AbstractParent原型实例，当我访问this.name时，它在Child上找不到它，而是转到this.prototype.name。

在我问题中的代码中，我可以通过向AbstractParent添加一个initialize函数来解决这个问题，该函数实例化细节数组。但是，如果我要向Child添加一个initialize函数，而我没有在其中调用父构造函数，那么我将遇到与以前相同的问题。

您已经为基AbstractParent分配了一个名称属性（或对象），并定义了从该基扩展的两个对象。因此，每个名称对象都独立地具有此名称对象，尽管它们默认为基础中指定的值。

在您的代码中，尽管您已经将ch1.name分配给了"Billy"，但您没有更改ch2的name值。我认为您的代码示例实际上是错误的。警报显示的值应为"默认名称"。

你能在浏览器中加载backbone.js，然后转到调试器控制台，再次在中输入上述语句吗？如果你这样做，我想你会发现你所期望的行为。

你是说当你更改ch1.name时，它也会更改ch2.name吗？我运行了你的确切代码，但没有得到那个结果。ch2.name仍然是"默认名称"。

在查找name属性时，我的浏览器在设置ch1.name="Billy"后采用了以下路径。。。

ch1

  • inherits.child（您的ch1实例）

    • name："Billy"

ch2

  • herits.child（ch2实例）
    • __proto__（您的SecondChild原型）
      • __proto__（您的AbstractParent原型）
        • name:"默认名称"

打开调试控制台，可以是Firefox中的Firebug，也可以是Chrome中的Developer Tools/Javascript控制台。

相关文章：