成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

深入理解js對(duì)象的引用

hedge_hog / 824人閱讀

JavaScript 有七種內(nèi)置類(lèi)型，其中：

基本類(lèi)型

? 空值(null)
? 未定義(undefined)
? 布爾值( boolean)
? 數(shù)字(number)
? 字符串(string)
? 符號(hào)(symbol，ES6 中新增)

引用類(lèi)型

? 對(duì)象(object)

對(duì)于基本類(lèi)型，賦值（=）是值的拷貝，比較（===）的是實(shí)際的值，而對(duì)于引用類(lèi)型（Array也是一種Object），賦值（=）是引用地址的拷貝，比較（===）的是引用地址：

注：下面圖例中用類(lèi)似于X000001，X000002表示引用地址，只為了更好的舉例說(shuō)明，并不是真實(shí)的值

案例一 
const a = "哈哈"
const b = "哈哈"
console.log(a === b) // true

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

注解：

1.a和b是字符串，比較的是值，完全相等
2.c和d是對(duì)象，比較的是引用地址，c和d都是一個(gè)新對(duì)象，方別指向不同的地址，所以不相等

案例二 
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是對(duì)象，b=a是將a的引用地址賦值給b
2.a和b都指向與同一個(gè)對(duì)象，修改這個(gè)對(duì)象，a和b都會(huì)變化

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

注解：

1.a是對(duì)象，b=a是將a的引用地址賦值給b
2.b = {z: 6}新對(duì)象賦值給b，切斷了a和b的聯(lián)系，分別指向于不同的對(duì)象

總結(jié)：(精髓所在)

只操作（修改，刪除，添加）對(duì)象的屬性，不會(huì)與之前對(duì)象斷開(kāi)連接（案例二）

直接操作對(duì)象本身，也就是最外層，會(huì)和之前的對(duì)象斷開(kāi)連接（案例三）

數(shù)組也是對(duì)象

案例四 
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是基本類(lèi)型直接拷貝值，y和w是對(duì)象，是引用地址的拷貝
2.y是只操作屬性，連接不會(huì)斷開(kāi)，w操作了本身，生產(chǎn)了一個(gè)新對(duì)象，連接斷開(kāi)（參考上面的總結(jié)）


案例四理解之后應(yīng)該就知道為什么js對(duì)象有淺拷貝和深拷貝的區(qū)分了

應(yīng)用

場(chǎng)景：目前有多個(gè)用戶，每個(gè)用戶有自己的屬性，展示并且可以修改
程序?qū)崿F(xiàn)（例如vue）

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

一般來(lái)說(shuō)修改model里面數(shù)據(jù)，都需要用它的mutations和actions里面的方式，如果用戶屬性比較多，每一項(xiàng)都需要去定義一個(gè)mutations或actions的話，那開(kāi)發(fā)量是相當(dāng)?shù)拇?/p>

利用對(duì)象的引用關(guān)系，傳過(guò)來(lái)的數(shù)據(jù)不和源對(duì)象，切斷關(guān)系，是直接可以操作源對(duì)象，組件與組件之間的通信也可以這個(gè)實(shí)現(xiàn)

有利也有弊，這種操作起來(lái)很簡(jiǎn)單，但一旦切斷他們的聯(lián)系之后，不好維護(hù)，用這種方式需要對(duì)對(duì)象引用有深入的理解，知道什么時(shí)候會(huì)斷開(kāi)聯(lián)系

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

附加福利

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94723.html

相關(guān)文章

  • 深入理解JS深淺拷貝

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

    JackJiang 評(píng)論0 收藏0

  • 深入理解 Javascript 之 JS的深淺拷貝

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

    Tikitoo 評(píng)論0 收藏0

  • 由ES規(guī)范學(xué)JavaScript(二)：深入理解“連等賦值”問(wèn)題

    摘要：有這樣一個(gè)熱門(mén)問(wèn)題其實(shí)這個(gè)問(wèn)題很好理解，關(guān)鍵要弄清下面兩個(gè)知識(shí)點(diǎn)引擎對(duì)賦值表達(dá)式的處理過(guò)程賦值運(yùn)算的右結(jié)合性一賦值表達(dá)式形如的表達(dá)式稱為賦值表達(dá)式。賦值表達(dá)式是右結(jié)合的。 有這樣一個(gè)熱門(mén)問(wèn)題： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

    JasonZhang 評(píng)論0 收藏0

  • 深入理解 JavaScript中的變量、值、傳參

    摘要：所以說(shuō)在中，也并不是一切都是對(duì)象原始類(lèi)型值不可變?cè)碱?lèi)型的變量的值是不可變的，只能給變量賦予新的值?？梢岳斫饣绢?lèi)型的變量的值，就是字面上寫(xiě)的數(shù)值。有四個(gè)變量圖調(diào)用是傳參，內(nèi)層的會(huì)屏蔽外層的。圖內(nèi)層的的值被改變成的值被改變?yōu)椤? showImg(https://segmentfault.com/img/bVbldfK); 1. demo 如果你對(duì)下面的代碼沒(méi)有任何疑問(wèn)就能自信的回答出輸出...

    endiat 評(píng)論0 收藏0

  • JavaScript中的閉包

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

    HmyBmny 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<