深拷贝和浅拷贝
基本类型数据保存在在栈内存中
引用类型数据对象保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。
浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象；
1.浅拷贝
- 什么是浅拷贝？
把数组/对象 第一层的值，复制到新的数组/对象中。
这个数据有着原始数据属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址
在JavaScript中，存在浅拷贝的现象有： 1 利用for in进行复制 2 Object.assign Array.prototype.slice(), Array.prototype.concat() 使用拓展运算符实现的复制
let o2 = {}
for (let key in o1) {
// /**
// * 遍历 o1 对象所有的 key, 然后赋值给 对象 o2
// */
console.log(key, o1[key])
o2[key] = o1[key]
}
console.log(o1) // {a: 1, b: 2, c: 3}
console.log(o2) // {a: 1, b: 2, c: 3}
console.log(o1 === o2) // false
o2.b = 999
console.log(o1) // {a: 1, b: 2, c: 3}
console.log(o2) // {a: 1, b: 999, c: 3}
console.log(o1)
console.log(o2)
o2.d.d1 = 'QF666'
console.log(o1)
console.log(o2)
通过 JS 提供的方法 完成浅拷贝
console.log(o1)
console.log(o2)
/**
* Object.assign(新对象, 原始对象)
* 将 原始对象 中所有的 key 全部浅拷贝到 新对象中, 然后返回一个 对象
*/
// let o3 = Object.assign(o2, o1)
let o2 = Object.assign({}, o1)
console.log(o1)
console.log(o2)
2.深拷贝
深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
常见的深拷贝方式有：
- _.cloneDeep()
- jQuery.extend()
- JSON.stringify()
- 手写循环递归
_.cloneDeep()：
const _ = require('lodash');
const obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
const obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);// false
jQuery.extend()
const $ = require('jquery');
const obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
const obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f); // false
JSON.stringify()
var obj={
name:'qqf123',
age:21
};
var obj1=JSON.parse(JSON.stringify(obj));
但是这种方式存在弊端，会忽略undefined、symbol和函数
const obj = {
name: 'A',
name1: undefined,
name3: function() {},
name4: Symbol('A')
}
const obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2); // {name: "A"}
循环递归
<script>
/**
* 深拷贝
* 不管数据有多少层数据结构, 百分百复制出来一份 一摸一样但是毫不相关的数据
*/
let o1 = {
a: 1,
b: 2,
c: 3,
d: {
d1: '001',
d2: '002',
d3: '003'
}
}
// let o2 = {}
// function deepClone(target, origin) {
// // 将 origin 完全百分百的复制出来一份, 到 target 中
// for (let k in origin) {
// // console.log(k, origin[k])
// if (origin[k].constructor === Object) {
// target[k] = {}
// deepClone(target[k], origin[k])
// } else if (origin[k].constructor === Array) {
// target[k] = []
// deepClone(target[k], origin[k])
// } else {
// target[k] = origin[k]
// }
// }
// }
// deepClone(o2, o1)
// // console.log(o1)
// // console.log(o2)
// o2.d.d2 = 'QF666'
// console.log(o2)
// console.log(o1)
function deepClone(obj, hash = new WeakMap()) {
if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
// 可能是对象或者普通的值 如果是函数的话是不需要深拷贝
if (typeof obj !== "object") return obj;
// 是对象的话就要进行深拷贝
if (hash.get(obj)) return hash.get(obj);
let cloneObj = new obj.constructor();
// 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
hash.set(obj, cloneObj);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 实现一个递归拷贝
cloneObj[key] = deepClone(obj[key], hash);
}
}
return cloneObj;
}
总结：
浅拷贝和深拷贝都创建出一个新的对象，但在复制对象属性的时候，行为就不一样
浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象
前提为拷贝类型为引用类型的情况下：
浅拷贝是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一个地址 深拷贝是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址
相关问题
问题1：var a = xxx, a内存中到底保存的是什么?
<!--
问题: var a = xxx, a内存中到底保存的是什么?
- xxx是基本数据类型，保存的就是这个数据
- xxx是对象，保存的是对象的地址值
- xxx是一个变量，保存的xxx的内存内容（可能是基本数据，也可能是地址值）
-->
<script type="text/javascript">
var a = 3 //a保存的是3
a = function () {
//a保存的是对象的地址值 函数是一个对象
}
var b = 'abc'//b保存的是
a = b //a保存的是b的值
b = {}
a = b //a保存的是b的地址
</script>
问题2：关于引用变量赋值问题
<!--
关于引用变量赋值问题
- 1： n个引用变量指向同一个对象,通过一个变量修改对象内部数据，其他所有变量看到的是修改之后的数据
- 2： 2个引用变量指向同一个对象，其中一个引用变量指向另一个对象，另一个引用变量依然指向前一个对象
-->
<script type="text/javascript">
// 1：
// var obj1 = { name: 'Tom' }
// var obj2 = obj1 //将obj1的内容保存给obj2，内容是obj1的地址值
// obj1.name = 'jack'
// console.log(obj2.name);//打印jack
// var obj3 = obj2
// obj1.name = 'abc'
// console.log(obj3.name);//abc
var obj1 = { name: 'Tom' }
var obj2 = obj1
obj2.age = 12
console.log(obj1.age);//12
function fn(obj) {
obj.name = 'A'
}
fn(obj1)
console.log(obj2.name);//A
// 2：
var a = { age: 12 }
var b = a
a = { name: 'BOB', age: 13 }//此时a的地址指向改变（开辟了新的空间），b的没有改变
console.log(b, a);//{age: 12} {name: 'BOB', age: 13}
function fn2(obj) {//a作为形参传入 此时a，obj指向同一个地址
obj = { age: 15 }//obj改变地址指向，a没改变，此时a和obj没有关系
}
console.log(a);//{name: 'BOB', age: 13}
</script>
问题3：在js调用函数时传递变量参数时，是值传递还是引用传递
<!--
问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
- 理解1：都是值（基本值/地址值）传递，值可能是基本值或地址值
- 理解2：可能是值传递，也可能是引用传递（）
-->
<script type="text/javascript">
// 1.
var a = 3
function fn(a) {
a = a + 1//操作的是局部变量a
return a
}
fn(a)//这里传的是值：3
console.log(fn(a));//4
console.log(a);//3
// 2.
function fn2(obj){//
console.log(obj.name);
obj.name='A'
}
var obj = {name:'Tom'}
fn2(obj)//将obj的内容（地址值）传给形参
console.log(obj);//A
</script>
问题4：JS引擎如何管理内存?
<!--
问题: JS引擎如何管理内存?
1. 内存生命周期
- 分配小空间，得到他的使用权
- 存储数据，可以反复进行操作
- 释放小空间，
2. 释放内存
- 局部变量：函数执行完之后释放
- 对象：成为垃圾对象==>垃圾回收器回收
-->
<script type="text/javascript">
var a = 3
var obj = {}//此时存放三个内存空间
obj = null//对象被回收，全局变量obj的内存没有被释放
//-------------
function fn() {
var b = 4//局部变量b在函数被调用时创建，在函数执行完毕之后被释放(注意：释放不等于回收)
}
fn();//b自动释放，b指向的对象在某一时刻被垃圾回收器回收
</script>
