浅拷贝

对于复制引用数据类型，只会复制数据最外面一层

  1. function shallowCopy(originObj){
  2.     let obj = {}
  3.   for(let i in originObj){
  4.       obj[i] = originObj[i]
  5.   }
  6.   return obj
  7. }

被复制对象

  1. let my = {
  2.     name:'gromy',
  3.   age:18,
  4.   study:{
  5.       gaozhong:{
  6.         wl:'理科',
  7.       score:481
  8.     },
  9.     daxue:{
  10.         xuexiao:{
  11.         name:'江苏理工',
  12.         zhuanye:'计算机'
  13.       },
  14.       time:'4'
  15.     }
  16.   }
  17. }

执行

  1. let he = shallowCopy(my)
  3. my.study.gaozhong.score=321
  4. 321
  5. he.study.gaozhong.score
  6. 321

浅复制只复制了最外面一层，所以一层以上的引用还是同一个，使用Object.assign() 也是跟以上相同实现的浅复制。

深拷贝

使用 JSON.stringtify() 实现的深拷贝

问题


    1. var obj={
    2.  name:'gromy',
    3. age:NaN,
    4. say:function(){
    5.  console.log('我会说话哦！');
    6. },
    7. id:Symbol('id'),
    8. birthday:new Date('1992/01/01')
    9. };
    1. var obj2=JSON.parse(JSON.stringify(obj));
    2. console.log(obj2);
    image.png
  • undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略
  • Date 日期调用了 toJSON() 将其转换为了 string 字符串（Date.toISOString()），因此会被当做字符串处理。
  • NaN 和 Infinity 格式的数值及 null 都会被当做 null。
  • 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
  • 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

    完整实现

    实现过程

  1. 判断源目标的数据类型
  2. 对不同数据类型进行不同的复制
  3. 递归调用

    深拷贝的痛点-循环引用的问题

    一般我们拷贝的过程是一边遍历一边拷贝
    1. var obj = {};
    2. var b = {obj};
    3. obj.b = b
    就会存在拷贝结束后新的对象中还存在对原来对象的引用
    解决这个问题的方案是，在拷贝的过程中，开一个暂存区，存储已经拷贝的引用，如果需要引用之前的内容，去引用新对象的地址。
    lodash 对此的解决方案
    1. // Check for circular references and return its corresponding clone.
    2. stack || (stack = new Stack)
    3. const stacked = stack.get(value)
    4. if (stacked) {
    5.  return stacked
    6. }
    7. stack.set(value, result)
    lodash 是用一个栈去存储所有已经拷贝的引用，每次引用之前去查询是否之前已经存在引用
    lodash 对于类型的处理非常的全面 ``javascript /**Object#toString` result references. */ const argsTag = ‘[object Arguments]’ const arrayTag = ‘[object Array]’ const boolTag = ‘[object Boolean]’ const dateTag = ‘[object Date]’ const errorTag = ‘[object Error]’ const mapTag = ‘[object Map]’ const numberTag = ‘[object Number]’ const objectTag = ‘[object Object]’ const regexpTag = ‘[object RegExp]’ const setTag = ‘[object Set]’ const stringTag = ‘[object String]’ const symbolTag = ‘[object Symbol]’ const weakMapTag = ‘[object WeakMap]’

const arrayBufferTag = ‘[object ArrayBuffer]’ const dataViewTag = ‘[object DataView]’ const float32Tag = ‘[object Float32Array]’ const float64Tag = ‘[object Float64Array]’ const int8Tag = ‘[object Int8Array]’ const int16Tag = ‘[object Int16Array]’ const int32Tag = ‘[object Int32Array]’ const uint8Tag = ‘[object Uint8Array]’ const uint8ClampedTag = ‘[object Uint8ClampedArray]’ const uint16Tag = ‘[object Uint16Array]’ const uint32Tag = ‘[object Uint32Array]’

  1. <a name="OhHip"></a>
  2. #### 简单实现
  3. ```javascript
  4. function deepClone(value){
  5.     let cache = {};            //暂存已经复制的引用
  6. }

获取引用数据类型

  1. function getTypeName(value){
  2.   return Object.prototype.toString.call(value)
  3. }
  1. //判断是否是基础类型的数据
  2. function isPrimitive(value){
  3.   return (typeof value === 'string' || 
  4.           typeof value === 'number' || 
  5.           typeof value === 'symbol' ||
  6.           typeof value === 'boolean'||
  7.           value === undefined || 
  8.           value === null ||
  9.           value === NaN ||
  10.           value === Infinity)
  11. }

根据已有数据创建新对象

  1. function creatByTag(value){
  2.   let cont = value.constructor
  3.   return new cont()
  4. }

细分类型

object

  1. if(getTypeName(value) === objectTag){
  2.   result = {...value}
  3.   Reflect.ownKeys(result).forEach((key)=>{
  4.     console.log(result[key])
  5.     // if(cache[result[key]]){
  6.     //     result[key] = cache[result[key]]
  7.     // }else{
  8.     result[key] = baseClone(result[key])
  9.     // cache[result[key]] = result[key]
  10.     //}
  11.   })
  12.   return result
  13. }

Array

  1. //array
  2. if(getTypeName(value) === arrayTag){
  3.   result = [...value]
  4.   result.forEach((item,i)=>{
  5.     result[i] = baseClone(result[i])
  6.   })
  7.   return result
  8. }

map

  1. //Map
  2. if(getTypeName(value) === mapTag){
  3.   result = creatByTag(value)
  4.   value.forEach((subValue, key) => {
  5.     result.set(key, baseClone(subValue))
  6.   })
  7.   return result
  8. }

Set 同理

正则

  1. function cloneRegExp(regexp) {
  2.   const result = new regexp.constructor(regexp.source, reFlags.exec(regexp))
  3.   result.lastIndex = regexp.lastIndex
  4.   return result
  5. }

symbol

  1. function cloneSymbol(symbol) {  
  2.   return Object(Symbol.prototype.valueOf.call(symbol))
  3. }

date

  1. function cloneDate(date) {
  2.   let cont = date.constructor
  3.   return cont(+date)
  4. }

function

  1. function copyFunc(value){
  2.     return eval(`(${value.toString()})`)
  3. }

test

  1. let func = function(){
  2.     let a = 2
  3.     return function(){
  4.         return a++
  5.     }
  6. }
  7. let f2 = new Function(func)
  8. f2.prototype == func.prototype //false

包装基础数据类型

  1. '[object Boolean]'
  2. '[object Number]'
  3. '[object Strung]'
  1. function cloneBaseType(value) {
  2.   let cont = value.constructor
  3.   return cont(value)
  4. }

总代码以及测试

  1. const argsTag = '[object Arguments]'
  2.     const arrayTag = '[object Array]'
  3.     const boolTag = '[object Boolean]'
  4.     const dateTag = '[object Date]'
  5.     const errorTag = '[object Error]'
  6.     const mapTag = '[object Map]'
  7.     const numberTag = '[object Number]'
  8.     const objectTag = '[object Object]'
  9.     const regexpTag = '[object RegExp]'
  10.     const setTag = '[object Set]'
  11.     const stringTag = '[object String]'
  12.     const symbolTag = '[object Symbol]'
  13.     const weakMapTag = '[object WeakMap]'
  15.     function deepClone(obj){
  16.         let cache = {}  //暂存已经复制过的引用
  17.         //判断类型
  18.         function baseClone(value){
  19.             let result
  20.             if(isPrimitive(value)){
  21.                 return value
  22.             }
  23.             //object
  24.             if(getTypeName(value) === objectTag){
  25.                 result = {...value}
  26.                 Reflect.ownKeys(result).forEach((key)=>{
  27.                     console.log(result[key])
  28.                     // if(cache[result[key]]){
  29.                     //     result[key] = cache[result[key]]
  30.                     // }else{
  31.                         result[key] = baseClone(result[key])
  32.                         // cache[result[key]] = result[key]
  33.                     //}
  34.                 })
  35.                 return result
  36.             }
  37.             //array
  38.             if(getTypeName(value) === arrayTag){
  39.                 result = [...value]
  40.                 result.forEach((item,i)=>{
  41.                     result[i] = baseClone(result[i])
  42.                 })
  43.                 return result
  44.             }
  45.             //Map
  46.             if(getTypeName(value) === mapTag){
  47.                 result = creatByTag(value)
  48.                 value.forEach((subValue, key) => {
  49.                     result.set(key, baseClone(subValue))
  50.                 })
  51.                 return result
  52.             }
  54.         }
  55.         return baseClone(obj)
  56.     }
  58.     function getTypeName(value){
  59.         return Object.prototype.toString.call(value)
  60.     }
  61.     //判断是否是基础类型的数据
  62.     function isPrimitive(value){
  63.         return (typeof value === 'string' || 
  64.             typeof value === 'number' || 
  65.             typeof value === 'symbol' ||
  66.             typeof value === 'boolean'||
  67.             value === undefined || 
  68.             value === null ||
  69.             value === NaN ||
  70.             value === Infinity)
  71.     }
  73.     function creatByTag(value){
  74.         let cont = value.constructor
  75.         return new cont()
  76.     }
  80.     let obj = {
  81.         name:'gromy',
  82.         xuexiao:{
  83.             gaozhong:{
  84.                 name:'第一中学',
  85.                 time:4
  86.             }
  87.         },
  88.         family:[
  89.             {husband:{name:'super man'}},
  90.             {son:{name:'super baby',age:1}}
  91.         ]
  92.     }
  93.     let obj2 = deepClone(obj)
  94.     console.log('obj2',obj2)
  95.     obj.xuexiao.gaozhong.time = 5
  96.     obj.family[1].son.age = 0
  97.     console.log('obj2',obj2)

lodash 源码

  1. /** `Object#toString` result references. */
  2. const argsTag = '[object Arguments]'
  3. const arrayTag = '[object Array]'
  4. const boolTag = '[object Boolean]'
  5. const dateTag = '[object Date]'
  6. const errorTag = '[object Error]'
  7. const mapTag = '[object Map]'
  8. const numberTag = '[object Number]'
  9. const objectTag = '[object Object]'
  10. const regexpTag = '[object RegExp]'
  11. const setTag = '[object Set]'
  12. const stringTag = '[object String]'
  13. const symbolTag = '[object Symbol]'
  14. const weakMapTag = '[object WeakMap]'
  16. const arrayBufferTag = '[object ArrayBuffer]'
  17. const dataViewTag = '[object DataView]'
  18. const float32Tag = '[object Float32Array]'
  19. const float64Tag = '[object Float64Array]'
  20. const int8Tag = '[object Int8Array]'
  21. const int16Tag = '[object Int16Array]'
  22. const int32Tag = '[object Int32Array]'
  23. const uint8Tag = '[object Uint8Array]'
  24. const uint8ClampedTag = '[object Uint8ClampedArray]'
  25. const uint16Tag = '[object Uint16Array]'
  26. const uint32Tag = '[object Uint32Array]'
  28. /** Used to identify `toStringTag` values supported by `clone`. */
  29. const cloneableTags = {}
  30. cloneableTags[argsTag] = cloneableTags[arrayTag] =
  31. cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =
  32. cloneableTags[boolTag] = cloneableTags[dateTag] =
  33. cloneableTags[float32Tag] = cloneableTags[float64Tag] =
  34. cloneableTags[int8Tag] = cloneableTags[int16Tag] =
  35. cloneableTags[int32Tag] = cloneableTags[mapTag] =
  36. cloneableTags[numberTag] = cloneableTags[objectTag] =
  37. cloneableTags[regexpTag] = cloneableTags[setTag] =
  38. cloneableTags[stringTag] = cloneableTags[symbolTag] =
  39. cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =
  40. cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true
  41. cloneableTags[errorTag] = cloneableTags[weakMapTag] = false
  43. /** Used to check objects for own properties. */
  44. const hasOwnProperty = Object.prototype.hasOwnProperty
  47. function initCloneByTag(object, tag, isDeep) {
  48.   const Ctor = object.constructor
  49.   switch (tag) {
  50.     case arrayBufferTag:
  51.       return cloneArrayBuffer(object)
  53.     case boolTag:
  54.     case dateTag:
  55.       return new Ctor(+object)
  57.     case dataViewTag:
  58.       return cloneDataView(object, isDeep)
  60.     case float32Tag: case float64Tag:
  61.     case int8Tag: case int16Tag: case int32Tag:
  62.     case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:
  63.       return cloneTypedArray(object, isDeep)
  65.     case mapTag:
  66.       return new Ctor
  68.     case numberTag:
  69.     case stringTag:
  70.       return new Ctor(object)
  72.     case regexpTag:
  73.       return cloneRegExp(object)
  75.     case setTag:
  76.       return new Ctor
  78.     case symbolTag:
  79.       return cloneSymbol(object)
  80.   }
  81. }
  84. /**
  85.  * Initializes an array clone.
  86.  *
  87.  * @private
  88.  * @param {Array} array The array to clone.
  89.  * @returns {Array} Returns the initialized clone.
  90.  */
  91. function initCloneArray(array) {
  92.   const { length } = array
  93.   const result = new array.constructor(length)
  95.   // Add properties assigned by `RegExp#exec`.
  96.   if (length && typeof array[0] === 'string' && hasOwnProperty.call(array, 'index')) {
  97.     result.index = array.index
  98.     result.input = array.input
  99.   }
  100.   return result
  101. }
  103. /**
  104.  * The base implementation of `clone` and `cloneDeep` which tracks
  105.  * traversed objects.
  106.  *
  107.  * @private
  108.  * @param {*} value The value to clone.
  109.  * @param {number} bitmask The bitmask flags.
  110.  *  1 - Deep clone
  111.  *  2 - Flatten inherited properties
  112.  *  4 - Clone symbols
  113.  * @param {Function} [customizer] The function to customize cloning.
  114.  * @param {string} [key] The key of `value`.
  115.  * @param {Object} [object] The parent object of `value`.
  116.  * @param {Object} [stack] Tracks traversed objects and their clone counterparts.
  117.  * @returns {*} Returns the cloned value.
  118.  */
  119. function baseClone(value, bitmask, customizer, key, object, stack) {
  120.   let result
  121.   const isDeep = bitmask & CLONE_DEEP_FLAG
  122.   const isFlat = bitmask & CLONE_FLAT_FLAG
  123.   const isFull = bitmask & CLONE_SYMBOLS_FLAG
  125.   if (customizer) {
  126.     result = object ? customizer(value, key, object, stack) : customizer(value)
  127.   }
  128.   if (result !== undefined) {
  129.     return result
  130.   }
  131.   if (!isObject(value)) {
  132.     return value
  133.   }
  134.   const isArr = Array.isArray(value)
  135.   const tag = getTag(value)
  136.   if (isArr) {
  137.     result = initCloneArray(value)
  138.     if (!isDeep) {
  139.       return copyArray(value, result)
  140.     }
  141.   } else {
  142.     const isFunc = typeof value === 'function'
  144.     if (isBuffer(value)) {
  145.       return cloneBuffer(value, isDeep)
  146.     }
  147.     if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
  148.       result = (isFlat || isFunc) ? {} : initCloneObject(value)
  149.       if (!isDeep) {
  150.         return isFlat
  151.           ? copySymbolsIn(value, copyObject(value, keysIn(value), result))
  152.           : copySymbols(value, Object.assign(result, value))
  153.       }
  154.     } else {
  155.       if (isFunc || !cloneableTags[tag]) {
  156.         return object ? value : {}
  157.       }
  158.       result = initCloneByTag(value, tag, isDeep)
  159.     }
  160.   }
  161.   // Check for circular references and return its corresponding clone.
  162.   stack || (stack = new Stack)
  163.   const stacked = stack.get(value)
  164.   if (stacked) {
  165.     return stacked
  166.   }
  167.   stack.set(value, result)
  169.   if (tag == mapTag) {
  170.     value.forEach((subValue, key) => {
  171.       result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack))
  172.     })
  173.     return result
  174.   }
  176.   if (tag == setTag) {
  177.     value.forEach((subValue) => {
  178.       result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack))
  179.     })
  180.     return result
  181.   }
  183.   if (isTypedArray(value)) {
  184.     return result
  185.   }
  187.   const keysFunc = isFull
  188.     ? (isFlat ? getAllKeysIn : getAllKeys)
  189.     : (isFlat ? keysIn : keys)
  191.   const props = isArr ? undefined : keysFunc(value)
  192.   arrayEach(props || value, (subValue, key) => {
  193.     if (props) {
  194.       key = subValue
  195.       subValue = value[key]
  196.     }
  197.     // Recursively populate clone (susceptible to call stack limits).
  198.     assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack))
  199.   })
  200.   return result
  201. }
  203. export default baseClone