AngularJs的angular.extend()方法可以把一個或多個對象中的方法和屬性擴展到一個目的對象中，使得這個對象擁有其他對象相同的方法和屬性，如下圖所示。
angular.extends()方法的第一個參數是要被擴展的對象，後面可以傳入一個或多個對象。
如果想要保存一個對象的狀態，除了可以調用angular.copy()方法外，還可以把一個空對象｛｝作爲第一個對象傳入。
但要注意的是，angular.extends()是非遞歸的，也就是說：如果擴展的屬性中有對象，那麼二者同時引用同一個對象！
下面這個例子證實了這個說法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!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對應的值會被後者覆蓋。
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$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"}}