浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用(堆和栈的关系,原始(基本)类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,object array 则是存入桟中,只用一个指针来引用值,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。

1、浅拷贝

默认是浅拷贝,只是将地址进行了复制,示例如下:

//浅拷贝
var obj1={name:"cat"};
var obj2=obj1; obj2.name="pig"; console.log(obj1.name);
console.log(obj2.name);

结果:pig

2、深拷贝

深拷贝就是对目标的完全拷贝,不像浅拷贝那样只是复制了一层引用,就连值也都复制了。

只要进行了深拷贝,不会相互影响。

方法一:利用 JSON 对象中的 parse 和 stringify;

注:如果对象中含有一个函数时(很常见),就不能用这个方法进行深拷贝

var obj1 = {
name: "cat",
show:function(){
console.log(this.name);
}
};
var obj2 = JSON.parse(JSON.stringify(obj1)); obj2.name = "pig"; console.log(obj1.name);
console.log(obj2.name); obj1.show();
obj2.show(); //函数被丢失

方法二:利用递归来实现每一层都重新创建对象并赋值

//对象
var obj1 = {
name: "cat",
show:function(){
console.log(this.name);
}
}; //这种深拷贝函数不会丢失
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if(obj && typeof obj === "object") {
for(key in obj) {
if(obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象,如果是,递归复制
if(obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
var obj3=deepClone(obj1);
//输出cat
obj3.show();

js对象的浅拷贝与深拷贝的更多相关文章

  1. JS数组和对象的浅拷贝和深拷贝

    共勉~ 在许多编程语言中,传递参数和赋值是通过值的直接复制或者引用复制完成的.在JavaScript中,对于值是直接进行复制还是引用复制在语法上是没有区别的,完全是根据值的类型来决定的. 在JavaS ...

  2. js 数组的浅拷贝和深拷贝

    1.背景介绍 javascript分原始类型与引用类型.Array是引用类型,直接用"="号赋值的话,只是把源数组的地址(或叫指针)赋值给目的数组,指向的是同一个内存地址,其中一个 ...

  3. js中的浅拷贝和深拷贝

    说说最近所学:浅拷贝和深拷贝也叫做浅克隆和深克隆,深浅主要针对的是对象的"深度",常见的对象都是"浅"的,也就是对象里的属性就是单个的属性,而"深&q ...

  4. 浅谈JS中的浅拷贝与深拷贝

    前端工程师应该都比较熟悉浅拷贝和深拷贝的概念,在日常业务代码的过程中,特别是做数据处理的时候,经常行的会遇到,比如如何在不修改原对象的基础上,重新生成一个一模一样的对象,加以利用,又或是,如何巧妙地运 ...

  5. Java对象的浅拷贝和深拷贝&&String类型的赋值

    Java中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.方法传参或返回值时,会有值传递和引用(地址)传递的差别. 浅拷贝(Shallow Copy): ①对于数据类型是 ...

  6. Python中的可变对象与不可变对象、浅拷贝与深拷贝

    Python中的对象分为可变与不可变,有必要了解一下,这会影响到python对象的赋值与拷贝.而拷贝也有深浅之别. 不可变对象 简单说就是某个对象存放在内存中,这块内存中的值是不能改变的,变量指向这块 ...

  7. JS中的浅拷贝与深拷贝

    浅拷贝与深拷贝的区别: 浅拷贝: 对基本类型和引用类型只进行值的拷贝,即,拷贝引用对象的时候,只对引用对象的内存地址拷贝,新旧引用属性指向同一个对象,修改任意一个都会影响所有引用当前对象的变量. 深拷 ...

  8. js中值的基本类型与引用类型,以及对象引用,对象的浅拷贝与深拷贝

    js有两种类型的值:栈:原始数据类型(undefinen,null,boolead,number,string)堆:引用数据类型(对象,函数和数组)两种类型的区别是:储存位置不同,原始数据类型直接存储 ...

  9. 面试题常考&必考之--js中的对象的浅拷贝和深拷贝(克隆,复制)(下)

    这里主要是讲深拷贝: 深拷贝:个人理解就是拷贝所有的层级 1.像对象里再放数组和对象这些叫引用值.开始我们先判断大对象中是否有引用值(数组和小对象), 然后在判断引用值是数组还是对象 2.开始啦: 1 ...

随机推荐

  1. 阿里巴巴开源项目: 基于mysql数据库binlog的增量订阅&消费

    背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增量变更,不过从2010年开始,阿里系公司开始逐步的尝 ...

  2. Spring Boot2 系列教程(二十一)整合 MyBatis

    前面两篇文章和读者聊了 Spring Boot 中最简单的数据持久化方案 JdbcTemplate,JdbcTemplate 虽然简单,但是用的并不多,因为它没有 MyBatis 方便,在 Sprin ...

  3. python爬虫-携程-eleven参数

    携程-eleven分析 一.eleven的位置 通过对旁边栈的分析,它是在另一个js文件中调用的.那个js文件是一个自调用的函数,所以我们可以直接copy下来,用浏览器执行看看 执行运行是会报错的,u ...

  4. 第5天,python之路

    已经过了两三天了,东西一点没来写,今天慢慢的写吧. 还是会按Alex Li的流程来学习,编写     写出自己的东西 常用的数据类型 简单的有,str ,int , 常用的:  列表list[], 字 ...

  5. jquery鼠标点击穿透的解决方法

    jquery鼠标点击穿透的解决方法 <pre><div class="showcontainer" style="background:#000;dis ...

  6. linux日常笔记(1)

    1.SELlinux SELinux是 美国国家安全局 (NSA) 对于 强制访问控制的实现 =>可以使root受限的权限 关闭SELinux=>修改配置文件,永久生效; sed -i ' ...

  7. 【前端VUE】【后端SSM】 记录一次多条件查询状态下加载极慢的解决思路和解决方案

    最近在开发一个Online Judge系统,其中有一个“挑战模式”模块,如图所示 由于是第一次使用ECharts做开发,所以完成整个模块的过程也是边写边学了,记录一下问题: 遇到的问题:在最开始进行测 ...

  8. linux内核的preempt抢占调度,preempt_count抢占保护“锁”

    抢断调度,是调度机制对实时系统需要的支持,是一种快速响应的重调度机制.既然与重调度有关,那么就先回顾一下调度和重调度. 调度分两种情况,1. 一种是自愿调度,由代码主动调用schedule来让度cpu ...

  9. ZeroC ICE的协议

  10. Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题

    在前端开发的过程中,我们常常会用到iframe去在我们的页面中引用一个子页面,而父子页面又常常会有交互.在同域情况下,子页面如果想要访问父页面中的window对象中的方法的话,直接在当前页面中使用wi ...