js对象引用和赋值
体验更优排版请移步原文:http://blog.kwin.wang/programming/js-object-reference-assign.html
先看一个简单例子,
var obj = {
a : 1
}
var obj1 = obj;
function test(b){
b.a = 2
}
test(obj1);
console.log(obj.a);//2
由于js中对象属于引用类型,var obj1 = obj 这一步相当于把obj的地址赋值给了obj1,他们两个指向的都是原对象的地址,所以通过其中的一个去修改值时其实是修改他们指向的那个对象。例子中通过调用test方法改变了原对象的值,因此这里应该输出2。
对于js的值类型和引用类型的区分,这里有个通俗的比喻,我们可以用“连锁店”和“总店钥匙”这两个概念来帮助理解。
1.值类型赋值理解:相当于在一个新的地方按照连锁总店的统一标准(统一店面理解为相同的变量内容)新开一个分店,这样新开的店与总店互不影响、各自运营;
var a='China';
var b=a;
a='USA';
console.log(b); //China
2.引用类型赋值理解:相当于把连锁总店的钥匙(变量引用地址)复制一把给了另外一个老板,此时两个老板同时管理总店,两个老板的行为都有可能对总店的运营造成影响。
这里详细说后者,
1.如果真要复制对象互不影响,则要通过转换赋值或者遍历key:value来复制你的方法和属性。需要注意的是对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则要继续对子元素进行遍历赋值。
例:转换赋值
var data = {a:1,b:2,c:3,d:[0,1,2,3]};
var str = JSON.stringify(data);
var data1 = JSON.parse(str);
data1["e"] = 4;
data1["d"][0] = 11;
console.log(data);//Object {a: 1, b: 2, c: 3, d: [0,1,2,3]}
console.log(data1);//Object {a: 1, b: 2, c: 3, d: [11,1,2,3], e: 4}
2.当对象引用做为函数参数传递时,依然会相互影响,如下示例:
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);//{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}
console.log(JSON.stringify(data));//{"a":1,"b":2,"c":3,"d":{"q":4,"w":5,"e":6},"r":5}
3.但是,对象引用赋值后,如果将对象置空,相互间是不受影响的,如下:
var arr = {"a":"1","b":"2"};
var arr1 = arr;
arr = {};
arr["a"] = 2;
console.log(arr1);//Object {a: "1", b: "2"}
console.log(arr);//Object {a: 2}
js对象引用和赋值的更多相关文章
- 深度克隆---js对象引用
首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了. 引用类型的赋值其实是对象保 ...
- javascript对象引用与赋值
avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...
- 关于js对象引用的小例子
看完下面的代码,相信对js对象引用又有了新的认识,直接上代码: // split()把字符串分割成字符串数组 // reverse() 会改变数组本身,**并返回原数组的引用**.!!!! var a ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- JS连等赋值的坑
cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...
- js对象引用赋值后
a={f:1} b={} b.a=a console.log(b.a) a.b=2 console.log(b.a) a={f:1} b={} b.a=a console.log(b.a) a={b: ...
- JS 数据类型、赋值、深拷贝和浅拷贝
js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. null. 一个表明 null 值的特殊关键字. JavaScript 是大小写敏感的,因此 null 与 ...
- js连等赋值
引用:http://www.iteye.com/topic/785445 https://segmentfault.com/q/1010000002637728 这是一个问题 var a = {n:1 ...
- Js的引用赋值与传值赋值
要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型. 1.基本类型 基本的数据类型有:undefined,boolean,number,string,null. 基本类型存放在栈区,访问 ...
随机推荐
- 使用 Spring Cloud 和 Docker 构建微服务架构
如何使用Spring Boot.Spring Cloud.Docker和Netflix的一些开源工具来构建一个微服务架构. 本文通过使用Spring Boot.Spring Cloud和Docker构 ...
- 服务容错保护断路器Hystrix之三:断路器监控(Hystrix Dashboard)-单体监控
turbine:英 [ˈtɜ:baɪn] 美 [ˈtɜ:rbaɪn] n.汽轮机;涡轮机;透平机 一.Hystrix Dashboard简介 在微服务架构中为了保证程序的可用性,防止程序出错导致网络阻 ...
- 学习笔记之k-nearest neighbors algorithm (k-NN)
k-nearest neighbors algorithm - Wikipedia https://en.wikipedia.org/wiki/K-nearest_neighbors_algorith ...
- SEO优化之“不要轻易使用泛解析”
原文地址:http://www.chinaz.com/web/2007/0505/8077.shtml 半夜三更的突然想起这个老想提出或者大家都知道的问题! 先续在这里,之后给予全面补充! 什么是泛解 ...
- openVPN设置本地密码验证
wget https://git.io/vpn -O openvpn-install.sh && bash openvpn-install.sh https://github.com/ ...
- [UE4]子弹穿透多个机器人
一.将机器人的碰撞类型改成“OverLap” 二.使用“MultiLineTraceByChannel”这个是可以穿透检测,可以检测到多个物体(前提是被检测物体的碰撞类型是“OverLap”).“Li ...
- Abp.Linq.Extensions扩展(1)--static class QueryableExtensions
// 摘要: // Used for paging with an Abp.Application.Services.Dto.IPagedResultRequest object ...
- SCCM 2012 R2实战系列之三:独立主站点部署
3.1 SCCM 2012 R2主站点的安装 SCCM 2012 R2跟以前的SCCM 2007不同的是多了一个管理中心站点的角色, 管理中心站点主要负责SCCM管理控制和报表查看. 主站点跟以往的S ...
- Unreal Engine 4 动态切割模型实现
转自:http://gad.qq.com/article/detail/33199 <合金装备:复仇>里面,有一个很有趣的设定,游戏里大部分的场景和物件都可以用主角的刀动态切割. UE4中 ...
- nodejs使用案例-mysql操作
1.package.json: { "scripts": { "start": "node app.js" }, "devDepe ...