Question

我无法扩展这种对象的层次结构，防止事情变得混乱。我的HTML测试文件包含以下JS

(index.html)

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="granpa.js"></script>
<script type="text/javascript" src="father.js"></script>
<script type="text/javascript" src="child1.js"></script>

Granpa是一个非常简单的对象

(granpa.js)

var granpa = {
    myname: 'Granpa',
    mydata: {age: 80, salary: undefined}
};

此测试侧重于“myname”变量。我包含“mydata”只是为了指出我需要一个深度递归对象扩展。

父亲就像

(father.js)

var father = {
    myname: 'Father',
    mydata: {age: 50, salary: 30000}
};

子级1类似，而且它包含合并对象和显示测试数据的代码。

(child1.js)

var child1 = {
    myname: 'Child 1',
    mydata: {age: 19, salary: 15000}
};

/* I clone granpa to a temporary object, to be sure not to modify the original*/
var tmpGranpa = $.extend(true, granpa);

/* I clone father to a temporary object, to be sure not to modify the original*/
var tmpFather = $.extend(true, father);

/* Merge all: again producing a brand new obj1, to not mess up the originals */
var obj1 = $.extend(true, tmpGranpa, tmpFather, child1);

$(document).ready(function(){
    console.log('Check obj1 result: '+obj1.myname);
    console.log('Check granpa was not overridden: '+granpa.myname);
    console.log('Check father was not overridden: '+father.myname);
});

输出

Check obj1 result: Child 1
Check granpa was not overridden: Granpa
Check father was not overridden: Father

请注意我使用了

$.extend(true, ...)

执行深度递归的对象副本，如jQuery手册所示。

如你所见，一切都很好。现在，让我们添加第二个孩子

(index.html)

<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="granpa.js"></script>
<script type="text/javascript" src="father.js"></script>
<script type="text/javascript" src="child1.js"></script>
<script type="text/javascript" src="child2.js"></script>

子2文件将

(child2.js)

var child2 = {
    myname: 'Child 2',
    mydata: {age: 11, salary: 0}
};

/* I clone granpa to a temporary object, to be sure not to modify the original*/
var tmpGranpa = $.extend(true, granpa);

/* I clone father to a temporary object, to be sure not to modify the original*/
var tmpFather = $.extend(true, father);

/* Merge all: again producing a brand new obj2, to not mess up the originals */
var obj2 = $.extend(true, tmpGranpa, tmpFather, child2);

当然我重新使用了“tmpFather”和“tmpGranpa”变量。好。它们是暂时的，我不在乎。

现在，在child1.js（这是我们的入口点）中，我添加了child 2的检查

(child1.js)

console.log('Check obj1 result: '+obj1.myname);
console.log('Check obj2 result: '+obj2.myname);
console.log('Check granpa was not overridden: '+granpa.myname);
console.log('Check father was not overridden: '+father.myname);

输出

Check obj1 result: Child 2
Check obj2 result: Child 2
Check granpa was not overridden: Granpa
Check father was not overridden: Father

为什么？有没有办法构建这样的对象（obj1和obj2）扩展父和格兰帕，留下原始的对象（父，格兰帕，child1，child2）没有被触及，并没有搞砸所有的属性？

提前谢谢。

“Object.assign（）”建议

Object.assign的问题在于它似乎没有添加缺少的属性，比如$ .extend。见这个例子

var granpa = {
    myname: 'Granpa',
    mydata: {age: 80, salary: undefined}
};

var father = {
    myname: 'Father',
    mydata: {age: 50, salary: 30000}
};

var child1 = {
    myname: 'Child 1',
    mydata: {salary: 15000} /* Note: "age" property missing!!! */
};

var newObj = Object.assign({}, granpa, father, child1);

console.log(newObj.mydata.age);

输出

undefined

我需要这样的行为，因为“年龄”就像一个可以被覆盖或不被覆盖的设置。如果child1有“age”，那么它应该覆盖father和granpa，如果child1中缺少“age”（如示例所示），child1应该继承父亲的年龄。

$。扩展工作就像我需要的那样。

Answer 1

jQuery.extend()获取多个对象并将属性连接在一起。因此，第二个对象（如果它包含相同的属性）将覆盖先前设置的属性。 jQuery.extend() Documentation

相反，使用Object.assign()传递你的granpa，child和father对象。这将使每个人分开，而不是触及已经完成的事情。

Answer 2

好的，正确答案是

var obj1 = $.extend(true, {}, tmpGranpa, tmpFather, child1);

扩展两个对象实例

2 个答案: