深刻理解js對象的引用

JavaScript 有七種內置類型,其中:

基本類型vue

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

引用類型vuex

• 對象(object)

對於基本類型,賦值(=)是值的拷貝,比較(===)的是實際的值,而對於引用類型(Array也是一種Object),賦值(=)是引用地址的拷貝,比較(===)的是引用地址:segmentfault

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

案例一

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

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

註解:spa

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

註解:code

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

註解:blog

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

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

應用

場景:目前有多個用戶,每一個用戶有本身的屬性,展現而且能夠修改
程序實現(例如vue)ip

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

圖片描述

附加福利

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

相關文章
相關標籤/搜索