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打造PHP的AJAX表单提交实例
Nov 03 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
js中的this的指向问题详解
Aug 29 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JS中数据结构之栈
2019/01/01 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python中__slots__用法实例
2015/06/04 Python
Python匿名函数及应用示例
2019/04/09 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
关于Python解包知识点总结
2020/05/05 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
茶叶生产计划书
2014/01/10 职场文书
自我鉴定三原则
2014/01/13 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android