浅克隆与深克隆

作者: 梦周十 | 来源:发表于2017-03-13 16:03 被阅读0次

    克隆的概念

    浅度克隆:原始类型为值传递,对象类型仍为引用传递。
    深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

    浅克隆

    // 定义两个变量,将一个变量的赋给另一个变量
    let copy1 = {a: 'copy1'}
    let copy2 = copy1
    #console.log(copy1.a) // copy1
    #console.log(copy2.a) // copy1
    //此时改变一个变量的值
    copy2.a = 'copy2'
    #console.log(copy1.a) // copy2
    #console.log(copy2.a) // copy2
    

    浅复制方法会改变起源赋值对象的值,这种方法有利也有弊

    利:赋值对象数据同步更新
    弊:如果只想克隆一个对象,两个对象初始值是一样,但后续变化毫不相干时,这种方法就做不到这一点

    所以就此引出深克隆

    深克隆

    // 深度克隆
    function deepClone (obj) {
      var result = null
      var oClass = isClass(obj)
      // 确定result的类型
      if (oClass === 'Object') {
        result = {}
      } else if (oClass === 'Array') {
        result = []
      } else {
        return obj
      }
      for (var key in obj) {
        var copy = obj[key]
        if (isClass(copy) === 'Object') {
          // 递归调用
          result[key] = deepClone(copy)
        } else if (isClass(copy) === 'Array') {
          result[key] = deepClone(copy)
        } else {
          result[key] = obj[key]
        }
      }
      return result
    }
    // 返回传递给他的任意对象的类
    function isClass (o) {
      if (o === null) return 'Null'
      if (o === undefined) return 'Undefined'
      return Object.prototype.toString.call(o).slice(8, -1)
    }
    
    let copy1 = {a: 'copy1'}
    let copy2 = deepClone(copy1)
    #console.log(copy1.a) // copy1
    #console.log(copy2.a) // copy1
    #// 此时改变copy2值
    copy2.a = 'copy2'
    #// 再次打印copy1
    #console.log(copy1.a) // copy1
    

    此例可以看出深度克隆实现了 克隆对象 后续变量变化互不相干
    从而证实上述克隆的理论概念。

    [归类:javascript]

    相关文章

      网友评论

        本文标题:浅克隆与深克隆

        本文链接:https://www.haomeiwen.com/subject/dpzfnttx.html