角度怪异：一个对象属性如何改变两个不同对象的属性？

Question

我正在使用 Angularjs 构建一个网站，其中有一个对象列表：

$scope.fieldsToShow = [
    {
        "fields": {},
        "type": "LOGGED_IN"
    },
    {
        "fields": {},
        "type": "PERSONAL",
        "user": 2,
        "name": "Rick Astley"
    }
];

然后我选择其中一个对象到一个变量中：

var $scope.currentObject = $scope.fieldsToShow[1];

让用户使用一些复选框来更改它：

<input ng-model="currentObject.fields.a" type="checkbox">

同时改变$scope.currentObject:

{
    "fields": {
        "a": true
    },
    "type": "PERSONAL",
    "user": 2,
    "name": "Rick Astley"
}

和$scope.fieldsToShow中的原始对象：

$scope.fieldsToShow = [
    {
        "fields": {},
        "type": "LOGGED_IN"
    },
    {
        "fields": {
            "a": true
        },
        "type": "PERSONAL",
        "user": 2,
        "name": "Rick Astley"
    }
];

然后我将$scope.currentObject 更改为数组中的第一个对象：

$scope.currentObject = $scope.fieldsToShow[0];

然后我再次单击复选框。正如预期的那样，这也将"a": true 添加到$scope.fieldsToShow 列表中第一个对象的字段对象中。到目前为止，一切都很好。

我现在想在fields 对象中添加一个对象。所以我创建了另一个复选框：

<input ng-model="currentObject.fields.anInnerObject.val" type="checkbox">

然后我再次更改为 PERSONAL 对象 ($scope.currentObject = $scope.fieldsToShow[1];) 并单击复选框。正如预期的那样，这改变了$scope.currentObject：

{
    "fields": {
        "anInnerObject": {
            "val": true
        }
    },
    "type": "PERSONAL",
    "user": 2,
    "name": "Rick Astley"
}

和$scope.fieldsToShow中的原始对象：

$scope.fieldsToShow = [
    {
        "fields": {},
        "type": "LOGGED_IN"
    },
    {
        "fields": {
            "anInnerObject": {
                "val": true
            }
        },
        "type": "PERSONAL",
        "user": 2,
        "name": "Rick Astley"
    }
];

然后我再次更改为 LOGGED_IN 对象 ($scope.currentObject = $scope.fieldsToShow[0];) 并再次单击复选框。这就是它变得棘手的地方。正如预期的那样，它改变了$scope.currentObject：

{
    "fields": {
        "anInnerObject": {
            "val": true
        }
    },
    "type": "LOGGED_IN",
}

它还更改了$scope.fieldsToShow 中的原始对象（仍如预期的那样），但它还将个人对象中"anInnerObject" 的值更改为布尔值true：

$scope.fieldsToShow = [
    {
        "fields": {
            "anInnerObject": {
                "val": true  // This changed, which I understand
            }
        },
        "type": "LOGGED_IN"
    },
    {
        "fields": {
            "anInnerObject": true  // BUT WHY this value also change? And why did it become true?
        },
        "type": "PERSONAL",
        "user": 2,
        "name": "Rick Astley"
    }
];

这怎么可能发生？！几个小时以来，我一直在用头撞墙，尝试了一百万种方法，并向同事寻求帮助，但我就是不明白为什么会这样？

有人知道这是怎么发生的吗？欢迎所有提示！

Answer 1

您需要了解$scope.currentObject 和$scope.fieldsToShow 中的原始 对象都是相同 对象。两者都只是对相同内存位置的引用。这就是 Javasript 中对非原始类型的引用的工作方式。

如果你想拥有真正独立的不同对象，你需要在使用前克隆它：

var $scope.currentObject = angular.copy($scope.fieldsToShow[1]);