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插件
Nov 24 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
js实现两点之间画线的方法
May 12 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Angular7.2.7路由使用初体验
Mar 01 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 木马攻击防御技巧
2009/06/13 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
Python判断字符串与大小写转换
2015/06/08 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
python 获取url中的参数列表实例
2018/12/18 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python获取Linux发行版名称
2019/08/30 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
远东集团网络工程师面试题
2014/10/20 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
营销总经理岗位职责
2014/02/02 职场文书
青春奉献演讲稿
2014/05/08 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
五年级作文之想象作文
2019/10/30 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
mysql数据库实现设置字段长度
2022/06/10 MySQL