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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
vue的$http的get请求要加上params操作
Nov 12 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生成略缩图代码
2012/07/16 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JS远程获取网页源代码实例
2013/09/05 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JSONP之我见
2015/03/24 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
Ubuntu下安装PyV8
2016/03/13 Python
Numpy中的mask的使用
2018/07/21 Python
python中的json总结
2018/10/11 Python
python实现图片转字符小工具
2019/04/30 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
工伤事故证明
2014/10/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
2016中秋节问候语
2015/11/11 职场文书
合作协议书格式范本
2016/03/21 职场文书