专栏首页全栈者看看你知道的“浅拷贝”是对的吗

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

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

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) {var b={};
  if (typeof data === 'number') {
    return data
  }
  for (var i in data) {
    
    if (data.hasOwnProperty(i)) {
      b[i] = copy(data[i]);
    }
  }
  return b;
}

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

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

如上内容均为自己总结,难免会有错误或者认识偏差,如有问题,希望大家留言指正,以免误人。有什么问题请留言,会尽力回答之。

本文分享自微信公众号 - 全栈者(fullStackEngineer)

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java8新特性:默认方法详解

    Java8 中的默认方法是针对接口添加的新特性,它是指接口可以直接对方法进行实现,实现方式很简单,直接在方法定义处添加 default 关键字即可,如下所示。

    南风
  • Vue博客实战---前后端环境搭建

    最近心血来潮在开发个人博客网站,刚好可以趁这个机会出一个系列文章讲讲前端界面的设计,后端业务逻辑的实现以及前后端的交互。具体的架构我是采用Vu...

    逆月翎
  • 你必须收藏的 GitHub 技巧

    来 源:cnblogs.com/iamzhanglei/p/6177961.html

    好好学java
  • 深入理解class的继承,助你成为优秀的前端

    Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

    前端老鸟
  • JavaScript入门篇

    快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScri...

    达达前端
  • GraphQL快速入门教程

    传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。graphQL提供一种全新数据查询...

    Fundebug
  • Java描述设计模式(05):原型模式

    知了一笑
  • LeetCode 138:复制带随机指针的链表 Copy List with Random Pointer

    给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点。

    爱写bug
  • ​promise源码详解,助力你轻松掌握promise

    在没有出来promise之前,为了拿到函数的回调结果,我们不得不使用callback function,这种代码的维护和理解是相当恶心了!

    前端老鸟
  • 轻松getHadoop大数据开发技术,这一篇文章够了

    Hadoop是一个开源框架,可编写和运行分布式应用处理大规模数据。分布式计算是一个宽泛并且不断变化的领域。

    牛油果

扫码关注云+社区

领取腾讯云代金券