21-angular.merge
通过从src对象(s)复制自己的可枚举属性到dst，深度扩展了目标对象的dst。您可以指定多个src对象。如果您想保留原始对象，那么可以通过将空对象作为目标来实现:var object = angular.merge({}, object1, object2).
不像extend(),merge()递归地进入源对象的对象属性，执行一个深度拷贝
<!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.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';
}
});
</script>
</head>
<body>
<div ng-controller="extendController">
<button ng-click="change()">点击我！</button>
</div>
</body>
</html>
效果：
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"}}
如下图，在extend中，src中的c对象会被src2中的c对象覆盖；在merge中，会将两个源中的对象都拷贝，如src中c对象中的d，如果两个源中存在相同对象，并且相同对象中存在相同key，key对应的值会被后者覆盖。