IFE_part2_JavaScript_JS中的克隆(深度克隆的实现)

了解JS中简易克隆与深度克隆的概念和区别:

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

    // 浅度克隆:原始类型为值传递,对象类型仍为引用传递。/对于对象的浅克隆,修改新对象的时候会把原对象的属性也一起修改
    var a="1";
    var b=a;
    b="2";
    console.log(a);// "1"
    console.log(b);// "2"
    
    // 深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。
    function cloneObject(src) {
        var result
        if (typeof src == "string" || typeof src == "number") {
            var result = src;
        }
        else if (src instanceof Array == true) {
            var result = src
        }
        else if (typeof src == "object") {
            // 深度克隆实现方法1 /缺点:1.无法复制函数 2.原型链没有了,对象就是object,所属的类没有了。
            var result = JSON.parse (JSON.stringify(src))
        }
        return result;    
    }
    
    // 测试用例:
    var srcObj = {
        a: 1,
        b: {
            b1: ["hello", "hi"],
            b2: "JavaScript"
        }
    };
    var abObj = srcObj;
    var tarObj = cloneObject(srcObj);
    
    srcObj.a = 2;
    srcObj.b.b1[0] = "Hello";
    
    console.log(abObj.a);
    console.log(abObj.b.b1[0]);
    
    console.log(tarObj.a);      // 1
    console.log(tarObj.b.b1[0]);    // "hello"
    

    除了JSON.parse (JSON.stringify(src))这种方法,还有通过Object.assigin递归实现的,目前递归的方式正在理解中。

猜你喜欢

转载自www.cnblogs.com/No-harm/p/8995075.html
今日推荐