美文网首页
js的浅克隆与深度克隆

js的浅克隆与深度克隆

作者: 哔哔_fc39 | 来源:发表于2019-04-02 21:23 被阅读0次

克隆


普通克隆

//普通克隆
var origin = {
    name:"xiaoli",
    age:18,
    say:function(){
        console.log(this.name);
    }
}    
var target = {}
function clone(origin,target){
    var target = target || {};
    for(var prop in origin){
        target[prop] = origin[prop];
    }
    return target;
}
clone(origin,target);

深度克隆

/*
遍历对象   for in
1.判断是不是原始值  typeof() object
2.判断时数组还是对象instanceof   toString  constructor
3.建立相应的数组或对象
递归....
if(typeof(origin[prop]))
*/
var obj = {
    name: "abc",
    age: 123,
    card: ["visa", "unionpay"],
    wife: {
        name: "bcd",
        son: {
            name: "erzi"
        }
    }
}
var obj1 = {};
function deepClone(origin, target) {
    var target = target || {},
        toStr = Object.prototype.toString,
        arrStr = "[object Array]",
        objStr = "[object Object]";
    
    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; 
}
deepClone(obj, obj1);
// console.log(deepClone(obj));
console.log(obj1);

相关文章

网友评论

      本文标题:js的浅克隆与深度克隆

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