angular.extend方法的具体使用


Posted in Javascript onSeptember 14, 2017

AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中,使得这个对象拥有其他对象相同的方法和属性,如下图所示。

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! 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木

Javascript 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
浅谈angular.copy() 深拷贝
Sep 14 #Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 #Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 #Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 #Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 #Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 #Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 #Javascript
You might like
深入分析PHP引用(&amp;)
2014/09/04 PHP
php实现对象克隆的方法
2015/06/20 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
JS交换变量的方法
2015/01/21 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python中and和or如何使用
2020/05/28 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
为什么要有struct关键字
2012/05/08 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
护士自我鉴定总结
2014/03/24 职场文书
产品销售计划书
2014/05/04 职场文书
安全口号大全
2014/06/21 职场文书
文明单位申报材料
2014/12/23 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL