JavaScript学习之路： 艰难且绵长, 摸爬滚打这些年，还剩头上三根毛，这是我学习的见证呀

开端我的学习之路~~‍♀️

想要完全了解深仿制与浅仿制，首要咱们要先了解数据类型；
详情点击：根底数据类型简介

深仿制与浅仿制

想必你也有以下疑问：

什么是仿制（copy） ❓
那深仿制与浅仿制什么 ❓
怎么完成深仿制与浅仿制呢 ❓
…… ❓

接下来，就让咱们一同去探究！
深仿制和浅仿制是只针对Object和Array这样的引证数据类型的。

深仿制

深仿制: 深仿制是将一个目标从内存中完整的仿制一份出来,从堆内存中开辟一个新的区域存放新目标（新旧目标不同享同一块内存）,且修正新目标不会影响原目标（深仿制采用了在堆内存中请求新的空间来存储数据，这样每个能够避免指针悬挂）

浅仿制

浅仿制: 假如特点是根本类型，仿制的便是根本类型的值，假如特点是引证类型，仿制的便是内存地址（新旧目标同享同一块内存），所以假如其间一个目标改动了这个地址，就会影响到另一个目标（仅仅仿制了指针，使得两个指针指向同一个地址，这样在目标块结束，调用函数析构的时，会形成同一份资源析构2次，即delete同一块内存2次，形成程序溃散）；

那么此刻咱们会想到：浅仿制和直接赋值难道不是一样的嘛❓有什么区别❓

赋值和浅仿制的区别

当咱们把一个目标赋值给一个新的变量时，赋的其实是该目标的在栈中的地址，而不是堆中的数据。也便是两个目标指向的是同一个存储空间，不管哪个目标发生改动，其实都是改动的存储空间的内容，因而，两个目标是联动的
浅仿制是按位仿制目标，它会创立一个新目标，这个目标有着原始目标特点值的一份准确仿制。假如特点是根本类型，仿制的便是根本类型的值；假如特点是内存地址（引证类型），仿制的便是内存地址，因而假如其间一个目标改动了这个地址，就会影响到另一个目标。即默认仿制构造函数仅仅对目标进行浅仿制仿制(逐个成员顺次仿制)，即只仿制目标空间而不仿制资源

堆内存与栈内存的概念理解：

赋值和浅仿制举例：

对比直接赋值和浅仿制目标带来的改动有哪些❓

// 目标赋值
let obj1 = {
    name: 'Chen',
    age: 18,
    hobby: ['see a film', 'write the code', 'play basketball', 'tourism']
}
let obj2 = obj1;
obj2.name = 'Forever';
obj2.hobby[1] = 'swim';
obj2.hobby[2] = 'alpinism';
console.log('obj1===>', obj1);
console.log('obj2===>', obj2);

// 浅仿制
let obj1 = {
    name: 'Chen',
    age: 18,
    hobby: ['see a film', 'write the code', 'play basketball', 'tourism']
}
let obj3 = {...obj1};
obj3.name = 'Forever';
obj3.hobby[1] = 'swim';
obj3.hobby[2] = 'alpinism';
console.log('obj1===>', obj1);
console.log('obj3===>', obj3);

上述例子，obj1是原数据，obj2是直接赋值得到的数据，obj3是经过浅仿制得到的；可明晰对比其对原数据的影响

对原始数据的影响
—	和原数据是否指向同一目标	第一层数据未根本数据类型	原数据包含子目标（引证数据类型）
赋值	是	赋值后的数据改动，会使原数据一同改动	赋值后的数据改动，会使原数据一同改动
浅仿制	否	浅仿制后的数据改动，不会使原数据一同改动	赋值后的数据改动，会使原数据一同改动

浅仿制的完成注意：当仿制目标只要一层的时分，是深仿制

打开运算符…

// 打开运算符... 完成浅仿制
let obj1 = {
    name: 'Chen',
    hobby: ['see a film', 'write the code', 'play basketball', 'tourism']
}
let obj2 = {...obj1};
obj2.hobby[1] = 'swim';
obj2.hobby[2] = 'alpinism';
obj2.name = 'Forever';
console.log('obj1===>', obj1); // obj1===> { name: 'Chen',hobby: [ 'see a film', 'swim','alpinism', 'tourism']}
console.log('obj2===>', obj2); // obj2===> { name: 'Forever',hobby: [ 'see a film', 'swim','alpinism', 'tourism']}

Object.assign()

// Object.assign() 完成浅仿制
let obj1 = {
    name: 'Chen',
    hobby: ['see a film', 'write the code', 'play basketball', 'tourism']
}
let obj2 = Object.assign({}, obj1);
obj2.hobby[1] = 'swim';
obj2.hobby[2] = 'alpinism';
obj2.name = 'Forever';
console.log('obj1===>', obj1); // obj1===>{ name: 'Chen',hobby: [ 'see a film', 'swim','alpinism', 'tourism', name: 'Forever' ]}
console.log('obj2===>', obj2); // obj2===> {name: 'Chen', hobby: [ 'see a film', 'swim','alpinism', 'tourism', name: 'Forever' ]}

当object只要一层的时分，是深仿制；所以当原数据进行浅仿制，改动obj2的name 原数据obj1中的name不会改动；

Array.prototype.concat()

// Array.prototype.concat() 完成浅仿制
let arr1 =  [
    {
        name: 'Chen'
    },
    'see a film', 
    'write the code', 
    'play basketball', 
    'tourism'
];
let arr2 = arr1.concat([]);
arr2[0].name = 'Forever';
arr2[1] = 'play games';
console.log('arr1===>', arr1); // arr1===> [{ name: 'Forever' },'see a film','write the code','play basketball', 'tourism']
console.log('arr2===>', arr2); // arr2===> [{ name: 'Forever' },'play games','write the code', 'play basketball', 'tourism']

Array.prototype.slice()

// Array.prototype.concat() 完成浅仿制
let arr1 =  [
    {
        name: 'Chen'
    },
    'see a film', 
    'write the code', 
    'play basketball', 
    'tourism'
];
let arr2 = arr1.slice();
arr2[0].name = 'Forever';
arr2[1] = 'play games';
console.log('arr1===>', arr1); // arr1===> [{ name: 'Forever' },'see a film','write the code','play basketball', 'tourism']
console.log('arr2===>', arr2); // arr2===> [{ name: 'Forever' },'play games','write the code', 'play basketball', 'tourism']

当Array只要一层的时分，是深仿制；所以当原数据进行浅仿制，改动arr2的arr[1]，而原数据arr1中的arr1[1]没有改动；

深仿制的完成

JSON.parse(JSON.stringify())

//  JSON.parse(JSON.stringify())完成深仿制Object
let obj1 = {
    name: 'Chen',
    hobby: ['see a film', 'write the code', 'play basketball', 'tourism']
}
let obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj1 === obj2); // false
obj2.name = 'Forever';
obj2.hobby[1] = 'swim';
obj2.hobby[2] = 'alpinism';
console.log('obj1===>', obj1); // obj1===> { name: 'Chen',hobby: ['see a film', 'write the code', 'play basketball', 'tourism']}
console.log('obj2===>', obj2); // obj2===> { name: 'Forever',hobby: ['see a film', 'swim', 'alpinism', 'tourism']}

//  JSON.parse(JSON.stringify())完成深仿制Array
let arr1 =  [
    {
        name: 'Chen'
    },
    'see a film', 
    'write the code', 
    'play basketball', 
    'tourism'
];
let arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr1 === arr2); // false
arr2[0].name = 'Forever';
arr2[1] = 'play games';
console.log('arr1===>', arr1); // arr1===> [{ name: 'Chen' },'see a film','write the code','play basketball', 'tourism']
console.log('arr2===>', arr2); // arr2===> [{ name: 'Forever' },'play games','write the code', 'play basketball', 'tourism']

已然Object和Array能够经过JSON.parse(JSON.stringify())完成深仿制，那么Date与Function能够完成嘛？咱们一同尝试以下，看看会有什么状况出现：

let fun1 = function() {
    console.log('run~');
}
let fun2 = JSON.parse(JSON.stringify(fun1)) // undefined
JSON.parse(fun2) //Error: "undefined" is not valid JSON

let date1 = new Date();
let date2 = JSON.stringify(date1) // undefined
JSON.parse(date2) // Error: "undefined" is not valid JSON

JSON.parse() 办法用来解析 JSON 字符串，构造由字符串描绘的 JavaScript 值或目标因而undefined不能被转化并抛出反常：”undefined”不是有用的 JSON;

**为什么function类型与Date类型转化成JSON后会是undefined，请参考链接：MDN(感兴趣的能够依据JSON序列化原理，手动完成一下JSON.stringify())

咱们平常开发中将JSON.stringify使用最多的可能便是浅层的目标进行深仿制，也便是进行序列化处理。可是当咱们进行手撕代码的时分，需求考虑各种鸿沟状况，这对于咱们来说就比较费事，作为面试也是对数据类型的全面考察

jQuery.extend()办法

//  需求引入jQuery库哦~
let obj = {
    name: 'Chen',
    hobby: [ 
        'see a film', 
        'write the code', 
        'play basketball', 
        'tourism'
    ]
}
let obj1 = jQuery.extend(true, {}, obj);
console.log(obj === obj1); // false
obj2.name = 'Forever';
obj2.hobby[1] = 'swim';
obj2.hobby[2] = 'alpinism';
console.log('obj1===>', obj1); // obj1===> { name: 'Chen',hobby: ['see a film', 'write the code', 'play basketball', 'tourism']}
console.log('obj2===>', obj2); // obj1===> { name: 'Chen',hobby: ['see a film', 'swim', 'alpinism', 'tourism']}

手写递归办法：(递归办法完成深度克隆原理：遍历目标、数组直到里面都是根本数据类型，然后再去仿制，便是深度仿制)

// 检测数据类型的功用函数
const checkedType = (target) => Object.prototype.toString.call(target).replace(/[object (w+)]/, "$1").toLowerCase();
// 完成深仿制（Object/Array）
const clone = (target) => {
    let result;
    let type = checkedType(target);
    if(type === 'object') result = {};
    else if(type === 'array') result = [];
    else  return target;
    for (let key in target) {
        if(checkedType(target[key]) === 'object' || checkedType(target[key]) === 'array') {
            result[key] = clone(target[key]);
        } else {
            result[key] = target[key]; 
        }
    }
    return result;
}

调用一下手写递归完成深仿制办法：

const obj = {
    name: 'Chen',
    detail: {
        age: '18',
        height: '180',
        bodyWeight: '68'
    },
    hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
const obj1 = clone(obj);
console.log(obj1); // { name: 'Chen',detail: { age: '18', height: '180', bodyWeight: '68' },  hobby: [ 'see a film', 'write the code', 'play basketball', 'tourism' ]}
console.log(obj1 === obj); // false

循环引证

什么是循环引证： 一般指目标直接或间接地引证了本身;

循环引证一般分为下列几种状况：

父级引证：本身（obj）中的特点对应的值指向自己（obj）;
同级引证：本身（obj）中某一特点对应的值指向（引证）本身（obj）;
彼此引证：两个目标中的特点彼此引证；

递归函数，看似已经解决了咱们日常深仿制的需求，可是没有考虑到目标’循环引证’问题；

const obj = {
    name: 'Chen',
    detail: {
        age: '18',
        height: '180',
        bodyWeight: '68'
    },
    hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
obj.temp = obj; // obj中的特点temp的值指向了obj
const obj1 = clone(obj); // 报错：栈内存溢出

以上咱们能够看出： obj中新增特点temp特点引证obj, obj中的temp中的temp特点引证了obj, 这就构成了循环引证；clone函数中, 循环调用clone，然后形成一个死循环导致爆栈;

`父级引证`：

const obj = {
    name: 'Chen',
    detail: {
        age: '18',
        height: '180',
        bodyWeight: '68'
    },
    hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
obj.temp = obj; // obj中的特点temp的值指向了obj

`同级引证`：

const obj = {
  name: 'Chen',
  detail: {
      age: '18',
      height: '180',
      bodyWeight: '68'
  },
  hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
obj.detail['tempDetail'] = obj.detail; // obj.detail中的特点tempDetail的值指向了obj.detail

`彼此引证`：

const obj = {
   name: 'Chen',
   detail: {
       age: '18',
       height: '180',
       bodyWeight: '68'
   },
   hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
const obj1 = {
   name: 'ChenYonx',
   detail: {
       age: '23',
       height: '175',
       bodyWeight: '70'
   },
   hobby: ['Watch the drama',  'Ride']
}
obj.tempDetail= obj1;
obj1.tempDetail = obj;
console.log('obj====>', obj);
console.log('obj1====>', obj1);

因而针对深仿制的循环使用问题，对clone函数进行优化：

// 检测数据类型的功用函数
const checkedType = (target) => Object.prototype.toString.call(target).replace(/[object (w+)]/, "$1").toLowerCase();
// 完成深仿制（Object/Array）
const clone = (target, hash = new WeakMap) => {
    let result;
    let type = checkedType(target);
    if(type === 'object') result = {};
    else if(type === 'array') result = [];
    else  return target;
    if(hash.get(target)) return target;
    let copyObj = new target.constructor();
    hash.set(target, copyObj)
    for (let key in target) {
        if(checkedType(target[key]) === 'object' || checkedType(target[key]) === 'array') {
            result[key] = clone(target[key], hash);
        } else {
            result[key] = target[key];
        }
    }
    return result;
}

调用一下优化后的clone(针对循环引证)

const obj = {
  name: 'Chen',
  detail: {
      age: '18',
      height: '180',
      bodyWeight: '68'
  },
  hobby: ['see a film',  'write the code',  'play basketball', 'tourism']
}
obj.tempObj = obj;
const obj1 = clone(obj);
console.log('obj1=====>', obj1);

哈哈~ 能够完整的将循环引证的数据进行深仿制下来

至此深仿制与浅仿制就结束咯~

是我对js仿制的理解了，在闲暇韶光做的一个总结归纳~
想不到自己仍是写完了~
希望对你有所帮助~

前端面试第三篇 js之路深拷贝与浅拷贝

深仿制与浅仿制

深仿制

浅仿制

赋值和浅仿制的区别

堆内存与栈内存的概念理解：

赋值和浅仿制举例：

浅仿制的完成注意：当仿制目标只要一层的时分，是深仿制

深仿制的完成

循环引证

`父级引证`：

`同级引证`：

`彼此引证`：

至此深仿制与浅仿制就结束咯~

作者信息

前端面试 第三篇 js之路 深拷贝与浅拷贝

深仿制与浅仿制

深仿制

浅仿制

赋值和浅仿制的区别

堆内存与栈内存的概念理解：

赋值和浅仿制举例：

浅仿制的完成 注意：当仿制目标只要一层的时分，是深仿制

深仿制的完成

循环引证

父级引证：

同级引证：

彼此引证：

至此 深仿制与浅仿制就结束咯~

相关文章

WebGL第三十九课：3D前置知识点之 z-value

63_高级trait

CheckBox/RadioButton切换动效实现

创建vite+vue3+ts+element-plus项目架子时，走过的坑

作者信息

前端面试第三篇 js之路深拷贝与浅拷贝

浅仿制的完成注意：当仿制目标只要一层的时分，是深仿制

`父级引证`：

`同级引证`：

`彼此引证`：

至此深仿制与浅仿制就结束咯~