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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
JavaScript 中的六种循环方法
Jan 06 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
论坛头像随机变换代码
2006/10/09 PHP
php 表单验证实现代码
2009/03/10 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
交通安全演讲稿
2014/01/07 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
报关专员求职信范文
2014/02/22 职场文书
教师见习报告范文
2014/11/03 职场文书
2015年端午节活动方案
2015/05/05 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python