AngularJs的angular.extend()方法可以把一個或多個對象中的方法和屬性擴展到一個目的對象中,使得這個對象擁有其他對象相同的方法和屬性,如下圖所示。
angular.extends()方法的第一個參數是要被擴展的對象,后面可以傳入一個或多個對象。
如果想要保存一個對象的狀態,除了可以調用angular.copy()方法外,還可以把一個空對象{}作為第一個對象傳入。
但要注意的是,angular.extends()是非遞歸的,也就是說:如果擴展的屬性中有對象,那么二者同時引用同一個對象!
下面這個例子證實了這個說法:
<!DOCTYPE html> <html ng-app="extendApp"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/angular.js"></script> <script type="text/javascript"> angular.module("extendApp", []) .controller("extendController", function($scope) { $scope.baby = { cry : function() { console.log("I can only cry!"); } } $scope.adult = { earn : function() { console.log("I can earn money!"); }, lover: { love:function() { console.log("I love you!"); } } } $scope.human = {} $scope.hehe = "hehe "; $scope.extend = function() { angular.extend($scope.human, $scope.baby, $scope.adult); $scope.human.cry(); $scope.human.earn(); <!-- 注意,這里修改了lover對象的love()方法,由於extends()方法不是深復制的,$scope.human 和$scope.adult其實引用的是同一個對象--> $scope.human.lover.love = function() { console.log("I hate you!"); } <!-- 這兩行都會輸出“I hate you !",可憐的adult對象, 他把自己的lover分享給了human! --> $scope.human.lover.love(); $scope.adult.lover.love(); } }); </script> </head> <body> <div ng-controller="extendController"> <button ng-click="extend()">點擊我!</button> </div> </body> </html>
控制台的打印結果如下:
- I can only cry!
- I can earn money!
- I hate you!
- I hate you!
merge
angular.merge(dst, src);
說明:
和extend的區別就是merge是深拷貝。
如下圖,在extend中,src中的c對象會被src2中的c對象覆蓋;在merge中,會將兩個源中的對象都拷貝,如src中c對象中的d,如果兩個源中存在相同對象,並且相同對象中存在相同key,key對應的值會被后者覆蓋。
代碼:
$scope.src = { a: 'A', b: 'B', c: { d: 'D', e: { f: 'F' } } }; $scope.src2 = { c: { src2: 'D', e: { src2: 'src2', f: 'FFFFF' } } }; $scope.dest = { A: 'a' }; $scope.temp = angular.merge($scope.dest, $scope.src, $scope.src2); $scope.change = function(){ $scope.temp.A = 'changed'; }
效果:
src: {"a":"A","b":"B","c":{"d":"D","e":{"f":"F"}}}
src2: {"c":{"src2":"D","e":{"src2":"src2","f":"FFFFF"}}}
temp: {"A":"a","a":"A","b":"B","c":{"d":"D","e":{"f":"FFFFF","src2":"src2"},"src2":"D"}}
dest: {"A":"a","a":"A","b":"B","c":{"d":"D","e":{"f":"FFFFF","src2":"src2"},"src2":"D"}}
點擊button后
src: {"a":"A","b":"B","c":{"d":"D","e":{"f":"F"}}}
src2: {"c":{"src2":"D","e":{"src2":"src2","f":"FFFFF"}}}
temp: {"A":"changed","a":"A","b":"B","c":{"d":"D","e":{"f":"FFFFF","src2":"src2"},"src2":"D"}}
dest: {"A":"changed","a":"A","b":"B","c":{"d":"D","e":{"f":"FFFFF","src2":"src2"},"src2":"D"}}