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
Feb 25 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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 limit查询优化分析
2008/11/12 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python快排算法详解
2019/03/04 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
毕业学生推荐信
2013/12/01 职场文书
团拜会策划方案
2014/06/07 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
科技馆观后感
2015/06/08 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
python基础之文件处理知识总结
2021/05/23 Python