1. ホーム
  2. javascript

[解決済み] なぜ、そしていつangular.copyを使うのか?(ディープコピー)

2022-05-27 17:50:39

質問

サービスから受け取ったデータを全てローカル変数、コントローラ、スコープに直接保存しています。浅いコピーとみなされるものだと思いますが、正しいのでしょうか?

Example:

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

最近、ディープコピーを作成するためにangular.copyを使うように言われました。

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

しかし、私のAngularアプリケーションで使用する場合、ディープコピー情報は同じように動作しているようです。 ディープコピー(angular.copy)を使用する具体的な利点はありますか、そして私にそれを説明することができますか?

どのように解決するのですか?

使用方法 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>