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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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的性能
2013/10/30 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
python二叉树的实现实例
2013/11/21 Python
python实现12306火车票查询器
2017/04/20 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
经典演讲稿开场白
2014/08/25 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
感谢信范文大全
2015/01/23 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书