深入理解js對象的引用

hedge_hog 發布于2019-08-22 16:57 / 775人閱讀

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的聯系，分別指向于不同的對象

總結：(精髓所在)

只操作（修改，刪除，添加）對象的屬性，不會與之前對象斷開連接（案例二）

直接操作對象本身，也就是最外層，會和之前的對象斷開連接（案例三）

數組也是對象

案例四

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）

首先我們將每一個用戶都封裝成一個多帶帶的模塊（.vue），用戶初始數據存放在model里面（vuex）

一般來說修改model里面數據，都需要用它的mutations和actions里面的方式，如果用戶屬性比較多，每一項都需要去定義一個mutations或actions的話，那開發量是相當的大

利用對象的引用關系，傳過來的數據不和源對象，切斷關系，是直接可以操作源對象，組件與組件之間的通信也可以這個實現

有利也有弊，這種操作起來很簡單，但一旦切斷他們的聯系之后，不好維護，用這種方式需要對對象引用有深入的理解，知道什么時候會斷開聯系

個人建議只在這種多個相同組件中使用。

附加福利

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

GPU云服務器云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94723.html

深入理解JS深淺拷貝

摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數據類型基本數據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數據類型：...

JackJiang 2019-08-23 14:31 評論0 收藏0
深入理解 Javascript 之 JS的深淺拷貝

摘要：動手實現深拷貝利遞歸來實現對對象或數組的深拷貝。遞歸思路對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。深拷貝只對對象自有屬性進行拷貝測試數據拷貝方式其實也是一種繼承的方式，當然繼承還是有其他方法的感謝支持深淺拷貝基本類型 & 引用類型 ECMAScript中的數據類型可分為兩種：基本類型：undefined,null,Boolean,String,Number,Symb...

Tikitoo 2019-08-23 10:55 評論0 收藏0
由ES規范學JavaScript(二)：深入理解“連等賦值”問題

摘要：有這樣一個熱門問題其實這個問題很好理解，關鍵要弄清下面兩個知識點引擎對賦值表達式的處理過程賦值運算的右結合性一賦值表達式形如的表達式稱為賦值表達式。賦值表達式是右結合的。有這樣一個熱門問題： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

JasonZhang 2019-08-19 17:18 評論0 收藏0
深入理解 JavaScript中的變量、值、傳參

摘要：所以說在中，也并不是一切都是對象原始類型值不可變原始類型的變量的值是不可變的，只能給變量賦予新的值。可以理解基本類型的變量的值，就是字面上寫的數值。有四個變量圖調用是傳參，內層的會屏蔽外層的。圖內層的的值被改變成的值被改變為。 showImg(https://segmentfault.com/img/bVbldfK); 1. demo 如果你對下面的代碼沒有任何疑問就能自信的回答出輸出...

endiat 2019-08-23 14:07 評論0 收藏0
JavaScript中的閉包

摘要：閉包引起的內存泄漏總結從理論的角度將由于作用域鏈的特性中所有函數都是閉包但是從應用的角度來說只有當函數以返回值返回或者當函數以參數形式使用或者當函數中自由變量在函數外被引用時才能成為明確意義上的閉包。文章同步到github js的閉包概念幾乎是任何面試官都會問的問題,最近把閉包這塊的概念梳理了一下,記錄成以下文章。什么是閉包我先列出一些官方及經典書籍等書中給出的概念,這些概念雖然...

HmyBmny 2019-08-21 17:07 評論0 收藏0