深浅克隆实现

存储状态

存储地址分为堆、栈这两种

  • 基本类型
    基本类型因为数据大小固定存储在栈之中

  • 引用类型
    引用类型因为数据大小不固定存储在堆之中

深浅克隆

  • 基本类型克隆

    let a = 1;
    let b = a;
    b = 2;
    console.log(a); // 1
    console.log(b); // 2
    

    基本类型存入栈之中克隆后不会影响到被克隆对象

  • 引用类型克隆

    let arr = [1,2];
    let arr1 = arr;
    arr1.length = 1;
    console.log(arr); // [1]
    console.log(arr1); // [1]
    

    引用类型存入堆之中克隆后他们所指向的地址相同所以对于他们的克隆不能直接赋值

  • 引用类型克隆方法

    方法一:

    1.判断是不是原始值
    2.判断是数组还是对象
    3.新建数组或者对象

    按照这个过程递归

    // 对象的深度克隆方法封装
    function deepClone(orgin, target) {
        let target = target || {}, // 有的话就用这个参数没有新建一个
        arrStr = "[object Array]"; // 这里用于判断属性类型
            for(let prop in orgin) {
                // 这一步防止克隆了原型链上的东西
                if(orgin.hasOwnProperty(prop)){
                    if(typeof(orgin[prop]) == 'object'){
                        if(orgin[prop].toString() == arrStr) {
                            target[prop] = [];
                        }else{
                            target[prop] = {};
                        }
                    }
                    deepClone(orgin[prop], target[prop]);
                }else{
                    target[prop] = orgin[prop];
                }
            }
        return target;
    }  
    

    方法二:

    es6新增的assign方法

    let obj = {
        name: '司尘';
        age: '1';
    }
    let obj1 = Object.assign({}, obj);
    

你可能感兴趣的:(前端)