JS实现深度克隆

作者: 起这么长的名字根本没有用 | 来源:发表于2017-03-31 17:43 被阅读186次

    一、概念

    深度克隆:深度克隆的新对象可以完全脱离原对象,我们对新对象的修改不会反映到原对象中

    二、知识点储备:

    1. 函数的克隆直接通过普通赋值的方式,就实现了函数的克隆,并且不会影响之前的对象。原因就是函数的克隆会在内存单独开辟一块空间,互不影响。
            var Person = function(){
                this.name = "dai"
                this.friends = ["A","B"]
            }
    
            var n = Person 
            n = function (){
                console.log("message");
            } 
            console.log(n)
             /*function (){
                console.log("message");
            }*/
            console.log(Person)
            /*function(){
                this.name = "dai"
                this.friends = ["A","B"]
            }
            */
    
    2.安全的类型检测:Object.prototype.toString.call(value) [Object NativeConstructor](字符串类型的值)
            console.log(Object.prototype.toString.call('dai') );// [object String]
            console.log( Object.prototype.toString.call(123) );// [object Number]
            console.log( Object.prototype.toString.call({name:"lu"}) );//[object Object]
            console.log( Object.prototype.toString.call([1,2]) );// [object Array]
    
    3. 需求:只克隆对象、数组、函数、原始类型值的属性,原型链上继承过来的属性也克隆过来
    4.实现深度拷贝的思路:
    • 先判断传入值得类型,如果是对象则让最终的返回值是对象类型,同理数组,其他类型的值直接返回就Ok
    • 在传入类型是对象或者数组的情况下,遍历传入对象的key,如果key对应的value还是对象或者数组,则递归函数本身(深层遍历),如果key对应的value是除了对象和数组以外的值则把对应的key和value都给函数最终要返回的结果
    • 返回结果

    三、代码实现:

          var isClass = function (o){
                    return Object.prototype.toString.call(o).slice(8,-1)
                }
    
            var deepClone = (function deepClone(obj){
                var result,
                    oClass = isClass(obj);
                if(oClass==='Object'){
                    result = {}
                }else if(oClass==='Array'){
                    result =  []
                }else{
                    return obj
                }
    
                if(oClass==='Object'){
                    for(var key in obj){
                        result[key]  = deepClone(obj[key])  
                    }
                }else if(oClass==="Array"){
                    for(var i=0;i<obj.length;i++){
                        result.push(deepClone(obj[i]))
                    }
                }
    
                return result
            })
    
            var orgin = {
                name:{
                    firstName:"dai",
                    lastName:"lu"
                },
                firends:[{name:"A"},{name:"B"}],
                age:26
            }
    
            var clone = deepClone(orgin);
            console.log(clone);
            clone.firends.push({name:"C"})
            console.log(orgin.firends);
    
    当然:如果不想克隆原型链上继承过来的属性,只要在for in循环里使用obj.getOwnProperty()做一下判断就可以过滤掉原型链上继承过来的属性了

    相关文章

      网友评论

        本文标题:JS实现深度克隆

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