JavaScript 有七種內置類型，其中：
基本類型
• 空值(null)• 未定義(undefined)• 布爾值( boolean)• 數字(number)• 字符串(string)• 符號(symbol，ES6 中新增)
引用類型
• 對象(object)
對於基本類型，賦值（=）是值的拷貝，比較（===）的是實際的值，而對於引用類型（Array也是一種Object），賦值（=）是引用地址的拷貝，比較（===）的是引用地址：
注：下面圖例中用類似於X000001，X000002表示引用地址，只為了更好的舉例說明，並不是真實的值
案例一
const a = '哈哈'const b = '哈哈'console.log(a === b) // trueconst c = {}const d = {}console.log(c === d) // false註解：
1.a和b是字符串，比較的是值，完全相等2.c和d是對象，比較的是引用地址，c和d都是一個新對象，方別指向不同的地址，所以不相等
案例二
let a = { z: 5, y: 9 }let b = ab.z = 6delete b.yb.x = 8 console.log(a) // {z: 6, x: 8}console.log(a === b) // true註解：
1.a是對象，b=a是將a的引用地址賦值給b2.a和b都指向與同一個對象，修改這個對象，a和b都會變化
案例三
let a = { z: 5 }let b = ab = {z: 6}console.log(a.z) // 5console.log(a === b) // false註解：
1.a是對象，b=a是將a的引用地址賦值給b2.b = {z: 6}新對象賦值給b，切斷了a和b的聯繫，分別指向於不同的對象
總結：(精髓所在)
只操作（修改，刪除，添加）對象的屬性，不會與之前對象斷開連接（案例二）
直接操作對象本身，也就是最外層，會和之前的對象斷開連接（案例三）
數組也是對象
案例四
let a = { z: 5, y: {x: 8}, w: {r: 10} }let b = {...a}b.z = 6b.y.x = 9b.w = {r: 11}console.log(a) // { z: 5, y: {x: 9}, w: {r: 10}}console.log(a.y === b.y) // trueconsole.log(a.w === b.w) // falseconsole.log(a === b) // false註解：
1.b = {...a}中，z是基本類型直接拷貝值，y和w是對象，是引用地址的拷貝2.y是隻操作屬性，連接不會斷開，w操作了本身，生產了一個新對象，連接斷開（參考上面的總結）
案例四理解之後應該就知道為什麼js對象有淺拷貝和深拷貝的區分了
應用
場景：目前有多個用戶，每個用戶有自己的屬性，展示並且可以修改
程序實現（例如vue）
首先我們將每一個用戶都封裝成一個單獨的模塊（.vue），用戶初始數據存放在model裡面（vuex）
一般來說修改model裡面數據，都需要用它的mutations和actions裡面的方式，如果用戶屬性比較多，每一項都需要去定義一個mutations或actions的話，那開發量是相當的大
利用對象的引用關係，傳過來的數據不和源對象，切斷關係，是直接可以操作源對象，組件與組件之間的通信也可以這個實現
-
有利也有弊，這種操作起來很簡單，但一旦切斷他們的聯繫之後，不好維護，用這種方式需要對對象引用有深入的理解，知道什麼時候會斷開聯繫
個人建議只在這種多個相同組件中使用。
分享到:
閱讀更多 前端小白說 的文章
關鍵字: 引用 技術 JavaScript
