JavaScript 物件拷貝
JavaScript 如何復制一個物件？淺拷貝可以復制出原始值屬性，但是對于參考值屬性僅僅復制了一份參考，利用遞回對每個參考值屬性的屬性進行復制，這種方式稱之為深拷貝
問題引入
var person1 = {
name: '張三',
age: "22"
}
var person2 = person1;
我們希望拷貝一份 person1 的屬性給 person2，賦值是最簡單的做法，但是這并不是我們想要的結果， 因為這僅僅是將 person1、person2 指向了同一物件，修改其一，會相互影響
物件淺拷貝
var person1 = {
name: '張三',
age: 22,
son: {
name: '張小三',
age: 1
}
}
var person2 = {};
for (var key in person1) {
person2[key] = person1[key];
}
回圈將 person1 的屬性取出賦值給 person2，對于原始型別屬性，不相互影響，可以成功拷貝，但是對于參考型別的屬性，如 person2.son 和 person1.son 指向了同一物件，修改其一，會相互影響
如果不需要 person1 原型鏈上的屬性，賦值時使用 hasOwnProperty() 判斷
物件深拷貝
淺拷貝復制參考值只是將參考指向這個值，并不是復制了一份，修改其一，會相互影響，我們可以將屬性中的參考值也回圈其屬性，復制到目標物件的屬性，這種需求適合遞回
var person1 = {
name: '張三',
age: 30,
son: {
first: {
name: '小一',
age: 3
}
}
}
function deepClone(origin) {
var target = {};
var toStr = Object.prototype.toString;
for (var key in origin) {
if (!origin.hasOwnProperty(key)) continue;
if (typeof(origin[key]) === 'object' && origin[key] !== null) {
if (toStr.call(origin[key]) === "[object Array]") {
target[key] = [];
} else {
target[key] = {};
}
target[key] = deepClone(origin[key]);
} else {
target[key] = origin[key];
}
}
return target;
}
var person2 = deepClone(person1);
person2.son.sencond = {
name: '小二',
age: 2
}
console.log(person2);
console.log(person1);
person2 含有 person1 的所有屬性，對于原始值屬性進行修改，不會相互影響
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140506.html
標籤：JavaScript