JavaScript对象引用与赋值实例详解


Posted in Javascript onMarch 15, 2017

本文实例讲述了JavaScript对象引用与赋值。分享给大家供大家参考,具体如下:

<script type="text/javascript">
//例子一: 引用
var myArrayRef = new Array(0,1,2); //创建数组对象
var mySeconArrayRef = myArrayRef; // 对象复制.
myArrayRef[0] = 100; // 修改元素值
alert(mySeconArrayRef[0]);
/**
* 输出 100; 学过其它语言的都应该知道这里应该输出的是0 为什么输出的是100呢?
* 上面程序通过把myArrayRef对象复制给了mySeconArrayRef这时就存在了2个独立的 但最初值是相同的对象
* 因为是独立的为什么修改myArrayRef会对别一个对象有影响呢?大家都知道只有当他们引用的是同一个对象时这时修改一个才会
* 对别一个产生影响.但是在javascript语言中创建的对象myArrayRef值中其时保存的是对象的引用(也就是一个地址).
* 也就是 我用 new Array生成的保存在内存中而new Array把它所在的地方告诉了myArrayRef,myArrayRef又把这地址告诉了mySeconArrayRef
* 他们两个都指向的是new Array生成对象的地址而不是把对象保存在myArrayRef中,所以通过其中的一个去修改值时其时是修改他们同指象的那对象.
*/
alert(mySeconArrayRef[0] );
//例子二: 赋值
var myVa = 'ABC'; //把ABC的值 赋予了myVa
var myVb = myVa; // myVa 赋值给 myVb
myVa = 'DEF'; //修改myVa
/**
* 输出的是:ABC. 因为是把值保存在了变量了 而不是保存的是引用地址,所以他们两个是相对独立的整体.
*/
alert(myVb);
</script>

如果真要复制对象互不影响,则要通过转换赋值或者遍历key:value来复制你中的方法和属性。

注意:对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则继续对子元素进行遍历赋值。

转换赋值方式:

var data = {a:1,b:2,c:3,d:[0,1,2,3]};
var str = JSON.stringify(data);
var data1 = $.parseJSON(str); //$为jQuery对象需要引入jQuery包
data1["e"] = 4;
data1["d"][0] = 11;
console.log(data);
console.log(data1);

输出结果:

{a: 1, b: 2, c: 3, d: [0,1,2,3]}
{a: 1, b: 2, c: 3, d: [11,1,2,3], e: 4}

相互没有影响

当对象引用做为函数参数传递时候,依然会相互影响,切记,如下示例:

var data = {a:1,b:2,c:3,d:{q:4,w:5,e:6}};
var data1 = data;
function con(data2){
data2["r"] = 5;
console.log(JSON.stringify(data2));
}
con(data1);
console.log(JSON.stringify(data));

输出结果:

{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}
{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}

对象引用赋值后,如果将对象置空,相互间是不受影响的,如下:

var arr = {"a":"1","b":"2"};
var arr1 = arr;
arr = {};
arr["a"] = 2;
console.log(arr1);
console.log(arr);

输出结果:

{"a":"1","b":"2"},{"a":2}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery优缺点分析说明
Apr 10 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS定义类的六种方式详解
May 12 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
You might like
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
jQuery find和children方法使用
2011/01/31 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
学习Python需要哪些工具
2020/09/04 Python
最新pycharm安装教程
2020/11/18 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
建筑设计学生的自我评价
2014/01/16 职场文书
静心口服夜广告词
2014/03/20 职场文书
承诺函格式模板
2015/01/21 职场文书
新闻稿怎么写
2015/07/18 职场文书
大学新生入学感想
2015/08/07 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书