浅拷贝与深拷贝

2020-03-09  本文已影响0人  再见噜噜班

JavaScript中的数据类型主要分为原始数据类型(Number,String,Boolean,Null,Undefined,Symbol)和引用类型(Object)。深拷贝和浅拷贝主要是针对引用类型的,即在拷贝一个对象时,对于对象中属性值是对象的情况,浅拷贝复制的是对象的引用,深拷贝会复制对象的值。举个例子说,假设B复制了A,如果B改变了,A跟着改变,这就是浅拷贝,如果B改变了而A不改变,此时就是深拷贝。

   let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }

    let shallowCopy = Object.assign({},temp)
    temp.obj.msg='hi'
    console.log(shallowCopy.obj.msg)//hi
  1. JSON
    先把对象序列化成JSON字符串,然后再把字符串解析成对象,这种方法只适合处理属性值是对象或者数组的情况,对于函数会失真。还有,会丢失constructor,不管原先是什么,都会成为Object。
     let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }
    
    let deepCopy1 = JSON.parse(JSON.stringify(temp))
    temp.obj.msg='hi'
    console.log(deepCopy1.obj.msg,deepCopy1.fn)//hello undefined
  1. 递归,for...in...循环遍历属性
   function deepClone(obj) {
        //判断是否是数组
        let result = Array.isArray(obj) ? [] : {}
        for (let key in obj) {
            //判断是否是自身的属性
            if (obj.hasOwnProperty(key)) {
                if (typeof obj[key] === 'object') {
                    //如果属性值是对象,对这个对象深拷贝
                    result[key] = deepClone(obj[key])
                } else {
                    //如果属性值类型不是object,直接复制
                    result[key] = obj[key]
                }
            }

        }
        return result
    }
    let temp = {
        name:'temp',
        obj:{
            msg:'hello'
        },
        fn:function(){
            console.log('hello')
        }
    }
    let deepCopy2 = deepClone(temp)
    temp.obj.msg='hi'
    console.log(deepCopy2.obj.msg) //hello
    deepCopy2.fn()  //hello
上一篇下一篇

猜你喜欢

热点阅读