angular.extend()

AngularJS的angular.extend()方法可以把一個或多個對象中的方法和屬性擴展到一個目的對象中,使得這個對象擁有其他對象相同的方法和屬性,如下圖所示。

擴展

angular.extends()方法的第一個參數是要被擴展的對象,后面可以傳入一個或多個對象。
如果想要保存一個對象的狀態,除了可以調用angular.copy()方法外,還可以把一個空對象{}作為第一個對象傳入。
但要注意的是,angular.extends()是非遞歸的,也就是說:如果擴展的屬性中有對象,那么二者同時引用同一個對象!

<!DOCTYPE html>
<html lang="en" ng-app="copyExample">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
    <button ng-click="extendMe()">點擊我!</button>
</div>
<script>

    angular.module('copyExample', [])
            .controller('ExampleController', ['$scope', 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.extendMe = 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>
</body>
</html>

輸出結果:

I can only cry!  
I can earn money!  
I hate you!  
I hate you!  
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容