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 日期计算算法
Sep 11 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
移动端界面的适配
Jan 11 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
详解Typescript里的This的使用方法
Jan 08 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生成QRcode实例
2014/09/22 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript DOM基础
2015/04/13 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
python选择排序算法实例总结
2015/07/01 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python psutil模块使用方法解析
2019/08/01 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
python re.match()用法相关示例
2021/01/27 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
投标诚信承诺书
2014/05/26 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python