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…