前言

百科定义:拷贝就是拷贝指向对象的指针,意思就是说:拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间,浅拷贝只是一种简单的拷贝,让几个对象公用一个内存,然而当内存销毁的时候,指向这个内存空间的所有指针需要重新定义,不然会造成野指针错误。

拷贝内容总结

数据类型与堆栈的关系

基本类型与引用类型

  • 基本类型:undefined,null,Boolean,String,Number,Symbol
  • 引用类型:Object,Array,Date,Function,RegExp等

存储方式

  • 基本类型:基本类型值在内存中占据固定大小,保存在栈内存中(不包含闭包中的变量)
  • 引用类型:引用类型的值是对象,保存在堆内存中。而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址(引用),引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

注意:

  1. 闭包中的变量并不保存在栈内存中,而是保存在堆内存中。这一点比较好想,如果闭包中的变量保存在了栈内存中,随着外层中的函数从调用栈中销毁,变量肯定也会被销毁,但是如果保存在了堆内存中,内存函数仍能访问外层已销毁函数中的变量。看一段对应代码理解下:
function A() {
let a = 'koala'
function B() {
console.log(a)
}
return B
}

基本数据类型复制配图:

结论:在栈内存中的数据发生数据变化的时候,系统会自动为新的变量分配一个新的之值在栈内存中,两个变量相互独立,互不影响的。

引用数据类型复制

看一段代码

let a = {x:'kaola', y:'kaola1'}
let b = a;
b.x = '程序员成长指北';
console.log(a.x); // 程序员成长指北

  引用类型的复制,同样为新的变量b分配一个新的值,报错在栈内存中,不同的是这个变量对应的具体值不在栈中,栈中只是一个地址指针。两个变量地址指针相同,指向堆内存中的对象,因此b.x发生改变的时候,a.x也发生了改变。

浅拷贝

浅拷贝定义:

不知道的api我一般比较喜欢看MDN,浅拷贝的概念MDN官方并没有给出明确定义,但是搜到了一个函数Array.prototype.slice,官方说它可以实现原数组的浅拷贝。
对于官方给的结论,我们通过一段代码验证一下,并总结出浅拷贝的定义。

  • var a = [ 1, 3, 5, { x: 1 } ];
    var b = Array.prototype.slice.call(a);
    b[0] = 2;
    console.log(a); // [ 1, 3, 5, { x: 1 } ];
    console.log(b); // [ 2, 3, 5, { x: 1 } ];

    从输出结果可以看出,浅拷贝后,数组a[0]并不会随着b[0]改变而改变,说明a和b在栈内存中引用地址并不相同。

浅拷贝定义:

通过这个官方的slice浅拷贝函数分析浅拷贝定义:

新的对象复制已有对象中非对象属性的值和对象属性的引用。如果这种说法不理解换一种一个新的对象直接拷贝已存在的对象的对象属性的引用,即浅拷贝。

深拷贝操作

说了赋值操作和浅拷贝操作,大家是不是已经能想到什么是深拷贝了,下面直接说深拷贝的定义。

深拷贝定义

深拷贝会另外拷贝一份一个一模一样的对象,从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

搞不懂JS中赋值·浅拷贝·深拷贝的请看这里的更多相关文章

  1. python中赋值-浅拷贝-深拷贝之间的关系

    赋值: 变量的引用,没有拷贝空间 对象之间赋值本质上 是对象之间的引用传递而已.也就是多个对象指向同一个数据空间. 拷贝的对象分两种类型: . 拷贝可变类型 浅拷贝: 只拷贝第一层数据,不关心里面的第 ...

  2. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  3. 彻底搞懂 JS 中 this 机制

    彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

  4. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  5. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

  6. js引用类型赋值,深拷贝与浅拷贝

    JS中引用类型使用等号“=” 赋值,相当于把原来对象的地址拷贝一份给新的对象,这样原来旧的对象与新的对象就指向同一个地址,改变其中一个对象就会影响另外那个对象,也就是所谓的浅拷贝.例如: var ar ...

  7. 在js中如何区分深拷贝与浅拷贝?

    一.自我理解 简单来讲就是:深拷贝层层拷贝,浅拷贝只拷贝第一层. 在深拷贝中,新对象中的更改不会影响原对象,而在浅拷贝中,新对象中的更改,原对象中也会跟着改. 在深拷贝中,原对象与新对象不共享相同的属 ...

  8. 浅谈js中的浅拷贝和深拷贝

    在js中如何把一个对象里的属性和方法复制给另一个对象呢? 下面举一个例子来说明: var person={name:'chen',age:18}; var son={sex:'男'}; functio ...

  9. 晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?

    晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...

随机推荐

  1. .Net反射-TypeDescriptor

    .Net中提供了两种方式访问类型的元数据:System.Reflection命名空间中提供的反射API和TypeDescriptor类.反射适用于所有类型的常规机制,它为类型返回的信息是不可扩展的,因 ...

  2. zzulioj - 2599: 对称的数字

    题目链接: http://acm.zzuli.edu.cn/problem.php?id=2599 题目描述 小D同学发现了一些数字与其反转数字相加求和得出新数字,新数字再不断重复这个过程,最终可能得 ...

  3. Linux磁盘管理——分区和文件系统

    1.分区类型 (1)主分区:最多只能有四个(主分区加扩展分区一共有四个). (2)扩展分区:最多有一个,是主分区中的其中一个.不能存储数据也不能格式化,必须再分成逻辑分区才能使用. (3)逻辑分区:是 ...

  4. piral 基于typescript 的微前端开发框架

    piral有一个微前端开发框架,功能强大,文档比较全,扩展能力也比较好 包含以下特性: 特性 高度模块化 多框架兼容 支持资源文件的拆分 全局状态管理 独立开发和部署 CLI工具 与同类框架的比较 参 ...

  5. Hadoop集群上搭建Ranger

    There are two types of people in the world. I hate both of them. Hadoop集群上搭建Ranger 在搭建Ranger工程之前,需要完 ...

  6. 分布式事务解决方案(一) 2阶段提交 & 3阶段提交 & TCC

    参考文档:http://blog.jobbole.com/95632/https://yq.aliyun.com/articles/582282?spm=a2c4e.11163080.searchbl ...

  7. c语言之函数指针应用

    c语言之函数指针应用 1.函数指针与指针函数 在开始运用函数指针前,我们需要将两个概念即:函数指针与指针函数搞清楚. 函数指针,指明这个一个函数,但返回值为指针类型,语法格式为: 类型名* 函数名A( ...

  8. 为什么需要动态SQL

    为什么需要动态SQL 在使用EF或者写SQL语句时,查询条件往往是这样一种非常常见的逻辑:如果客户填了查询信息,则查询该条件:如果客户没填,则返回所有数据. 我常常看到很多人解决这类问题时使用了错误的 ...

  9. c# winFrom Close报错 System.ObjectDisposedException:“无法访问已释放的对象。

    System.ObjectDisposedException:“无法访问已释放的对象. ObjectDisposed_ObjectName_Name” 查了一下发现是 InitializeCompon ...

  10. PyCharm+SVN配置使用教程

    一.说明 去年写“PyCharm+Miniconda3安装配置教程”的时候就想把配置SVN的内容加上,但刚开始使用不是很清楚操作就先算了,然后到后边知道怎么操作之后觉得比较简单不写也可以. 一是昨天使 ...