淺克隆和深克隆的實作
-
深淺克隆主要是為了區分參考型別和值類的克隆
深拷貝時首先要區分陣列和物件(js中陣列和物件都是Object型別,因此要做區分)
-
方法一:利用Object.prototype.toString.call()
var tem = "[object Array]";
// 區分物件和陣列
function test() {
//首先判斷是不是物件
if (typeof(arguments[0]) == "object") {
//在判斷是不是陣列
if (Object.prototype.toString.call(arguments[0]) == tem) {
console.log("陣列");
} else {
console.log("物件");
}
} else {
console.log("不是物件");
}
}
-
方法二:利用instanceof
function test1() {
//利用instanceof
if (arguments[0] instanceof Array) {
console.log("陣列");
} else {
console.log("物件");
}
}
淺拷貝實作
-
將舊值賦給新目標,由于直接賦值,參考型別會直接復制舊值地址,導致新目標參考值改變時,舊值也會跟著變,因此引出深度克隆
var obj = {
name: "abc",
age: 12,
cord: ["2", "3"],
}
var obj1 = {};
//淺拷貝
function clone(origin, target) {
var target = target || {};
for (var prop in origin) {
target[prop] = origin[prop];
}
}
-
淺拷貝后,obj中的cord為陣列,陣列在js中為參考型別,obj1cord中的值改變后,obj接著也會變
深拷貝實作
- 深度克隆實作時,先創建一個新的空物件,再將要拷貝的物件的值賦給新的物件
- 深度克隆完之后不管是參考值還是原始值的改變都不會影響源物件
var obj = {
name: "abc",
age: 12,
cord: ["2", "3"],
}
var obj1 = {};
// 深度克隆完之后不管是參考值還是原始值的改變都不會影響源物件
// 先判斷是不是原始值 typeof() object
// 判斷是陣列還是物件 instancof Object.prototype.toString.call constructor
// 建立相應的陣列或物件
function deepClone(origin, target) {
var target = target || {},
//用來判斷是陣列還是物件
toStr = Object.prototype.toString,
//存放陣列型別的String
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];
}
}
}
return target;
}
deepClone(obj, obj1);
-
深克隆之后就完全解決了這個問題,obj1中cord的內容改變之后,obj不會變

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/254545.html
標籤:其他
下一篇:新版谷歌瀏覽器獲取本地時間例外

