Javascript深度拷貝

這裏用遞歸的思想進行JS對象的深度拷貝，並進行封裝，思路以下

1. 判斷是否是原始值 使用方法：typeof()/object

2. 判斷是數組仍是對象 使用方法： instanceof toString constructor

3. 創建相應的數組或對象

4. 循環遞歸

function deepClone(origin,target){
		var target = target || {},
			toStr = Object.prototype.toString,
			arr = "[object Array]";

		for(var prop in origin){
			if(origin.hasOwnProperty(prop)){ //選擇本身的屬性
				if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object'){//區分原始值和引用值
					if(toStr.call(origin[prop]) == arr){//區分數組和對象
						target[prop] = [];//創建數組
					}else{
						target[prop] = {};//創建對象
					}
					deepClone(origin[prop],target[prop]); //循環遞歸
				}else{
					target[prop] = origin[prop];
				}
			}
		}
		return target;
	}複製代碼

代碼能夠將中間target[prop]賦值操做用三目運算符簡化以下：

target[prop] = (toStr.call(origin[prop]) == arr) ? [] : {};

所以 簡化後的深度拷貝的代碼最後以下：

function deepClone(origin,target){
    var target = target || {},//容錯
    toStr = Object.prototype.toString,//.call
    arr = "[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]) == arr) ? [] : {};//判斷是數組仍是對象 而後相應創建數組/對象
		deepClone(origin[prop], target[prop]);//循環遞歸
	    }else{//原始值
		target[prop] = origin[prop];
	    }
         }
    }
    return target;
}複製代碼

最後，咱們能夠建立兩個對象來進行深度拷貝

var obj1 = {
    name : 'sunny',
    age : 100,
    sayName : function(){
    console.log(this.name);
    }
}
var obj2 = {};複製代碼

執行拷貝

deepClone(obj1, obj2);//放入源對象和拷貝對象複製代碼