angular.copy を使用して変数の双方向バインドと解析をキャンセルする-PHP开发-php.cn

angular.copy を使用して変数の双方向バインドと解析をキャンセルする

高洛峰

リリース： 2016-12-05 11:40:03

オリジナル

1494 人が閲覧しました

まずはサンプルコードを見てみましょう

<body ng-app="app">
 <div ng-controller="CopyController">
 <div>
 data: <input ng-model="user.data" /><br>
 user.data: {{user.data}} <br>
 user1.data: {{user1.data}} <br>
 <button ng-click="changeData1()">change</button> <br>
 <button ng-click="copy()">copy</button> <br>
 copyData: {{copyUser.data}}
 </div>
 </div>
 <script src="node_modules/angular/angular.min.js"></script>
</body>
<script>
 angular.module(&#39;app&#39;, [])
 .controller(&#39;CopyController&#39;, function ($scope) {
 // body...
 $scope.changeData1 = function () {
  // body...
  scope.user1=scope.user1=
scope.user;
  $scope.user1.data = &#39;is changed&#39;;
 }
 $scope.copy = function () {
  // body...
  scope.copyUser=angular.copy(scope.copyUser=angular.copy(
scope.user);
 }
 });
</script>

ログイン後にコピー

上記のデモからわかるように、コピーボタンをクリックするとcopyDataの値が「これは古いデータです」となり、userの値がcopyUserへのコピーに成功しました

変更ボタンをクリックするとuser1とuserの値が「変更されました」となりますが、copyUserの値は変更されません。このとき、入力ボックスで値を変更すると、それに応じてuserとuser1の値も変化し、両者が実際には同じ変数参照であることがわかります。また、copyUser は変更されていません。

angular.copy は双方向バインディングの原則をキャンセルできます

これは、JavaScript のオブジェクトが参照型であるという事実に関連しています。

JavaScriptの値の型

JavaScriptでは、値はプリミティブ値と参照値の2種類に分けられます。

プリミティブ値: スタックに保存される単純なデータフィールド、つまり、その値は変数がアクセスされる場所に直接保存されます。

参照値: ヒープに保存されます、つまり、値変数に格納されるのは、オブジェクトが格納されているメモリ位置へのポインタです。

JavaScript のオブジェクトは参照値です。つまり、オブジェクトは参照によって値を渡します。

したがって、上記のコードでは:

オブジェクト $scope.user と $scope.user1 の値は両方とも同じ参照を指します。 Angular の場合、変数の変更を監視することは、そのオブジェクトによって参照されるアドレスを監視することになるため、オブジェクトの参照値が変更されると、それを指すすべてのオブジェクトもそれに応じて変更されます。

そのため、Angular では、オブジェクトの割り当てを通じて双方向バインディングを直接解放することはできません。したがって、双方向バインディングをキャンセルする方法は、新しいオブジェクトを作成し、元のオブジェクトの値を新しいオブジェクトに割り当てることです。これは JavaScript の単なるディープコピーではないでしょうか?

はい、angular.copy は Angular が提供するディープコピーメソッドです。したがって、angular.copy を通じてコピーされたオブジェクトは、元のオブジェクトの値と一貫性を保つことができ、古いオブジェクトと同じ参照をポイントしないため、オブジェクト変数の双方向バインディングが実現されます。