搞不懂JS中赋值·浅拷贝·深拷贝的请看这里
时间:2022-07-24
本文章向大家介绍搞不懂JS中赋值·浅拷贝·深拷贝的请看这里,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
百科定义:拷贝就是拷贝指向对象的指针,意思就是说:拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间,浅拷贝只是一种简单的拷贝,让几个对象公用一个内存,然而当内存销毁的时候,指向这个内存空间的所有指针需要重新定义,不然会造成野指针错误。
拷贝内容总结
数据类型与堆栈的关系
基本类型与引用类型
- 基本类型:undefined,null,Boolean,String,Number,Symbol
- 引用类型:Object,Array,Date,Function,RegExp等
存储方式
- 基本类型:基本类型值在内存中占据固定大小,保存在
栈内存
中(不包含闭包
中的变量)
- 引用类型:引用类型的值是对象,保存在
堆内存
中。而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址(引用),引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。
注意:
-
闭包
中的变量并不保存在栈内存中,而是保存在堆内存中。这一点比较好想,如果闭包
中的变量保存在了栈内存
中,随着外层中的函数从调用栈中销毁,变量肯定也会被销毁,但是如果保存在了堆内存中,内存函数仍能访问外层已销毁函数中的变量。看一段对应代码理解下:
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
浅拷贝函数分析浅拷贝定义
:
新的对象复制已有对象中非对象属性的值和对象属性的引用。如果这种说法不理解换一种一个新的对象直接拷贝已存在的对象的对象属性的引用,即浅拷贝。
深拷贝操作
说了赋值操作和浅拷贝操作,大家是不是已经能想到什么是深拷贝了,下面直接说深拷贝的定义。
深拷贝定义
深拷贝会另外拷贝一份一个一模一样的对象,从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
- javascript:查找“跳号”号码
- 谁能拯救我糟心的出行?
- Python常见数据结构整理 Python常见数据结构整理
- “共享洗车机”落户咸阳,你怎么看?
- 蒋涛——软件是一个非常特殊的产业,一旦进入就再难挣脱
- Pechkin:html -> pdf 利器
- C#执行XSL转换
- javascript:算法笔记
- spring boot 登录注册 demo (一)
- linux学习:CentOS、Mac上SSH的设置以及SceureCRT中的文件上传下载
- 中关村成为北京“高精尖”产业发展主阵地
- jquery-barcode:js实现的条码打印
- 页面json 格式化+颜色高亮
- Python 里 and、or 的计算规则
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实现限制域名访问的实现代码(本地验证)
- 吸引发烧友的视听Linux发行版
- Linux下完全删除用户的两种方法
- flutter实现轮播图效果
- Ubuntu 16.04设置PostgreSQL开机启动的方法
- 使用userdel命令删除Linux用户的教程详解
- Linux系统交换空间介绍
- 小内存服务器上宝塔默认安装的MySQL如何优化配置
- (译)SDL编程入门(15)旋转和翻转
- linux解决ping通但端口不通的问题
- (译)SDL编程入门(13)透明度混合
- 基于centos宝塔面版的安装Discuz! Q方法
- 如何在Linux中的特定时间运行命令
- composer 安装过程中,提示404错误
- Linux初始化系统盘后重新挂载数据盘方法