JS中const對(duì)于復(fù)雜類(lèi)型變量和普通類(lèi)型變量的區(qū)別詳解
const關(guān)鍵字是讓什么不能變?
const實(shí)際上的不能變并不是說(shuō)變量的值不能變,而是初始化后變量所指向在棧中的內(nèi)存上的數(shù)據(jù)不能變
我們先切記這一點(diǎn)先,看下文?。?!
js中變量的兩種類(lèi)型
js中的變量類(lèi)型可以分為兩種:
簡(jiǎn)單數(shù)據(jù)類(lèi)型
Number
String
Boolean
Undefined
null
symbol
復(fù)雜數(shù)據(jù)類(lèi)型(下面我都稱(chēng)為對(duì)象)
Object
Array
Function(函數(shù)實(shí)際上是對(duì)象)
兩種類(lèi)型的的存儲(chǔ)區(qū)別
堆和棧都是兩種數(shù)據(jù)結(jié)構(gòu),靠他們來(lái)給變量分配使用內(nèi)存
而js的兩種數(shù)據(jù)類(lèi)型的變量即是存儲(chǔ)在堆和棧中
簡(jiǎn)單類(lèi)型變量的存儲(chǔ)
這種類(lèi)型的變量我們是用得最多的
它是存儲(chǔ)在棧中而已
以下是的示例定義
var num=100 var bool=false var str='字符串
而他在棧中的存儲(chǔ)可以形象比喻為這樣子

其中變量的值存儲(chǔ)在變量指向的棧中的內(nèi)存地址上,看上圖,100就是存儲(chǔ)在內(nèi)存地址上
結(jié)合上面所說(shuō)的const的作用就知道為什么const關(guān)鍵字定義的簡(jiǎn)單類(lèi)型的變量的值不能變,因?yàn)?strong>改變其變量的值是直接改變變量指向的內(nèi)存上的數(shù)據(jù),這是const關(guān)鍵字不允許的
那為什么復(fù)雜類(lèi)型的又可以呢,看下文
復(fù)雜類(lèi)型變量的存儲(chǔ)
先說(shuō)一下,復(fù)雜類(lèi)型的值的更改指的是
復(fù)雜類(lèi)型變量里屬性可以更改,整個(gè)對(duì)象的更改const關(guān)鍵字是不允許的!??!
比如
const ob={
a:100,
b:200
}
const ob1={
c:100
}
ob.a=200 // successful ! ! !
ob=ob1 // fail ! ! !
如果需要替換整個(gè)對(duì)象,const關(guān)鍵字是不允許的,但是屬性值的更改是可以的
那這又是為什么 ? 看下面
我們先要記住const關(guān)鍵字是不允許更改變量的哪個(gè)地方,是變量在棧中存儲(chǔ)變量值的內(nèi)存地址上的值
對(duì),沒(méi)錯(cuò) ?。?!這也是普通變量值不能更改的原因
但是為什么復(fù)雜變量的可以更改呢,但是不可以替換呢
主要原因是:
復(fù)雜變量的值不是存儲(chǔ)在棧中,而是存儲(chǔ)在堆里,復(fù)雜變量在棧中內(nèi)存上的值是指向存儲(chǔ)該復(fù)雜類(lèi)型變量值的堆上的地址
如果這句話看不懂的話,可以看下圖

所以更改對(duì)象的屬性值是更改在堆上的值,而替換對(duì)象則是要更改存儲(chǔ)在棧中內(nèi)存地址上變量在堆上存儲(chǔ)數(shù)據(jù)的地址值,而這個(gè)更改恰恰是const關(guān)鍵字不允許的?。?!
這也是為什么會(huì)有對(duì)象的淺拷貝和深拷貝的原因,因?yàn)槟惆岩粋€(gè)對(duì)象直接賦值給另一個(gè)對(duì)象,準(zhǔn)確來(lái)說(shuō)是把對(duì)象變量在棧中的存儲(chǔ)的指向改變了,指向了同一個(gè)在堆里存儲(chǔ)的數(shù)據(jù),所以你改變其中一個(gè)變量的值,會(huì)造成其堆上存儲(chǔ)的數(shù)據(jù)改變,所以另外一個(gè)對(duì)象的值也會(huì)改變,這就是為啥會(huì)有淺拷貝?。?!
以上就是JS中const對(duì)于復(fù)雜類(lèi)型變量和普通類(lèi)型變量的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于JS const復(fù)雜類(lèi)型和普通類(lèi)型變量區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Javascript實(shí)現(xiàn)簡(jiǎn)易天數(shù)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)簡(jiǎn)易天數(shù)計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
詳解TypeScript中type與interface的區(qū)別
在寫(xiě) ts 相關(guān)代碼的過(guò)程中,總能看到 interface 和 type 的身影。它們的作用好像都一樣的,相同的功能用哪一個(gè)都可以實(shí)現(xiàn),也都很好用,所以也很少去真正的理解它們之間到底有啥區(qū)別,因此本文將詳細(xì)講解二者的區(qū)別,需要的可以參考一下2022-04-04
Layui 解決表格異步調(diào)用后臺(tái)分頁(yè)的問(wèn)題
今天小編就為大家分享一篇Layui 解決表格異步調(diào)用后臺(tái)分頁(yè)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
詳解js location.href和window.open的幾種用法和區(qū)別
這篇文章主要介紹了詳解js location.href和window.open的幾種用法和區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
uniapp中解析markdown支持網(wǎng)頁(yè)和小程序?qū)崿F(xiàn)示例
這篇文章主要為大家介紹了uniapp中解析markdown支持網(wǎng)頁(yè)和小程序?qū)崿F(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性,而這些新特性到目前為止完全可以運(yùn)用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法2016-03-03
JavaScript this關(guān)鍵字指向常用情況解析
這篇文章主要介紹了JavaScript this關(guān)鍵字指向常用情況解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透解決辦法
最近用uin-app做項(xiàng)目遇到了不少問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于uniapp?H5遮罩層、彈窗以及蒙層滾動(dòng)穿透/滑動(dòng)穿透的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01

