为什么以及何时使用angular.copy？ （深拷贝） [英] Why and when to use angular.copy? (Deep Copy)

问题描述

我一直在将从服务收到的所有数据直接保存到本地变量，控制器或范围。我认为它会被认为是浅层副本，这是正确的吗？

I've been saving all the data received from services direct to local variable, controller, or scope. What I suppose would be considered a shallow copy, is that correct?

Example:

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

最近我被告知要使用angular.copy来创建深层副本。

Recently I was told to use angular.copy in order to create a deep copy.

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

然而，深度复制信息似乎在我的Angular应用程序使用时以相同的方式工作。 使用深层副本（angular.copy）是否有特定的好处，你可以向我解释一下吗？

However, the deep copy information seems to be working in the same way when used by my Angular application. Are there specific benefits to using a deep copy (angular.copy) and can you please explain them to me?

推荐答案

分配值时使用 angular.copy 对象或数组到另一个变量，并且不应更改对象值。

Use angular.copy when assigning value of object or array to another variable and that object value should not be changed.

不带深层复制或使用 angular.copy ，更改属性值或添加引用该对象的任何新属性更新所有对象。

Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.

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>

这篇关于为什么以及何时使用angular.copy？ （深拷贝）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！