Javascript中的基本類型和引用類型概述說(shuō)明
簡(jiǎn)單概述
js變量可以劃分為兩種不同的數(shù)據(jù)類型:
- 基本類型:undefined、null、Boolean、Number、String、Symbol(ES6)
- 引用類型:除基本類型以外,也可以理解為對(duì)象,如:Object、Array、RegExp、Date、Function等
類型的區(qū)別在于:
基本類型 | 引用類型 | |
---|---|---|
可變性 | 不可變 | 可變 |
存儲(chǔ)區(qū) | 棧區(qū) | 棧區(qū)和堆區(qū) |
訪問(wèn) | 按值訪問(wèn) | 按引用訪問(wèn) |
兩者比較 | 值的比較 | 引用的比較 |
詳細(xì)說(shuō)明
值的可變性
基本類型(以string類型為例):
let person = '小明'; person.age = 18; console.log(person.age); // undefined
引用類型值(原始值)可添加屬性和方法:
let person = { name: '小落子' }; person.age = 18; person.addAge = function() { person.age2 = person.age + 1; } person.addAge(); console.log(person.age, person.age2); // 18 19
這樣就說(shuō)明了,基本類型的值是不可變的,而引用類型的值是可變的
存儲(chǔ)
基本類型存儲(chǔ)結(jié)構(gòu):
棧區(qū) | 棧區(qū) |
---|---|
name | 小紅 |
age | 18 |
基本類型的變量存放在棧區(qū)(棧區(qū)指內(nèi)存里的棧內(nèi)存,stack)
棧區(qū)保存了變量的標(biāo)識(shí)和變量的值
引用類型存儲(chǔ)結(jié)構(gòu):
引用類型的存儲(chǔ)需要內(nèi)存的棧區(qū)和堆區(qū)共同完成(堆區(qū)指內(nèi)存里的堆內(nèi)存,heap)
棧區(qū)保存了變量的標(biāo)識(shí)符和指向堆內(nèi)存中該對(duì)象的指針(該對(duì)象在堆內(nèi)存的地址),堆區(qū)保存了實(shí)際的對(duì)象
訪問(wèn)/比較
// 基本類型,以string為例 let a = '[]', b = '[]'; console.log(a === b); // true // 引用類型 let c = [], d = []; console.log(c === d); // false
基本類型的訪問(wèn)是按值訪問(wèn)的;引用類型是按**引用(地址)**訪問(wèn)的
基本類型比較的是值,所以相同,就為 true;引用類型比較是兩個(gè)對(duì)象堆內(nèi)存地址是否相同,雖然變量c和變量d都是一個(gè)空數(shù)組,但是它們的堆內(nèi)存地址不是一樣的,地址指向的不是同一個(gè)數(shù)組對(duì)象,所以不相等。
經(jīng)常遇到的問(wèn)題
關(guān)于基本類型和引用類型,不管是面試中,還是平常使用中,經(jīng)常遇到的問(wèn)題便是克?。◤?fù)制),這里又引出另一個(gè)概念(深克隆和淺克隆,對(duì)于基本類型是沒(méi)什么影響的)
- 淺克?。簭?fù)制引用類型時(shí),不僅復(fù)制,而且還把內(nèi)存地址也復(fù)制了一遍;修改其中一個(gè),另一個(gè)會(huì)跟著變化
- 深克隆:復(fù)制,內(nèi)存地址不同;修改其中一個(gè),另一個(gè)不會(huì)相應(yīng)的改變
到此這篇關(guān)于Javascript中的基本類型和引用類型概述說(shuō)明的文章就介紹到這了,更多相關(guān)JS基本類型與引用類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了JS使用canvas繪制旋轉(zhuǎn)風(fēng)車動(dòng)畫(huà),有加速減速啟動(dòng)停止功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02js屬性對(duì)象的hasOwnProperty方法的使用
這篇文章主要介紹了js屬性對(duì)象的hasOwnProperty方法的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02使用JavaScript實(shí)現(xiàn)改造layer彈層移動(dòng)版組件
這篇文章主要為大家詳細(xì)介紹了使用JavaScript實(shí)現(xiàn)改造layer彈層移動(dòng)版組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04利用JavaScript緩存遠(yuǎn)程竊取Wi-Fi密碼的思路詳解
這篇文章主要介紹了利用JavaScript緩存遠(yuǎn)程竊取Wi-Fi密碼的方法,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11百度地圖JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向
本文主要介紹了百度地圖JavascriptApi Marker平滑移動(dòng)及車頭指向行徑方向的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03兼容FireFox 用javascript寫(xiě)的一個(gè)畫(huà)圖函數(shù)
兼容FireFox 用javascript寫(xiě)的一個(gè)畫(huà)圖函數(shù)...2007-08-08一文帶你掌握J(rèn)avaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員,我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對(duì)于執(zhí)行上下文和作用域的理解至關(guān)重要,無(wú)論是工作還是面試都是無(wú)法跳躍的一步,本文就來(lái)帶大家深入了解一下2023-02-02JS實(shí)現(xiàn)探測(cè)網(wǎng)站鏈接的方法【測(cè)試可用】
這篇文章主要介紹了JS實(shí)現(xiàn)探測(cè)網(wǎng)站鏈接的方法,通過(guò)網(wǎng)站返回錯(cuò)誤響應(yīng)觸發(fā)onerror時(shí)間來(lái)判斷網(wǎng)站鏈接的可用性,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-11-11ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了ajaxfileupload.js實(shí)現(xiàn)上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04JS實(shí)現(xiàn)的跨瀏覽器解析XML文件實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的跨瀏覽器解析XML文件的方法,結(jié)合實(shí)例形式分析了javascript基于ActiveXObject操作xml文件的加載與解析相關(guān)技巧,需要的朋友可以參考下2016-06-06