JS实现对象属性的克隆

原生JS实现对象属性的克隆。

浅层克隆
实现步骤如下:
1.判断是不是原型链上的属性
2.属性的克隆

  function clone(origin, target) {
        var target = target || {};
        for(var prop in origin) {
            if (origin.hasOwnProperty(prop)) {
                target[prop] = origin[prop];
            }
        }
    }
  		var obj = {
        A : 'a',
        B : ['c', 'd']
    };
    	var obj1 = {};
    	clone(obj, obj1);
    //结果如下:
    //clone(obj, obj1);
    //obj.B
	//(2) ["c", "d"];
	//obj.B.push('e');
	//obj.B
	//(3) ["c", "d", "e"]
	//obj1.B
	//(3) ["c", "d", "e"]

可以发现,浅层克隆obj和obj1的属性值同时改变,为解决这一问题使用深层克隆。

深层克隆的实现
实现步骤如下:
1.判断是不是原型链上的属性
2.判断是不是原始值
3.判断是数组还是对象(不考虑方法)
4.建立相应的数组或对象
5.递归

function deepClone(origin, target) {
        var target = target || {},
            toStr = Object.prototype.toString,
            arrStr = '[object Array]';
        for(var prop in origin) {
                //非原型链上属性
                if (origin.hasOwnProperty(prop)) {
                    //引用值
                    if (origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
                    	//判断是数组还是对象
                         target[prop] = (toStr.call(origin[prop]) == arrStr) ? 
                         [] : {};
                        //递归
                        deepClone(origin[prop], target[prop]);
                    } else {
                        //原始值
                        target[prop] = origin[prop];
                    }
                }
            }
        }

猜你喜欢

转载自blog.csdn.net/JohnWakeman20/article/details/88378552