Question

有人可以解释为什么JSON.stringify输出与item1和item2对象不同。

var item1 = {
    name: '',
    childItems: [],
    addChild: function (name) {
        var child = Object.create(item1);
        child.name = name;
        this.childItems.push(child);
    }
};

var item2 = {
    name: '',
    addChild: function (name) {
        var child = Object.create(item2);
        child.name = name;
        if (this.childItems === undefined){
            this.childItems = [];
        }
        this.childItems.push(child);
    }
};

对象进行字符串化

var root = Object.create(item1);
root.name = 'root';
root.addChild('child');
console.log(JSON.stringify(root)); //{"name":"root"}

root = Object.create(item2);
root.name = 'root';
root.addChild('child');
console.log(JSON.stringify(root)); //{"name":"root","childItems":[{"name":"child"}]}

后者是我正在寻找的结果，但我无法弄清楚为什么item1无法正常工作？

Answer 1

正如Sirko所说：

第一个示例中的
childItems属于该对象原型，而在第二个你用当前创建一个实例

Answer 2

这段代码中的问题：

 if (this.childItems === undefined){
      this.childItems = [];
 }

在item1中，childItems属性未定义，但您尝试向其添加项目this.childItems.push(child);

在item2中，您将数组分配给childItems属性：

if (this.childItems === undefined){
     this.childItems = [];
}

所以你的代码必须如下所示：

var item1 = {
    name: '',
    childItems: [],
    addChild: function (name) {
        var child = Object.create(item1);
        child.name = name;
        this.childItems = [];
        this.childItems.push(child);
    }
};

var item2 = {
    name: '',
    addChild: function (name) {
        var child = Object.create(item2);
        child.name = name;
        this.childItems = [];
        this.childItems.push(child);
    }
};

Answer 3

关键是使用Object.create()

var root = Object.create(item1);

创建一个根对象，其中item1为原型。在这种情况下，childItems是原型的一部分。在addChild函数中

addChild: function (name) {
    var child = Object.create(item1);
    child.name = name;
    this.childItems.push(child);
}

因为这是root，并且未在root中定义childItems，所以在原型链中搜索它。由于item1是其原型，并且已定义了childItems，因此您可以在其中添加项目。

对于item2也是如此，但有一个例外：在addChild函数

中

if (this.childItems === undefined){
     this.childItems = [];
}
this.childItems.push(child);

此行this.childItems = [];在对象根目录中创建一个数组childItems，隐藏您在使用Object.create(item2)时设置的原型中定义的childItems。这就是为什么你在第二个console.log(root)中看到添加项目的原因。

行[{1}}也给出undefined（允许创建数组），因为它不是item2中原型的一部分。

Answer 4

谢谢大家的帮助！

不确定这是否是最优雅的解决方案，但这是我想出来的，似乎有效。

var item = {
    name: '',
    childItems: [],
    addChild: function (name) {
        var child = Object.create(item);
        child.name = name;
        child.childItems = [];
        this.childItems.push(child);
    }
};

item.name = 'root';
item.addChild('child1');
item.childItems[0].addChild('child2');
console.log(JSON.stringify(item));
//{"name":"root","childItems":[{"name":"child1","childItems":[{"name":"child2","childItems":[]}]}]}

Stringify对象内的数组

4 个答案: