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下过滤数组重复值的代码
Sep 10 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
详解javascript new的运行机制
Jan 26 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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
模拟flock实现文件锁定
2007/02/14 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python与R语言的简要对比
2017/11/14 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python实现整数的二进制循环移位
2019/03/08 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
最新自我评价范文
2013/11/16 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
美食节策划方案
2014/05/26 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2014年采购工作总结
2014/11/20 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers