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 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JavaScript中的Function函数
Aug 27 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue实现多级菜单效果
Oct 19 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
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
js正则相关知识点专题
2018/05/10 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python中append函数用法讲解
2020/12/11 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
餐饮主管岗位职责
2013/12/10 职场文书
借条如何写
2015/05/26 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Vue和Flask通信的实现
2021/05/19 Vue.js
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Hive HQL支持2种查询语句风格
2022/06/25 数据库