首先我們來看看範例程式碼
<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('app', []) .controller('CopyController', function ($scope) { // body... $scope.changeData1 = function () { // body... scope.user1=scope.user1= scope.user; $scope.user1.data = 'is changed'; } $scope.copy = function () { // body... scope.copyUser=angular.copy(scope.copyUser=angular.copy( scope.user); } }); </script>
從上面的示範可以看到,當點擊copy按鈕時,copyData的值就變成了”this is old data”,成功將user的值複製到copyUser.
當點擊change按鈕後,user1和user的值都變成了'is changed',而copyUser的值卻沒有改變。這時候在input輸入框改變值,user和user1的值都會跟著改變,說明了這二者其實是同一個變數引用。而copyUser沒有發生變化。
angular.copy 能取消雙向綁定的原理
這跟JavaScript中物件是引用型別有關。
JavaScript中的值類型
在JavaScript中,值分為原始值和參考值兩種類型。
原始值:儲存在堆疊(Stack)中的簡單資料字段,也就是說,它們的值是直接儲存在變數存取的位置;
引用值:儲存在堆疊(heap)中,也就是說,儲存在變數處的值是一個指針,指向儲存物件的記憶體。
在JavaScript中的物件就是引用值,也就是說物件是透過引用傳遞值的。
所以在上述的程式碼中:
物件$scope.user和$scope.user1的值都是指向了同一個引用。對Angular來說,監聽變數變化是在監聽其物件所引用的位址,所以當物件的引用值發生了變化,所有指向它的物件都會跟著改變。
所以在Angular中,直接通過物件的賦值是無法解除雙向綁定的。所以要解除雙向綁定的辦法就是新建立個對象,然後將原有的對象的值賦值給新對象。這不就是JavaScript中的深拷貝嘛。
對的,angular.copy就是Angular提供的 deep copy 的方法。所以透過angular.copy複製出來的對象,既能和原有的對象值保持一致,又不與舊對象指向同一個引用,從而實現了解除對象變量的雙向綁定。