为什么以及何时使用angular.copy？（深复制）

Question

我一直在将从服务接收的所有数据直接保存到局部变量，控制器或范围。我认为这将被视为浅表副本，对吗？

Example:

DataService.callFunction()
.then(function(response) {
  $scope.example = response.data;
});

最近，有人告诉我使用angular.copy来创建深层副本。

$scope.example = angular.copy(response.data);

但是，当我的Angular应用程序使用深层复制信息时，它们似乎以相同的方式工作。
使用深层副本（angular.copy）有什么特别的好处，请您向我解释一下吗？

Answer 1

将对象或数组的值分配给另一个变量时，
请使用angular.copy，并且object不应更改该值。

如果不进行 深层复制 或使用 angular.copy ，则更改属性的值或添加任何新属性都会 更新 引用同一对象的 所有
对象。

var app = angular.module('copyExample', []);

app.controller('ExampleController', ['$scope',

  function($scope) {

    $scope.printToConsole = function() {

      $scope.main = {

        first: 'first',

        second: 'second'

      };



      $scope.child = angular.copy($scope.main);

      console.log('Main object :');

      console.log($scope.main);

      console.log('Child object with angular.copy :');

      console.log($scope.child);



      $scope.child.first = 'last';

      console.log('New Child object :')

      console.log($scope.child);

      console.log('Main object after child change and using angular.copy :');

      console.log($scope.main);

      console.log('Assing main object without copy and updating child');



      $scope.child = $scope.main;

      $scope.child.first = 'last';

      console.log('Main object after update:');

      console.log($scope.main);

      console.log('Child object after update:');

      console.log($scope.child);

    }

  }

]);



// Basic object assigning example



var main = {

  first: 'first',

  second: 'second'

};

var one = main; // same as main

var two = main; // same as main



console.log('main :' + JSON.stringify(main)); // All object are same

console.log('one :' + JSON.stringify(one)); // All object are same

console.log('two :' + JSON.stringify(two)); // All object are same



two = {

  three: 'three'

}; // two changed but one and main remains same

console.log('main :' + JSON.stringify(main)); // one and main are same

console.log('one :' + JSON.stringify(one)); // one and main are same

console.log('two :' + JSON.stringify(two)); // two is changed



two = main; // same as main



two.first = 'last'; // change value of object's property so changed value of all object property



console.log('main :' + JSON.stringify(main)); // All object are same with new value

console.log('one :' + JSON.stringify(one)); // All object are same with new value

console.log('two :' + JSON.stringify(two)); // All object are same with new value


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<div ng-app="copyExample" ng-controller="ExampleController">

  <button ng-click='printToConsole()'>Explain</button>

</div>