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 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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
Sony CFR 320 修复改造
2020/03/14 无线电
玩转图像函数库―常见图形操作
2006/09/03 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python中List的sort方法指南
2014/09/01 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Django values()和value_list()的使用
2020/03/31 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
商超业务员岗位职责
2014/03/12 职场文书
委托公证书范本
2014/04/03 职场文书
计划生育宣传标语
2014/06/21 职场文书
搞笑车尾标语
2014/06/23 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python