iT邦幫忙

2022 iThome 鐵人賽
DAY 24
0
自我挑戰組

那些 Notion 中的前端筆記系列 第 24 篇

Day24 | JS 關於物件的傳參考、淺層拷貝、深層拷貝

14th鐵人賽
529 瀏覽

  • 分享至 

  • xImage
    •  

❒ 物件傳參考的特性

JavaScript 賦予一個值到變數上時會有兩個特性

  1. 傳值 ( Call by Reference )
    • Boolean
    • Null
    • Undefined
    • Number
    • String
    • …
  2. 傳參考 ( Call by Sharing )
    • 物件 ( 陣列、函式 )

➊ 傳值 ( Call by Reference )

純值賦值是透過複製的方式，所以前者與後者各自獨立，當後者修改時不會影響前者。

純值：為基本型別 ( number、string、boolean、null、undefined )。

範例

var person = '小明';
var person2 = person;
person2 = '杰倫';
  • var person2 = person; 為把 person 的值帶過去 person2 就為傳值，純值傳值是一種複製的方式。
  • person2 接收了 person 的值後再另外賦予 person2 新的值就不會和 person 有關聯性。

➋ 傳參考 ( Call by Sharing )

物件賦值是透過傳參考的特性，所以前者與後者都共用同一個記憶體空間的參考路徑，後者修改時前者也會跟著修改。

  • 「 物件、陣列、函式 」皆為傳參考特性，會先另外建立一個記憶體空間把值寫入。
  • ❗ 注意：物件變數新增一個新的物件 {} 就會產生一個新的記憶體空間，就不會相互影響 ( 如下方範例 2. 3 )。

範例1. 物件傳參考

var person = {
  name: '小明',
	money: 1000,
};
var person2 = person;
person2.name = '杰倫';

console.log( person === person2 );

解析：

  • 程式碼中我們宣告了一個 person ( var person = { name: '小明', money: 1000,}; ) 表示在記憶體準備了一個參考路徑，這個參考位置包含了 name 和 money。( 如下右圖，0x01 是為了記憶自訂義名稱 )
    示意圖

  • 當定義 person 為一個物件時，person 帶入的會是 0x01 這個記憶體的參考路徑，並不是帶入一個完整的物件內容。當參考路徑指向此物件時 ( 傳參考 ) 就可透過這種方式來取得裡面的 name 與 money 屬性。所以 person 並不會把 name 與 money 存到它的記憶體空間，只會傳入一個參考。
    示意圖

  • var person2 = person; 時會把 person 原本的參考位置一樣傳到 person2，所以 person 和 person2 共用的是同一個參考路徑 ( 右邊格子 0x01 )，所以 person2 修改時也會一併修改到 person。

    • 這段程式碼只有產生一個參考路徑，這個參考路徑對應一個物件，所以只有產生一個物件，person2 person 兩者皆共用同一物件。
      示意圖

  • 物件賦予值是以傳參考方式進行。

  • 所以答案為 true。

範例 2. 物件傳參考

var person = {
	name: '小明',
	money: 1000,
} 
****var person2 = person;
person2 = { ... };

console.log( person === person2 );

示意圖

解析：

  • 把 person2 指向一個新的空物件 { … }，它就會產生另一個參考路徑 0x02，這時產生另一個物件也就是產生另一個參考路徑，所以 person 與 person2 就不會有任何關聯，互不影響。
  • 所以答案為 false。

範例 3. 物件傳參考

var person = {
	name: '小明',
} 
****var person2 = person;
person2 = {
	name: '小明',
}
console.log( person === person2 );
  • person2 = { name: '小明' } 中就算 person2 與 person 內屬性與屬性值相同，但因分別為獨立的兩個物件兩個參考路徑，所以不會互相影響。
  • 所以答案為 false。

❒ 物件傳參考實作範例

❗ 注意：新增一個新的物件就會產生一個新的記憶體空間，前者與後者不會相互影響。

實作 1.

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mother: '老媽',
    ming: '小明',
  },
}
var member = family.members;
member = {
  ming: '大明',
};
console.log(family);

解析：

  • 在 var member = family.members; 時，member 與 family.members 都還是同個參考路徑。
    示意圖

  • member 賦予一個新的物件 member = { ming: '大明' } 開始，就拆成兩個參考路徑了，因為「 物件變數中看到新的 {} 就表示會產生一個新的記憶體空間 」。
    示意圖

  • 但是換成另種寫法 ：member 直接修改屬性而非產生 {} ，member 就會和 family.members 使用同一個參考路徑，而它們兩個也會相互影響。

    var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mother: '老媽',
    ming: '小明',
  },
}
var member = family.members;
member.ming = '大明';
console.log(family);

實作 2.

var a = {
	x: 1,
}
a.y = a;
console.log(a);

解析：

  • 此寫法會造成無限循環，不斷指向自己。

    {
	x: 1,
	y: {
		x: 1, 
		y: {
			x: 1,
			y: {.... 無限循環}
		}
	}
}

  • a 產生一個參考路徑 0x01 屬性為 x → a 指向 0x01 參考路徑 → a 新增一個 y 屬性且屬性值為 a，指回原參考路徑 0x01。從 a 裡面找 y 就會指回原參考路徑一直指向自己造成無限循環。
    示意圖

實作 3.

var a = {
  x: 1,
}
var b = a;
a.y = a = {
  x: 2,
}
console.log(a.y);
console.log(b);
console.log(a === b.y);

拆解：

  • var b = a; 這時變數 b 與 a 都還是同一個參考路徑 0x01。
    物件傳參考拆解01

  • a.y = a = { x: 2 };

    • a = { x: 2 }; 為運算式，所以 x: 2 會賦予到 y 上，
    • a.y = a = { x: 2 }; 這行是同時執行的沒有執行順序的問題，會等於 a = a.y = { x: 2 }; 。所以 a.y 的參考路徑會是原本的 a 參考路徑 0x01 而非 a 新的參考路徑 0x02。
    • a 新增一個 y 屬性，其屬性值為 a ( 參考物件 0x01 ) → 屬性值 a 新增一個物件，只要新增物件就會新增一個參考路徑，這邊 a 新增物件的新參考路徑為 0x02 裡面有 x 屬性與屬性值 2 ( a.y 參考路徑由 0x01 變 0x02 )。
      物件傳參考拆解02

答案：

  • console.log(a.y); 印出 undefined。
    • a 參考路徑變 0x02 而裡面並沒有 y 屬性，所以為 undefined。
  • console.log(b); 印出 { x:1, y: { x:2 } }。
  • console.log(a === b.y); 印出 true。

實作 4.

var a = { x: 1};
var b = a;
a.x = { x: 2 };
a.y = a = { y: 1};
console.log(a); // 結果？
console.log(b); // 結果？

解析：
物件傳參考範例四拆解

  • 到 var b = a; 時，a 與 b 都還是同個參考路徑 0x01。
  • a.x = { x: 2 }; ，a.x 被賦予新物件，當有新物件就會產生一個新的參考路徑，所以 0x01 的 x 屬性值參考路徑變成 0x02。
  • a.y = a = { y: 1}; 為運算式所以它們會同時執行沒有順序問題，而 a.y = a 為最原始的 a 參考路徑 0x01，所以 0x01 多一個 y 屬性，y 的屬性值為新的參考路徑 0x03 ( 有新物件就會產生一個新的參考路徑 )。

答案：

//a
{ y: 1 }

//b
x: {
	x: 2
}
y: {
	y:1
}

❒ 淺層複製與深層複製

由於物件有傳參考的特性，所以當兩物件需要拆開處理，就會產生一些困擾，這時就可使用 for in、淺層複製、深層複製來解決這個問題。

❒ 淺層拷貝 ( shallow Copy )

缺點： for in 方式只能做到第一層的複製，第一層以上的都還是會有傳參考特性。

➊ for in

結構： for ( var key in 原物件名稱 ) {}，當中的 key 為原物件的屬性。

範例 1.

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  },
}

var newFamily = {};
for (var key in family) {
  newFamily[key] = family[key];
}
// 物件內第一層成功拷貝，family與newFamily各自獨立
newFamily.name = '大明家';
console.log(family, newFamily);

// 物件內第二層還是有傳參考特性，所以會一併修改到 family.members.ming 
newFamily.members.ming = '大明';
console.log(family.members.ming === newFamily.members.ming);

CodePen 範例

  • 因為淺層拷貝只能移除第一層的傳參考特性，所以 console.log(family.members.ming === newFamily.members.ming); 會為 true。

➋ 使用 jQuery 方式

記得先載入 jQuery CDN

結構： jQuery.extent({}, 原物件名稱)

範例

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  },
}

var newFamily = jQuery.extend({}, family);
newFamily.name = '大明';
console.log(family, newFamily);
newFamily.members.ming = '大明';
console.log(family.members.ming === newFamily.members.ming);
  • 因為淺層拷貝只能移除第一層的傳參考特性，所以 console.log(family.members.ming === newFamily.members.ming); 會為 true。

➌ Object.assign ( ES6 方式 )

結構： Object.assign({}, 原物件名稱)

範例

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  },
}

var newFamily = Object.assign({}, family);
newFamily.name = '大明';
console.log(family, newFamily);
newFamily.members.ming = '大明';
console.log(family.members.ming === newFamily.members.ming);
  • 因為淺層拷貝只能移除第一層的傳參考特性，所以 console.log(family.members.ming === newFamily.members.ming); 會為 true。

❹ … 展開的方式 ( 筆者較常用此方式 )

結構： { ...原物件名稱 }

範例

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  },
}

var newFamily = { ...family };
newFamily.name = '大明';
console.log(family, newFamily);
newFamily.members.ming = '大明';
console.log(family.members.ming === newFamily.members.ming);
  • 因為淺層拷貝只能移除第一層的傳參考特性，所以 console.log(family.members.ming === newFamily.members.ming); 會為 true。

❒ 深層拷貝

不論物件裡面有幾層，都可透過深層拷貝的方式移除物件傳參考的特性。

使用方式： 把原本物件轉為字串再轉回物件，這種方式可以移除傳參考的特性。

結構：

  • 使用 JSON 方式把原物件轉為字串 → JSON.stringify(原物件名稱)
  • 透過 JSON.parse 把字串再轉回物件 → JSON.parse(JSON.stringify(原物件名稱))

範例

var family = {
  name: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  },
}
var newFamily = JSON.parse(JSON.stringify(family));

newFamily.name = '大明';
console.log(family, newFamily);

// 深層拷貝後，改了原物件第二層內的值也不會影響原物值，兩物件 family 與 newFamily各自獨立
newFamily.members.ming = '大明';
console.log(family.members.ming === newFamily.members.ming);

CodePen 範例

  • 因為深層拷貝可以移除物件內所有層的傳參考特性，所以 console.log(family.members.ming === newFamily.members.ming); 會為 false。

淺層拷貝範例

function changeName(data) {
  data.name = '杰倫家';
  return data;
}
var family = {
  name: '小明',
  home: '小明家',
  members: {
    father: '老爸',
    mom: '老媽',
    ming: '小明',
  }
}

var family2 = Object.assign({}, changeName(family));
family2.members.jay = '杰倫';

console.log(`family.name, ${family.name}`);
console.log(`family.members.jay, ${family.members.jay}`);
console.log(family === family2);
console.log(family.members === family2.members);

示意圖

  • 在 Object.assign 執行淺層拷貝時，先執行了 changeName(data)，物件是傳參考概念而函式也是物件所以也具有傳參考特性。
  • changeName(data) 中 data 參數換成 family，changeName(family) 裡面執行了 family.name = '杰倫家'; 會一併修改到 family 的參考路徑中 name 的屬性值，所以 family.name 會印出 杰倫家。
  • 因為淺層拷貝只會移除第一層的傳參考特性 ( 複製 0x01 第一層到 0x03 )，所以 family2.members.jay = '杰倫'; 中 members 內為第二層還是保有傳參考特性 ( 0x03 中的 members 參考路徑還是 0 )。

答案：

console.log(`family.name, ${family.name}`); // 杰倫家
console.log(`family.members.jay, ${family.members.jay}`); //杰倫
console.log(family === family2); // false
console.log(family.members === family2.members);  // true

參考資訊

  • 六角學院 - JavaScript 核心篇

上一篇
Day23 | 物件方法介紹 - 屬性特徵列舉與原型的關係、Setter 與 Getter運用
下一篇
Day25 | JS 函式 This 的運作
系列文
那些 Notion 中的前端筆記 共 30 篇
  1. 26
    Day26 | JS 箭頭函式
  2. 27
    Day27 | JS DOM
  3. 28
    Day28 | JS Event 事件
  4. 29
    Day29 | localStorage 瀏覽器資料儲存
  5. 30
    Day30 | JS 的 axios 套件與HTTP 狀態碼
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙