JSON

这种方式有弊端,只能解析JSON数据,会丢失其他类型的数据。

JSON.parse(JSON.strigify(value))

JSON.stringify({a: () => {}}) === '{}' // true

jQuery.extend

这是jQuery.extend源代码,如果出现循环引用的问题,会直接报栈溢出错误 Uncaught RangeError: Maximum call stack size exceeded

jQuery.extend = jQuery.fn.extend = function () {
  var options,
    name,
    src,
    copy,
    copyIsArray,
    clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false

  // Handle a deep copy situation
  if (typeof target === 'boolean') {
    deep = target
    target = arguments[1] || {}
    // skip the boolean and the target
    i = 2
  }

  // Handle case when target is a string or something (possible in deep copy)
  if (typeof target !== 'object' && !jQuery.isfunction(target)) {
    target = {}
  }

  // extend jQuery itself if only one argument is passed
  if (length === i) {
    target = this
    --i
  }

  for (; i < length; i++) {
    // Only deal with non-null/undefined values
    if ((options = arguments[i]) != null) {
      // Extend the base object
      for (name in options) {
        src = target[name]
        copy = options[name]

        // Prevent never-ending loop
        if (target === copy) {
          continue
        }

        // Recurse if we're merging plain objects or arrays
        if (
          deep &&
          copy &&
          (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))
        ) {
          if (copyIsArray) {
            copyIsArray = false
            clone = src && jQuery.isArray(src) ? src : []
          } else {
            clone = src && jQuery.isPlainObject(src) ? src : {}
          }

          // Never move original objects, clone them
          target[name] = jQuery.extend(deep, clone, copy)

          // Don't bring in undefined values
        } else if (copy !== undefined) {
          target[name] = copy
        }
      }
    }
  }

  // Return the modified object
  return target
}

有以下两个注意点

  1. 注意循环引用
    数组存储对象值,避免循环引用的问题。
  2. 除了对象和数组外的其他typeofobject的数据类型处理
    下面是我的实现,不过对其他数据类型处理不完整,做的比较好的是lodash,这是他的源码
function deepCloneWrap (value) {
      let mapCache = []
      function deepClone (value) {
        if(value instanceof Date) return new Date(value);
        if(value instanceof RegExp) return new RegExp(value);
        if (typeof value !== 'object') return value

        if (mapCache.length) {
          for (let i = 0,len = arr.length; i < len; ++i) {
            if (mapCache[i][0] === value) {
              return mapCache[i][1]
            }
          }
        }
        // 直接取constructor,就不用判断是数组还是对象。
        let cloneVal = new value.constructor() 
        mapCache.push([value, cloneVal])
        for (let k in value) {
          cloneVal[k] = deepClone(value[k])
        }
        return cloneVal
      }
      return deepClone(value)
    }

    let a = {b:{c:1}}
    a.x = a
    let newA = deepCloneWrap(a)
    console.log(newA)

用WeakMap,弱引用。

function deepClone (value, hash = new WeakMap()) {
      if(value instanceof Date) return new Date(value);
      if(value instanceof RegExp) return new RegExp(value);
      if (typeof value !== 'object') return value

      if (hash.get(value)) return hash.get(value)
      let cloneVal = new value.constructor()
      hash.set(value, cloneVal)
      for (let k in value) {
        cloneVal[k] = deepClone(value[k], hash)
      }
      return cloneVal
    }

    let b = {b:{c:1}}
    b.x = b
    let newB = deepClone(b)
    console.log(newB)