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