angular.extend方法和merge方法


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>

  控制台的打印結果如下:

  1. I can only cry!  
  2. I can earn money!  
  3. I hate you!  
  4. 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"}}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM