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 相关文章推荐
Jquery中CSS选择器用法分析
Feb 10 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
TypeScript类型声明书写详解
Aug 28 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
微信小程序实现分页加载效果
Nov 19 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php画图实例
2014/11/05 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PDO::rollBack讲解
2019/01/29 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python实现网站表单提交和模板
2019/01/15 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
音乐教学案例
2014/01/30 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
新党章心得体会
2014/09/04 职场文书
民间借贷协议书范本
2014/10/01 职场文书
学习三严三实心得体会
2014/10/13 职场文书
最感人的道歉情书
2015/05/12 职场文书
2015年科普工作总结
2015/07/23 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS