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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
详解Vue快速零配置的打包工具——parcel
Jan 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
mysql 全文搜索 技巧
2007/04/27 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JS传参及动态修改页面布局
2017/04/13 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
js的对象与函数详解
2019/01/21 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
使用python 3实现发送邮件功能
2018/06/15 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
python实现计算图形面积
2021/02/22 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
校园安全标语
2014/06/07 职场文书
雷人标语集锦
2014/06/19 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书