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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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中的(伪)多线程与多进程
2013/07/01 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP队列用法实例
2014/11/05 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
js中开关变量使用实例
2017/02/24 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
用Python3创建httpServer的简单方法
2018/06/04 Python
python生成密码字典的方法
2018/07/06 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
写自荐信要注意什么
2013/12/26 职场文书
推荐信怎么写
2014/05/09 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年女生节活动总结
2015/02/27 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书