体验更优排版请移步原文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对象引用和赋值的更多相关文章

  1. 深度克隆---js对象引用

    首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了. 引用类型的赋值其实是对象保 ...

  2. javascript对象引用与赋值

    avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...

  3. 关于js对象引用的小例子

    看完下面的代码,相信对js对象引用又有了新的认识,直接上代码: // split()把字符串分割成字符串数组 // reverse() 会改变数组本身,**并返回原数组的引用**.!!!! var a ...

  4. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  5. JS连等赋值的坑

    cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...

  6. 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: ...

  7. JS 数据类型、赋值、深拷贝和浅拷贝

    js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. null. 一个表明 null 值的特殊关键字. JavaScript 是大小写敏感的,因此 null 与 ...

  8. js连等赋值

    引用:http://www.iteye.com/topic/785445 https://segmentfault.com/q/1010000002637728 这是一个问题 var a = {n:1 ...

  9. Js的引用赋值与传值赋值

    要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型. 1.基本类型 基本的数据类型有:undefined,boolean,number,string,null. 基本类型存放在栈区,访问 ...

随机推荐

  1. AS3 内存基础

    1:获取一个对象的字节数: var str:String="ddd啊"; var byte:ByteArray=new ByteArray(); byte.writeMultiBy ...

  2. 【模态窗口-Modeldialog】提交请求时禁止在新窗口打开页面的处理方法

    在使用Window.ShowModalDialog()打开模态窗口后,在模态窗口内提交时总是会在新窗口中打开. 解决办法: 在要弹出的窗口的<head>之间加: <base targ ...

  3. 峰Redis学习(9)Redis 集群(概述)

    第一节:Redis 集群概述 redis cluster是去中心化,去中间件的,也就是说,集群中的每个节点都是平等的关系,都是对等的,每个节点都保存各自的数据和整个集群的状态.每个节点都和其他所有节点 ...

  4. 面向对象的轮播js

    1.自执行函数的前后要加分号 案例: ;(function(){})(); 2.面向对象的最大优势节省了许多内存 正式开写面向对象的轮播: <!DOCTYPE html> <html ...

  5. Windows和pthread中提供的自旋锁

    Windows和POSIX中都提供了自旋锁,我们也可以通过C++11的atomic来实现自旋锁.那么两者性能上面是什么关系?先引入实现代码: #ifndef __spinlock_h__ #defin ...

  6. PHP中常用的数组函数总结

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数,数组的分段和填充,数组与栈,数组与列队,回调函数,排序,计算,其他的数组函数等. 一,数组操作的基本函数 数组的键名和值 array_va ...

  7. [UE4]时间轴线TimeLine,Lerp插值

    一.TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点. 二.Lerp插值 Lerp插值一般与 ...

  8. RHEL7安装配置VNC

    RHEL7安装配置VNC 作者:Eric 微信:loveoracle11g 安装配置VNC服务程序 [root@zhouwanchun yum.repos.d]# cd ~ [root@zhouwan ...

  9. Hadoop 2.x常用端口及查看方法

    Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...

  10. C# 线程 在 sleep,suspend 之后 Abort 的方法

    1) 线程在sleep时的Abort     方法:对线程函数用 catch ThreadAbortException ,并return.   示例: [csharp] view plaincopy ...