angular.extend方法的具體使用

發(fā)布時間：2020-10-02 19:33:22 來源：腳本之家閱讀：147 作者：itsonglin 欄目：web開發(fā)

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

angular.extends()方法的第一個參數(shù)是要被擴展的對象，后面可以傳入一個或多個對象。

如果想要保存一個對象的狀態(tài)，除了可以調(diào)用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>

控制臺的打印結(jié)果如下：

I can only cry!
I can earn money!
I hate you!
I hate you!

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云

向AI問一下細節(jié)

angular.extend方法的具體使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽