angular.extend方法的具体使用

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>

控制台的打印结果如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们

赞 (0)

相关推荐

  • AngularJS extend用法详解及实例代码

    AngularJS extend用法 angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝赋给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象.         实例一:var r = angular.extend(b, a);将对象a的第一层属性(不管是简单属性还是对象)拷贝赋给对象b的第一层属性,即如果是对象,则是引用的是同一个对象,并返回对象b Js代码 var a = { name : 'bijian',

  • angular.extend方法的具体使用

    angular.extend方法的具体使用

    AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性,如下图所示. angular.extends()方法的第一个参数是要被扩展的对象,后面可以传入一个或多个对象. 如果想要保存一个对象的状态,除了可以调用angular.copy()方法外,还可以把一个空对象{}作为第一个对象传入. 但要注意的是,angular.extends()是非递归的,也就是说:如果扩展的属性中有对象,那么二者同时引用同一

  • Angular工具方法学习

    Angular工具方法学习

    angular为我们提供了很多的工具方法. angular.bind 更改this指向 var obj1 = { name : 'obj1', show : function(str){ return this.name + str; } }; var obj2 = { name : 'obj2' }; var a = angular.bind(obj2,obj1.show,' is a object'); var b = angular.bind(obj2,obj1.show,[' is a

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

  • 在Python中操作列表之list.extend()方法的使用

    extend()方法追加序列内容到列表. 语法 以下是extend()方法的语法: list.extend(seq) 参数 seq -- 这是列表的元素 返回值 此方法不返回任何值,但添加内容到现有列表中 例子 下面的例子显示了extend()方法的使用 #!/usr/bin/python aList = [123, 'xyz', 'zara', 'abc', 123]; bList = [2009, 'manni']; aList.extend(bList) print "Extended L

  • jQuery中的deferred对象和extend方法详解

    1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

  • 详解jQuery插件开发中的extend方法

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等... 我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发 在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的  一.Jquery的扩展方法原型是: extend(dest,s

  • 分析了一下JQuery中的extend方法实现原理

    分析了一下JQuery中的extend方法实现原理

    很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码: 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() {      var options, name, src, copy, copyIsArray, clone,          target =

  • jQuery中extend()和fn.extend()方法详解

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

  • vue使用Vue.extend方法仿写个loading加载中效果实例

    vue使用Vue.extend方法仿写个loading加载中效果实例

    目录 需求描述 效果图 代码实现 第一步,新建loading组件 第二步,新建index.js文件 第三步,在main.js中引入之 第四步,命令式调用 Vue.extend方法的理解 总结 需求描述 本文我们使用vue的extend方法实现一个全屏loading加载效果 通过命令就可以让弹框开启或关闭,比如this.$showDialog()开启,this.$hideDialog()关闭 方法可以传参更改loading中的文字 也可以传参更改loading背景色 当然这里除了文字,背景色什么的

随机推荐