看看你知道的“浅拷贝”是对的吗
关于本篇文章的起源是一位大佬在面试的时候,询问应聘者关于浅拷贝的知识后,在应聘者的回答中,笔者发现有好一部分人对浅拷贝都是错误的,故有了此篇内容。
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));
和原数据是否指向同一对象 |
第一层数据为基本数据类型 |
原数据中包含子对象 |
|
---|---|---|---|
赋值 |
是 |
改变会使原数据一同改变 |
改变会使原数据一同改变 |
浅拷贝 |
否 |
改变不会使原数据一同改变 |
改变会使原数据一同改变 |
深拷贝 |
否 |
改变不会使原数据一同改变 |
改变不会使原数据一同改变 |
- 一口价!3杂7bc.com16万易主
- Silverlight初级教程-动画
- WCF技术剖析之十:调用WCF服务的客户端应该如何进行异常处理
- [原创-总结]WCF技术剖析系列总结篇
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(63)-WebApi与Unity注入
- 分布式高并发下mysql数据库读写分离
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(64)-补充WebApi与Unity注入-配置文件
- 身临其境的建筑体验:3D打印和人工智能相结合的“星形胶质细胞”
- C语言真的太强大了,C几乎无处不在!
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1)
- 具有依赖关系的并行操作执行
- Silverlight初级教程-绘图布局
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(66)-MVC WebApi 用户验证 (2)
- 微信产品经理的妥协还是用户的需求?
- 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 数组属性和方法
- 【Vulnhub】Play XML Entities
- 一切皆是映射:詳解 Kotlin Map 集合類
- 10大高性能开发宝石,我要消灭一半程序员!
- 面试官:你说你会RabbitMQ,那聊聊它的交换机(Exchange)吧
- Kubeadm 1.9 HA 高可用集群本地离线镜像部署【已验证】
- kubernetes(k8s)集群安装calico
- kubernetes(k8s) Prometheus+grafana监控告警安装部署
- 基于OpencvCV的情绪检测
- 设计模式 之 抽象工厂模式
- Angular应用里HTTP请求的错误处理
- 使用npm安装TypeScript
- TypeScript的interface关键字
- TypeScript的class关键字
- TypeScript里一些特殊的类型
- TypeScript的类型断言,有点像ABAP的强制类型转换