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 相关文章推荐
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JS setTimeout与setInterval的区别
Apr 20 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
javascript轮播图算法
2016/10/21 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
关于uniApp editor微信滑动问题
2021/01/15 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
pandas数据集的端到端处理
2019/02/18 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
党员岗位承诺书
2014/03/25 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技