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 加上最后自己的验证
Nov 04 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
解决Nuxt使用axios跨域问题
Jul 06 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 作用域解析运算符(::)
2010/07/27 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php实现中文转数字
2016/02/18 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
超级强大的表单验证
2006/06/26 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
主持人演讲稿范文
2013/12/28 职场文书
借款协议书
2014/04/12 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android