📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 浅拷贝
  • 深拷贝
在GitHub上编辑
  1. 前端技术
  2. 深入理解JavaScript系列

JavaScript浅拷贝和深拷贝

所谓的浅拷贝和深拷贝针对的是引用类型。

在JavaScript中,引用类型的值其实是存储在堆内存中,但是它会保存一个指向堆内存中真实数据的地址到栈内存中,也就是说引用类型的变量的值其实就是指向堆内存中真实数据的地址。而对于浅拷贝来说,引用类型只拷贝它的地址,新对象和旧对象指向的是同一个地址空间,而对于深拷贝来说引用类型拷贝的是它的真实数据,新对象和旧对象指向的是不同的地址空间,两对象相互独立。

浅拷贝: 只拷贝对象的引用,而不是对象本身,新对象和旧对象都指向同一地址空间。

深拷贝:将当前对象的所有属性和方法完整拷贝,新对象和旧对象指向不同地址空间。

浅拷贝

我们这里借助扩展运算符实现浅拷贝

let obj = {
	a: 1,
	cat: {
		name: 1,
		age: 2,
		tags: ["小叮当"],
	},
};
let copy = { ...obj };
copy.cat.name = 2;
console.log(copy.cat.name, obj.cat.name);
// 2 2

copy和obj都指向同一个对象,copy.cat和obj.cat指向的也都是同一个对象,改变copy.cat.name实际上就是在改变那个对象的值,从而使obj.cat.name的值也改变了。

let obj = {
	a: 1,
	cat: {
		name: 1,
		age: 2,
		tags: ["小叮当"],
	},
};
let copy = { ...obj };
copy.cat = { a: 1 };
console.log(copy.cat, obj.cat);
// { a: 1 } { name: 1, age: 2, tags: [ '小叮当' ] }

因为浅拷贝只拷贝对象的引用,因此copy.cat = { a: 1 };是改变了copy.cat的引用,而obj.cat的引用却没有改变,还是原来的那个对象,因此最后两者的值不同。

深拷贝

JSON.parse(JSON.stringify(obj));能够实现深拷贝

let obj = {
	a: 1,
	cat: {
		name: 1,
		age: 2,
		tags: ["小叮当"],
	},
};
let copy = JSON.parse(JSON.stringify(obj));
copy.cat.age = 10;
console.log(copy.cat.age, obj.cat.age);
// 10 2

但是它存在一些问题。

  • 会抛弃对象的constructor,所有对象的constructor都会变为Object

  • 无法实现对函数、RegExp等特殊对象的克隆

  • 循环引用会报错

循环引用报错

let obj = {
	a: 1,
	age: obj.a,
	cat: {
		name: 1,
		age: 2,
	},
};
let copy = JSON.parse(JSON.stringify(obj));
copy.cat.age = 10;
console.log(copy.cat.age, obj.cat.age);
// ReferenceError: Cannot access 'obj' before initialization

手动实现深克隆

let obj = {
	a: 1,
	b: /1/g,
	cat: {
		name: 1,
		age: 2,
		callMe: function () {
			console.log("me");
		},
	},
	set: new Set([1, 2, 3]),
	map: new Map([
		[1, 2],
		[3, 4],
	]),
};

// 判断类型
function getType(target) {
	return Object.prototype.toString.call(target).slice(8, -1);
}
// 递归处理
function deepCopy(target) {
	if (getType(target) === "Array") {
		let arr = [];
		for (let i in target) {
			arr.push(deepCopy(target[i]));
		}
		return arr;
	} else if (getType(target) === "Object") {
		let obj = {};
		for (let i of Object.keys(target)) {
			obj[i] = deepCopy(target[i]);
		}
		return obj;
	} else if (getType(target) === "Function") {
		const fn = target.toString();
		return new Function("return " + fn)();
	} else if (getType(target) === "RegExp" || getType(target) === "Date") {
		return new target.constructor(target);
	} else if (getType(target) === "Set") {
		const set = new Set();
		target.forEach((val) => {
			set.add(deepCopy(val));
		});
		return set;
	} else if (getType(target) === "Map") {
		const map = new Map();
		for (let item of target) {
			map.set(deepCopy(item[0]), deepCopy(item[1]));
		}
		return map;
	} else if (!(target instanceof Object)) {
		// 原始类型
		return target;
	} else {
		console.error("未拦截的类型 ", target);
	}
}
// 封装成一个处理函数
function handleDeepCopy(target) {
	if (getType(target) !== "Array" && getType(target) !== "Object") {
		throw new Error("必须传入一个对象或者数组");
	}

	let copy = Object.create(target.prototype || null);
	for (let i in target) {
		copy[i] = deepCopy(target[i]);
	}
	return copy;
}

// 验证是否拷贝成功
const copyObj = handleDeepCopy(obj);
console.log(copyObj);
/*
[Object: null prototype] {
  a: 1,
  b: /1/g,
  cat: { name: 1, age: 2, callMe: [Function (anonymous)] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
}
*/
// 验证深拷贝
copyObj.cat.name = "阿花";
console.log(copyObj, obj);
/*
{
  a: 1,
  b: /1/g,
  cat: { name: '阿花', age: 2, callMe: [Function (anonymous)] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
} 
{
  a: 1,
  b: /1/g,
  cat: { name: 1, age: 2, callMe: [Function: callMe] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
}
*/
// 验证函数拷贝是否成功
copyObj.cat.callMe();
// me

这样就手动实现了深拷贝,这种方式覆盖了所有常用类型,如果遇到没有覆盖的类型,再往deepCopy函数里加处理语句即可。

以上代码并非完美的,它仍然无法处理循环引用的问题。

上一页JavaScript原始类型和引用类型下一页JavaScript手写系列

最后更新于3年前