专栏首页前端词典看看你知道的“浅拷贝”是对的吗

看看你知道的“浅拷贝”是对的吗

关于本篇文章的起源是一位大佬在面试的时候,询问应聘者关于浅拷贝的知识后,在应聘者的回答中,笔者发现有好一部分人对浅拷贝都是错误的,故有了此篇内容。

1. 还原现场

大佬:“如何复制一个对象?”

她: “复制对象有深拷贝和浅拷贝...”

大佬:”说一下这两者之间的区别“

她: ”我给你写一段浅拷贝的代码“

var a = { x: 1 };
var b = a;

大佬:”回去等通知吧 ~.~“

2. 一探究竟

刚开始看到上面应聘者的例子的时候,其实我也认为应聘者写的是对的,因为在我的记忆里,对象的浅拷贝就是两个变量存储的值是相同的堆地址,而上面应聘者写的 a 和 b 符合这个条件,但是大佬提出异议后,便立刻去 google 了一把,发现 Javascript 的浅拷贝居然没有官方定义(有人找到的话麻烦评论区贴一个地址,非常感谢)。

于是我去MDN(https://developer.mozilla.org)上查了一下 shallow copy 的关键字,也没有关于 shallow copy 的准确定义,这也难怪部分人对于浅拷贝会有不同的认识。

第一种定义:一个新的对象直接拷贝已存在的对象的引用,即浅拷贝。

第二种定义:一个新的对象直接拷贝已存在的对象的对象属性的引用,即浅拷贝。

第一种和第二种的差异即是,对象本身引入与对象的对象属性的引入,因为我没有找到标准的关于浅拷贝的官方定义,所以对于这两种方式便开始思考想办法去验证。

在前面MDN中搜索 shallow copy 时,虽然没有找到它的定义,但是找了一个一些其他的内容。

Array.prototype.slice()属于浅拷贝,那我们来验证一下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和b并不是第一种定义所描述的,如果a和b是相同的引用对象,当b[0]改变时a[0]应当是跟着改变。

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

通过上面的代码既可以看出,浅拷贝的正确定义是第二种,只拷贝已存在对象的对象属性的引用,其余非对象属性是占用新的内存空间,并非与原对象共享。

3. 归纳总结

通过上面的内容,理清楚了浅拷贝的定义,而随之引出的”深拷贝“又是怎样的?和”浅拷贝“有什么关系?在下面总结一番。

浅拷贝:新的对象复制已有对象中非对象属性的值和对象属性的引用。

简单实现一个浅拷贝函数:

var a = [ 1, 3, 5, { x: 1 } ];
function copy(a){
  let b = Array.isArray(a) ? [] : {};
  for (let i in a) {
    b[i] = a[i];
  }
  return b;
}

像常用的数组方法slice和对象方法Object.assign都属于浅拷贝。

深拷贝:遍历一个对象中所有的属性的值及对象属性中的属性值,不论是嵌套了几层,要完成所有对象属性的递归后,赋值给一个新的对象。

var a = { x: 1, y: { x: 1 } };
function copy(data) {
  if (typeof data === 'number') {
    return data
  }
  for (var i in data) {
    var b = {};
    if (data.hasOwnProperty(i)) {
      b[i] = copy(data[i]);
    }
  }
  return b;
}

也可以使用快捷的深拷贝方式,完成对象复制,但是这种方式要求所要复制的对象的属性值非函数。

var b = JSON.parse(JSON.stringify(a));

和原数据是否指向同一对象

第一层数据为基本数据类型

原数据中包含子对象

赋值

改变会使原数据一同改变

改变会使原数据一同改变

浅拷贝

改变不会使原数据一同改变

改变会使原数据一同改变

深拷贝

改变不会使原数据一同改变

改变不会使原数据一同改变

本文分享自微信公众号 - 小生方勤(XSFQ_HSD)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端词典】几个有益的 CSS 小知识

    因为浏览器首先会找到所有 p 标签,然后再向上查找包含 class 为 div 的元素。这样一来如果 代码中有很多 p 标签,无疑是会做很多重复工作的。

    小生方勤
  • 10 种 JavaScript 最常见的错误

    查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 ...

    小生方勤
  • 【前端词典】关于 Babel 你必须知道的

    我第一次打开搜索引擎查询关于 Babel 的资料时,出现的竟然是关于 Babel 的传说。后来我花了小一天的时间去了解这个传说(来自《旧约圣经》)。

    小生方勤
  • 看看你知道的“浅拷贝”是对的吗

    关于本篇文章的起源是一位大佬在面试的时候,询问应聘者关于浅拷贝的知识后,在应聘者的回答中,笔者发现有好一部分人对浅拷贝都是错误的,故有了此篇内容。

    用户1462769
  • Javascript面向对象编程(三):非构造函数的继承

    这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。 今天是最后一个部分,介绍不使用构造函数实现"继承"。 一、什么是"非构造函数"的继承...

    ruanyf
  • Kotlin实现图片上传保存查看

    SpringBoot默认的访问目录默认是resource下,我们要想访问服务包之外的文件需要自定义,下面我们以文件上传访问作为载体……

    大话swift
  • [前端][CSS]用ps的方式理解层叠上下文

    之前看了大佬的对层叠上下文的解释 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-st...

    Tuzei
  • IE6已逝,遗忘在角落的选择器,赶快用起来

    那些被遗忘的选择器 在IE6~8“统治”网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍...

    HTML5学堂
  • Shell的字符串处理

    在Shell编程快速入门指南一文中已经简单介绍了字符串的变量命名、截取、获取长度等操作,但通常我们对字符串的操作的需求远远不止这些,Shell本身一起已经内置了...

    用户1515472
  • Qt技巧-快速求最值

    Qt君

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动