浅拷贝和深拷贝都是对于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. 通过IDEA快速定位和排除依赖冲突

    前言 我们程序员在开发的时候经常会遇到各种各样的 BUG 问题,其中大部分是业务逻辑异常,还有一些是代码书写不规范造成的异常例如:NullPointException(NPE),IndexOutOfB ...

  2. 002.Kubernetes简单入门实例

    一 环境准备 1.1 基础环境 Kubernetes模式:单机版 系统环境:CentOS 7/172.24.9.157 部署方式:yum快速部署 其他设置:开启NTP.关闭防火墙及SELinux 二 ...

  3. mount 和 /etc/fstab关系。

    mount  -a 自动按照格式执行/etc/fstab里面的文件. /etc/fstab 文件格式: device        mount-point      type      options ...

  4. 1114作业 html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. MSF小记

    0x00 Windows,Linux反弹shell生成 Windows: msfvenom -p windows/meterpreter/reverse_tcp lhost=[你的IP] lport= ...

  6. 【集合系列】- 深入浅出分析Collection中的List接口

    一.List简介 List 的数据结构就是一个序列,存储内容时直接在内存中开辟一块连续的空间,然后将空间地址与索引对应. 以下是List集合简易架构图 由图中的继承关系,可以知道,ArrayList. ...

  7. [ASP.NET Core 3框架揭秘] 文件系统[1]:抽象的“文件系统”

    ASP.NET Core应用 具有很多读取文件的场景,比如配置文件.静态Web资源文件(比如CSS.JavaScript和图片文件等)以及MVC应用的View文件,甚至是直接编译到程序集中的内嵌资源文 ...

  8. [Bootstrap] Bootstrap学习笔记

    1.因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上<!DOCTYPE html> 2.Bootstrap需要JQuery才能正常工作,所以需要导入jquery ...

  9. Apache中AllowOverride的详细配置使用

    我们通常利用Apache的rewrite模块对URL进行重写,rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对.hta ...

  10. 搭建Nginx七层反向代理

    基于https://www.cnblogs.com/Dfengshuo/p/11911406.html这个基础上,在来补充下七层代理的配置方式.简单理解下四层和七层协议负载的区别吧,四层是网络层,负载 ...