原生JavaScript之深度克隆

先看一下克隆成功后的结果

深度克隆就是将obj的属性克隆到obj1上面，并且在obj上面修改属性不影响obj1上面的属性。

1、先把所有的值都遍历一遍（看是引用值和原始值）
用for ( var prop in obj )，对象和数组都可以使用
2、判断是原始值，还是引用值？用typeof判断是不是object
1）如果是原始值就直接拷贝
2）如果是引用值，判断是数组还是对象
3、判断是数组还是对象？（方法instanceof【看a的原型链上有没有b的原型】、toString、constructor，建议用toString,另外两个有个小bug——跨父子域不行）
1）如果是数组，就新建一个空数组；
2）如果是对象，就新建一个空对象。
4、建立了数组以后，如果是挨个看原始对象里面是什么，都是原始值就可以直接考过来了；或者，建立了对象以后，挨个判断对象里面的每一个值，看是原始值还是引用值
5、递归

准备好要克隆的对象，还有接收克隆过来的对象

                var obj = {

                    name :"abc",

                    age : 9,

                    sex :"female",

                    card : ['visa','master'],

                    wife : {

                        name : "bcd",

                        son : {

                            name : "bcd",

                            son : "xx"

                        }

                    }

                }

                var obj1 = {

                }

写克隆的代码，步骤解释在代码注释里面

                function deepClone(origin,target){ // 传入参数

                    var target = target || {}, // 防止没有写接收克隆的目标，所以兼容一下，如果没有就用空对象去接收

                    toStr = Object.prototype.toString, // 把原型上的toString付给toStr

                    arrStr = "[object Array]";

                    for(var prop in origin){ //循环起源对象

                        if(origin.hasOwnProperty(prop)){ //不拿原型上的东西，如果有原型上的属性就不进入判断

                            if(origin[prop] !== "null" && typeof(origin[prop]) == 'object'){  //不拿起源对象上面为空的值，拿原始值

                                if(toStr.call(origin[prop]) == arrStr){ //为数组否则为对象

                                    target[prop] = []; //创建空数组接收

                                }else{

                                    target[prop] = {};//创建空对象接收

                                }

                                deepClone(origin[prop],target[prop]);//再传入参数，执行递归，重复判断这整个流程

                            }else{

                                target[prop] = origin[prop]; //如果是应用值直接付给目标

                            }

                        }

                    }

                    return target; //防止没写接收的目标，返回克隆完成后的目标

                }

谢谢观看，如果大佬经过请多指教！谢谢观看，如果大佬经过请多指教！谢谢观看，如果大佬经过请多指教！

巴特西

原生JavaScript之深度克隆

最新文章

热门文章