也不知道從什么時候開始,前端圈冒出了個新詞:對象深度克隆??雌饋砗孟窈芨叽笊系臉幼?,實際上并不新鮮,在我們的實際項目開發中,你可能早已用到,只不過由于漢字的博大精深,有些原本很簡單的事物被一些看似專業的詞匯稍加修飾,就變得神秘起來了。
首先為什么要將一個對象進行深克???請允許我進行一個猜測:你有時一定會認為js的內置對象document太長,那么你可能會這樣做:
上述代碼對document.getElementById進行了簡化,同時在原document對象中也增加了一個by的成員方法,你可以通過document.hasOwnProperty('by')返回的狀態值來驗證你的判斷。再看下面一個例子。
由此可見,將一個對象通過簡單的傳遞給一個新的變量時,僅僅只是給該對象增添了一個別名。這意味著,通過對該別名的操作,原有對象鍵值會發生改變。但問題在于,有時我們希望newPerson完全獨立于person,彼此之間不存在同步關系,那么就需要生成一個副本,請看例子:
//測試
var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//執行深度克隆
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//對克隆后的新對象進行成員刪除
delete newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//結果: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];
這便是所謂的對象克隆。不過有幾處需要解釋一下。代碼中的JSON對象及其成員方法stringify和parse屬于ECMAScript5規范,它們分別負責將一個對象(包括數組對象)轉換成字符串,和還原,從而實現對象的深拷貝。那么對于低級瀏覽器(如IE),拷貝數組的話,可以用newobj.concat(obj),而普通對象,就索性枚舉賦值好了。
新聞熱點
疑難解答