一、场景

除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝

将一个对象赋值给另外一个对象。

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

自定义对象

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变

这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改

二、浅拷贝

所以,我们需要封装一个函数,来对对象进行拷贝,通过for in 循环获取基本类型,赋值每一个基本类型,才能真正意义上的复制一个对象

var obj = {a:10};
function copy(obj){
var newobj = {};
for ( var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
}
var obj2 = copy(obj);
obj2.a = 20;
alert(obj.a); //10

这样就解决了对象赋值的问题。

三、深拷贝

但是这里存在隐患,如果obj中,a的值不是10,而是一个对象,这样就会导致在for in中,将a这个对象的引用赋值为新对象,导致存在对象引用的问题。

var obj = {a:{b:10}};
function copy(obj){
var newobj = {};
for ( var attr in obj) {
newobj[attr] = obj[attr];
}
return newobj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b); //20

因此,由于这个copy对象只是对第一层进行拷贝,无法拷贝深层的对象,这个copy为浅拷贝,我们需要通过递归,来拷贝深层的对象。将copy改造成递归即可

var obj = {a:{b:10}};
function deepCopy(obj){
if(typeof obj != 'object'){
return obj;
}
var newobj = {};
for ( var attr in obj) {
newobj[attr] = deepCopy(obj[attr]);
}
return newobj;
}
var obj2 = deepCopy(obj);
obj2.a.b = 20;
alert(obj.a.b); //10

JS对象的引用,对象的拷贝的更多相关文章

  1. Python 对象的引用计数和拷贝

    Python 对象的引用计数和拷贝 Python是一种面向对象的语言,包括变量.函数.类.模块等等一切皆对象. 在python中,每个对象有以下三个属性: 1.id,每个对象都有一个唯一的身份标识自己 ...

  2. Andorid Binder进程间通信---Binder本地对象,实体对象,引用对象,代理对象的引用计数

    本文參考<Android系统源码情景分析>,作者罗升阳. 一.Binder库(libbinder)代码: ~/Android/frameworks/base/libs/binder --- ...

  3. 浅谈String中的==和对象中引用对象类型的==

    @Test public void test02() { StringBuffer sb = new StringBuffer(); sb.append('a'); sb.append(11); Sy ...

  4. JS有关引用对象的拷贝问题

    JS中有关引用对象的拷贝问题 问题描述:在开发过程中,拷贝一个对象数组给另一个数组的时候,改变新数组中对象的属性值,原数组中的对象属性值也跟着改变了. 例如新定义一个数组arr1,里面有两个对象,然后 ...

  5. 用浅/深拷贝、和HTML5方法解决js对象的引用的问题

    先来看一个例子 例一: var a=[1,2,3]; var b=a; b.push(4); alert(b);//1,2,3,4 alert(a);//1,2,3,4 var a=[1,2,3]; ...

  6. 递归 与 js 对象的引用

    <script> //递归 function test(n) { if (n == 1) { return 1 } console.log(n) return n * test(n - 1 ...

  7. js 操作对象的引用和操作实际对象的区分

    JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...

  8. 一张图理清js原型链(通过内置对象的引用关系)

    很多同学估计写了几年js也没有搞清内置对象之间的原型链关系,鄙人抽空手绘了一张简图,以作参考: 简单说明一下,上图中annonymous()函数相当于是所有函数的根(它本身也是函数),他上面提供了一些 ...

  9. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

随机推荐

  1. C#排列组合类,写彩票算法的朋友们可以来看一看

    public class PermutationAndCombination<T>    {        /// <summary>        /// 交换两个变量    ...

  2. 前端每日实战:80# 视频演示如何用纯 CSS 创作一个自行车车轮

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XBXEPK 可交互视频 此视频是可 ...

  3. 【SQL】链接服务器

    最近做项目,需要对两个数据库进行同步操作,所以采用在Server SQL中建立链接服务器方式实现. 链接服务器,可以直接访问/操作其他服务器上的数据库表. 1.连接SQL Server链接服务器 EX ...

  4. ELK问题处理

    1.Logstash收集tomcat日志时报错warn: log4j:WARN No appenders could be found for logger (org.apache.http.clie ...

  5. libVEX学习

    VEX IR是一种更加接近于compiler使用的中间语言/中间表示,它是不依赖于特定体系架构的. 1. Code Blocks code blocks是VEX处理代码的一个单元,使用IRSB结构体表 ...

  6. shell脚本之nginx的安装

           为了编写nginx自动部署的脚本而刚学习的shell脚本语言.写文章只是为了记录,有错误勿喷. 一.创建shell脚本程序        操作系统是Linux的 CentOS 7 版本. ...

  7. 爬虫(四)—— 使用pyecharts展示数据

    pyecharts模块 pyecharts可以将数据形象的在页面中用图表显示 一.安装 pip install pyecharts 二.使用 import pyecharts # 创建一个页面 pag ...

  8. document.readyState和document.DOMContentLoaded判断DOM的加载完成

    document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. ...

  9. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

  10. javascript 中的函数

    /*   第二天   */ 函数 函数是js里最有趣的东西了,函数实际上就是对象,每个函数Function类型的实例,函数名实际上是指向函数对象的指针.不带圆括号的函数时访问函数的指针,带圆括号的是调 ...