# 物件傳參考｜筆記 by Sz ###### tags: `Sz` `課前` `Vue新手夏令營` - [Vue 新手夏令營 課程頁面](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/%2FC05go-8iTSS-nrMwKU22kA) - [:sun_with_face:筆記入口](/2JiZbCPdR0G4p5fNycPmTg) > ### 備註 > 找資料的時候看到很多種說法，可能要留意一下是不是在講同件事XD > 傳參照、傳參、call by reference、pass by reference ## 傳？傳什麼？ - [五分鐘快速了解 [傳址，傳參考，傳址] ](https://ithelp.ithome.com.tw/articles/10198215) - [JS 的傳值 & 傳參考](https://ithelp.ithome.com.tw/articles/10225762) - [這篇還沒看](https://ithelp.ithome.com.tw/articles/10209104) ### 參考是什麼？ 參考（參照、reference） ，指的是他們存在的記憶體空間 傳參考會共用同一個記憶體空間，不會複製 ### JS 的傳值與傳參考 #### 傳值 Call By Value - 把 value 傳到另一個**記憶體位置**的 value 上，是 copy 非 link - JS 中的純值就是這個特性(Boolean、Null、Undefined、Number、String) - 彼此只有 copy 關係，所以 copy 完後，其中一方被更改，不會影響到另一方 #### 傳參考 Call By Reference - 把記憶位置傳到另一個物件的記憶體位置上，為 link 非 copy - JS 中物件型別（這個詞不太懂，包含 function, array）是這個特性 - 彼此有 link 關係，所以在哪裡其中一方被修改了，兩邊都會更新 ## Object 的傳參考特性 不論物件、陣列都是用傳參考方式賦值， 賦值後彼此有 link 關係，其中一方被更改，兩方都會一起更新 有個 person 物件 ``` const person = { name: '小明', obj: {} } ``` person2 與 person 建立了一個 link 關係 在 person2 裡不論更改 key， 或是內部 obj 的 key 都會更新原本資料 ``` const person2 = person; // link 了一個 person2 物件 person2.name = '杰倫'; // 在 person2 更新這個物件內容 person.name = person2.name = '杰倫'; // 兩邊都會自動更新 ``` ### object 在 object 內部也一樣擁有傳參考特性 再額外建立一個 obj2 跟 obj 建立 link 關係（還不知道為什麼要這麼做） 直接打 person2.obj.{key} 也會更新 person.obj ``` const obj2 = obj // 建立新的 link ``` ## Danger Zone ### 透過 function 修改 object 的 key （不清楚自己在幹嘛不要亂用） 有個 funciton 專門修改 object 的某個 key ``` const fn = (item) => { item.name = '杰倫'; } ``` 不論這個 function 帶入 person, person2 都會被更新 ``` fn(person2); // 透過這個 function 去修改 person2（跟 person 有 link 相關） console.log(person); // 物件傳參考特性， person 也會被更新 ``` ## 斬斷一切的牽連：淺層拷貝、深層拷貝 開發時如果沒有留意到傳參考特性，會很容易不小心修改到原本的資料 避免此狀況可使用 ### 淺層拷貝(Shallow Copy) 最外層的 object 是新建的，內層若有其他 object 還是保留傳參考特性，程式碼較單純 #### Object.assign() ``` const newObject = Object.assign({}, originObject) ``` - 第一個 parameter 放空的 object (建立新的記憶體空間) - 第二個放想要複製的 object - 在空 object 中展開想要複製的物件 #### 在新的空 object 內展開 ``` const newObject2 = { ...originObject } ``` ### 深層拷貝(Deep Copy) 將轉為字串再轉回 object 的 object 賦值在 newObject 上 兩者已經沒有關係了 ``` const newObject = JSON.parse(JSON.stringify(object)) ```