javascript 关于赋值、浅拷贝、深拷贝的个人理解

 更新时间:2019年11月01日 23:40:09   作者:烈雾风雨城  
关于赋值、浅拷贝、深拷贝,以前也思考良久,很多时候都以为记住了,但是,我太难了。今天我特地写下笔记,希望可以完全掌握这个东西,也希望可以帮助到任何想对学习这个东西的同学

一、栈、堆、指针地址

  栈内存:个人理解是,基本数据类型和引用数据类型都会用到的一个空间,这个空间以key-value形式存在,value本身不可修改,只能赋值替换;

  堆内存:堆,就是堆积,每一个被开辟的空间可以想象成一个空纸盒子,纸盒子所在的纸盒子堆就是 “堆” 。基本数据类型没有堆的概念。堆,只针对引用数据类型。存储方式应该是以对象(object)形式保存,对象内容包含key-value形式数据,value本身同样不可修改,只能赋值替换;

  指针地址:针对引用数据类型在栈保存的值就是指针地址,地址指向保存在堆里面的对象。

二、赋值

  赋值分两个,一个是基本数据类型的赋值,一个是引用数据类型的赋值,基本数据类型赋的是 “值”,引用数据类型赋的是 “指针地址”。

1.基本数据类型赋值

//在栈内开辟一个空间,空间名称叫a,存放值1;
var a = 1;

//在栈内开辟一个空间,空间名字叫b。接着先把a的值1复制一份,然后存放进b
var b = a;

如下图:

2.引用数据类型赋值

//首先在栈开辟一个空间a存放指针地址,设指针地址为address1;同时会在堆里面开辟一个空间放置对象数据 2 var a = {
 no: 1,
 per: {
  name: "jack"
 },
 per2: {
  name: "rose"
 }
}

//a赋值给b,此时b会在栈开辟一个空间b,用来放置address1,这个指针指向a所在堆的对象数据
var b = a;

//修改赋值后的值b,其实就是修改b的指针address1所指向的对象数据
b.no = 1314;

//修改b会影响原数据(所有层次的数据都会影响)
//这个原数据其实不是原数据,因为a和b其实都是同一个数据
//就像从中国去美国,可以从a地点(比如北京)或者b地点(比如上海)坐飞机去,但是到达的都是同一个地方(也就是对象数据)
b.per.name = "王五";

console.log(a, b)

上面代码打印如图:

 

对b的修改会影响a原本的值。对a的修改同样会同步b的值,对a的修改本人没有写出,你们可以自己试试,结果是一样的。

  针对上面的代码,引用数据类型赋值,如下图所示:

无论修改a对象还是b对象,都是在修改 “obj” 这个对象

三、浅拷贝

   引用数据类型的浅拷贝,代码如下:

//在栈开辟一个空间a,存放a的指针地址,设指针地址为address2a,同时在堆开辟一个空间,设这空间为A,存放a对象数据
var a = {
 no: 1,
 per: {
  name: "jack",
 },
 per2: {
  name: "rose"
 }
}

//在栈开辟一个空间b,存放b的指针地址,设指针地址为address2b,同时在堆开辟一个空间,设这空间为B,存放b对象数据
var b = {};

//对a的数据进行循环,判断如果有key,就把值赋到B对应的key位置
//这个循环,遇到数据类型为基本数据类型,赋的是值;遇到引用数据类型,赋的是指针地址
for(var p in a) {
 if(a.hasOwnProperty(p)) {
  b[p] = a[p]
 }
}

//对b的第一层修改
b.no = 1314;
b.per2 = [];

//对b的第二层修改
b.per.name = "王五";

//浅拷贝,修改b后,第一层修改都不影响原数据,第二层以及以上层次的修改都影响原数据
//当前没有写第三层及以上层次,可自行测试。
console.log(a, b)

运行结果如图:

可以理解为,a原本的东西被完全复制了一份,放到了b里面,然会对b的操作,就只关b的事情了。a原本是什么值,现在依然是什么值,b的修改对a完全没有影响。

  最后,可用下图表示深拷贝:

四、深拷贝

  深拷贝,说白了,就是对浅拷贝的递归,也就是浅拷贝章节所述的,浅拷贝第一层已经被完全拷贝到新的地方,然后第二层以及以上层次,它们的属性值又将都会被拷贝到新的地方,最后就井水不犯河水了。

  代码如下:

//在栈开辟一个空间a,存放a的指针地址,设指针地址为address3a,同时在堆开辟一个空间,设这空间为space1a,存放a对象数据
var a = {
 no: 2,
 per: {
  name: "jack"
 },
 per2: {
  name: "rose"
 }
}

//用递归的方式对a进行拷贝属性和值,然后赋值给temp,然后return出去。此时不拷贝指针地址。
function getDeep(obj) {
 var temp = Array.isArray(obj) ? [] : {};
 for(var p in obj) {
  if(typeof obj[p] == "object") {
   temp[p] = getDeep(obj[p])
  } else {
   temp[p] = obj[p]
  }
 }
 return temp;
}

//在栈开辟一个空间b,存放b的指针地址,设指针地址为address3b。同时b在堆开辟一个空间,设这空间为D,存放temp的对象数据
var b = getDeep(a);

//深拷贝后,修改b的值,不论修改属性值,还是整个值替换都不影响原数据a
b.no = 1314;
b.per = []
b.per2 = {
 name:"王五"
}

console.log(a, b)

浅拷贝只拷贝了第一层,深拷贝是拷贝到最后一层。代码运行结果如图:

可以理解为,a原本的东西被完全复制了一份,放到了b里面,然会对b的操作,就只关b的事情了。a原本是什么值,现在依然是什么值,b的修改对a完全没有影响。

  最后,可用下图表示深拷贝:

五、总结

  1.赋值:

    基本数据类型就是类似a同学有一台电脑,b同学也想要,就也给b同学买了一台一模一样的电脑b,电脑a和电脑b各自怎么被操作都是a同学和b同学各自的事,电脑显示互不影响(数据结果);

    引用数据类型就是只有一台电脑,放在了电脑室,a同学和b同学各自从宿舍到电脑室操作电脑,都能影响电脑显示;在a同学和b同学的眼里,最后结果这台电脑显示什么,取决于最后一个操作电脑的同学(数据结果);

  2.浅拷贝:

    a同学有一台笔记本电脑并且配置了全套装备,触感舒爽的鼠标、按键响亮的机械键盘等。b同学没钱买电脑,但是又很想体验,所以先买了和a同学一样的鼠标键盘自个先看着爽。然后向a同学借电脑过来玩。a同学和b同学各自的鼠标键盘出了啥问题,两个人之间互不影响对方的使用。而对电脑的操作就是谁最后操作了电脑,电脑就是显示最后那个人的操作界面(数据修改)。

  3.深拷贝:

    a同学有笔记本+全套装备,b同学羡慕不已,自己让a同学照着买了一整套一模一样的给自己,但是他们各自的使用电脑情况,取决于他们各自的操作,电脑之间互不影响(数据结果)。

  以上纯属个人理解,有误勿喷请指出,谢谢!

相关文章

  • 原生JavaScript实现remove()和recover()功能示例

    原生JavaScript实现remove()和recover()功能示例

    这篇文章主要介绍了原生JavaScript实现remove()和recover()功能,结合实例形式分析了javascript实现类似jQueryremove()和recover()功能的自定义函数,需要的朋友可以参考下
    2018-07-07
  • js实时获取系统当前时间实例代码

    js实时获取系统当前时间实例代码

    在网页中实时的显示时间,不但可以给网页添色,还可以方便浏览者掌握当前时间,为了提高网站的开发速度,可以把主代码封装在一个单独的函数里面,在需要的时候直接调用 而我为了演示,直接写在了主页面,方便大家观看
    2013-06-06
  • 微信小程序实现全局搜索代码高亮的示例

    微信小程序实现全局搜索代码高亮的示例

    本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Javascript中parseInt的正确使用方式

    Javascript中parseInt的正确使用方式

    今天小编就为大家分享一篇关于Javascript中parseInt的正确使用方式,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • JavaScript面向对象程序设计教程

    JavaScript面向对象程序设计教程

    这篇文章主要介绍了JavaScript面向对象程序设计教程的相关资料,需要的朋友可以参考下
    2016-03-03
  • 基于代数方程库Algebra.js解二元一次方程功能示例

    基于代数方程库Algebra.js解二元一次方程功能示例

    这篇文章主要介绍了基于代数方程库Algebra.js解二元一次方程功能,结合具体实例形式分析了方程库Algebra.js计算方程的具体使用技巧,需要的朋友可以参考下
    2017-06-06
  • JavaScript中匿名函数用法实例

    JavaScript中匿名函数用法实例

    这篇文章主要介绍了JavaScript中匿名函数用法,实例分析了javascript中匿名函数的功能、定义及具体用法,需要的朋友可以参考下
    2015-03-03
  • JSON.stringify转换JSON时日期时间不准确的解决方法

    JSON.stringify转换JSON时日期时间不准确的解决方法

    这篇文章主要介绍了JSON.stringify转换JSON时日期时间不准确的解决方法,即JSON数据中包含日期对象时,在转换时会转换成国际时间,而不是中国的时区,需要的朋友可以参考下
    2014-08-08
  • 5个最佳的Javascript日期处理类库分享

    5个最佳的Javascript日期处理类库分享

    在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法
    2012-04-04
  • js与C#进行时间戳转换

    js与C#进行时间戳转换

    最近在做一个项目,需要JS时间戳转成C#里的时间,再把C#里的时间戳转成JS的时间,就仔细研究了下js与C#进行转换的注意要点,这里记录下来,有需要的小伙伴自己拿走。
    2014-11-11

最新评论