深刻理解js對象的引用

JavaScript 有七種內置類型，其中：

基本類型

• 空值(null)
• 未定義(undefined)
• 布爾值( boolean)
• 數字(number)
• 字符串(string)
• 符號(symbol，ES6 中新增)

引用類型

• 對象(object)

對於基本類型，賦值（=）是值的拷貝，比較（===）的是實際的值，而對於引用類型（Array也是一種Object），賦值（=）是引用地址的拷貝，比較（===）的是引用地址：

注：下面圖例中用相似於X000001，X000002表示引用地址，只爲了更好的舉例說明，並非真實的值

案例一

const a = '哈哈'
const b = '哈哈'
console.log(a === b) // true

const c = {}
const d = {}
console.log(c === d) // false

註解：

1.a和b是字符串，比較的是值，徹底相等
2.c和d是對象，比較的是引用地址，c和d都是一個新對象，方別指向不一樣的地址，因此不相等

案例二

let a = { z: 5, y: 9 }
let b = a
b.z = 6
delete b.y
b.x = 8 
console.log(a) // {z: 6, x: 8}
console.log(a === b) // true

註解：

1.a是對象，b=a是將a的引用地址賦值給b
2.a和b都指向與同一個對象，修改這個對象，a和b都會變化

案例三

let a = { z: 5 }
let b = a
b = {z: 6}
console.log(a.z) // 5
console.log(a === b) // false

註解：

1.a是對象，b=a是將a的引用地址賦值給b
2.b = {z: 6}新對象賦值給b，切斷了a和b的聯繫，分別指向於不一樣的對象

總結：(精髓所在)

1. 只操做（修改，刪除，添加）對象的屬性，不會與以前對象斷開鏈接（案例二）
2. 直接操做對象自己，也就是最外層，會和以前的對象斷開鏈接（案例三）
3. 數組也是對象

案例四

let a = { z: 5, y: {x: 8}, w: {r: 10} }
let b = {...a}
b.z = 6
b.y.x = 9
b.w = {r: 11}
console.log(a) // { z: 5, y: {x: 9}, w: {r: 10}}
console.log(a.y === b.y) // true
console.log(a.w === b.w) // false
console.log(a === b) // false

註解：

1.b = {...a}中，z是基本類型直接拷貝值，y和w是對象，是引用地址的拷貝
2.y是隻操做屬性，鏈接不會斷開，w操做了自己，生產了一個新對象，鏈接斷開（參考上面的總結）

案例四理解以後應該就知道爲何js對象有淺拷貝和深拷貝的區分了

應用

場景：目前有多個用戶，每一個用戶有本身的屬性，展現而且能夠修改
程序實現（例如vue）

1. 首先咱們將每個用戶都封裝成一個單獨的模塊（.vue），用戶初始數據存放在model裏面（vuex）
2. 通常來講修改model裏面數據，都須要用它的mutations和actions裏面的方式，若是用戶屬性比較多，每一項都須要去定義一個mutations或actions的話，那開發量是至關的大
3. 利用對象的引用關係，傳過來的數據不和源對象，切斷關係，是直接能夠操做源對象，組件與組件之間的通訊也能夠這個實現
4. 有利也有弊，這種操做起來很簡單，但一旦切斷他們的聯繫以後，很差維護，用這種方式須要對對象引用有深刻的理解，知道何時會斷開聯繫
5. 我的建議只在這種多個相同組件中使用。

附加福利

判斷兩個對象值是否相等（只是純值，無論引用地址）
https://segmentfault.com/a/11...