AngularJS extend用法详解及实例代码


Posted in Javascript onNovember 15, 2016

AngularJS extend用法

   angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝赋给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象。

        实例一:var r = angular.extend(b, a);将对象a的第一层属性(不管是简单属性还是对象)拷贝赋给对象b的第一层属性,即如果是对象,则是引用的是同一个对象,并返回对象b

Js代码 

var a = { 
  name : 'bijian', 
  address : 'shenzhen', 
  family : { 
    num : 6, 
    amount : '80W' 
  } 
}; 
var b = {}; 
var r = angular.extend(b, a); 
console.log('a:' + JSON.stringify(a)); 
console.log('b:' + JSON.stringify(b)); 
console.log('r:' + JSON.stringify(r)); 
 
b.address = 'hanzhou'; 
b.family.amount = '180W'; 
console.log('a:' + JSON.stringify(a)); 
console.log('b:' + JSON.stringify(b)); 
console.log('r:' + JSON.stringify(r));

运行结果:

Text代码 

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
r:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"180W"}} 
b:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}} 
r:{"name":"bijian","address":"hanzhou","family":{"num":6,"amount":"180W"}}

         实例二:var r = angular.extend(b, a, z);相继将对象a、z的第一层属性(不管是简单属性还是对象)拷贝赋给对象b的第一层属性,即如果是对象,则是引用的是同一个对象,并返回对象b

Js代码 

var a = { 
  name : 'bijian', 
  address : 'shenzhen', 
  family : { 
    num : 6, 
    amount : '80W' 
  } 
}; 
var z = { 
  family : { 
    amount : '150W', 
    mainSource : '经营公司' 
  } 
}; 
var b = {}; 
var r = angular.extend(b, a, z); 
console.log('a:' + JSON.stringify(a)); 
console.log('b:' + JSON.stringify(b)); 
console.log('r:' + JSON.stringify(r)); 
 
b.address = 'hanzhou'; 
b.family.amount = '180W'; 
console.log('a:' + JSON.stringify(a)); 
console.log('b:' + JSON.stringify(b)); 
console.log('r:' + JSON.stringify(r));

运行结果:

Text代码 

a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}} 
r:{"name":"bijian","address":"shenzhen","family":{"amount":"150W","mainSource":"经营公司"}} 
a:{"name":"bijian","address":"shenzhen","family":{"num":6,"amount":"80W"}} 
b:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}} 
r:{"name":"bijian","address":"hanzhou","family":{"amount":"180W","mainSource":"经营公司"}}

        再多的实例也不如源代码来的简单、直接和准确,angular.extend源码如下:

Js代码 

/** 
 * @ngdoc function 
 * @name angular.extend 
 * @function 
 * 
 * @description 
 * Extends the destination object `dst` by copying all of the properties from the `src` object(s) 
 * to `dst`. You can specify multiple `src` objects. 
 * 
 * @param {Object} dst Destination object. 
 * @param {...Object} src Source object(s). 
 * @returns {Object} Reference to `dst`. 
 */ 
function extend(dst) { 
 var h = dst.$$hashKey; 
 forEach(arguments, function(obj){ 
  if (obj !== dst) { 
   forEach(obj, function(value, key){ 
    dst[key] = value; 
   }); 
  } 
 }); 
 
 setHashKey(dst,h); 
 return dst; 
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
如何用threejs实现实时多边形折射
May 07 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 #Javascript
javascript实现消灭星星小游戏简单版
Nov 15 #Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 #Javascript
禁用backspace网页回退功能的实现代码
Nov 15 #Javascript
sea.js常用的api简易文档
Nov 15 #Javascript
js实现倒计时及时间对象
Nov 15 #Javascript
You might like
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php绘制一条直线的方法
2015/01/24 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
Python的pycurl包用法简介
2015/11/13 Python
python可视化实现代码
2019/01/15 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
2014年小学辅导员工作总结
2014/12/23 职场文书
工程质检员岗位职责
2015/04/08 职场文书
劳动模范获奖感言
2015/07/31 职场文书
《假如》教学反思
2016/02/17 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android