聊一聊對(duì)js包裝對(duì)象的理解
在 JavaScript 中,基本類型(primitive types)例如數(shù)字、字符串、布爾值、null 和 undefined,本身并不是對(duì)象。然而,為了方便開發(fā)者訪問屬性和方法,JavaScript 提供了一種機(jī)制,當(dāng)我們?cè)噲D訪問基本類型的屬性或方法時(shí),它會(huì)自動(dòng)創(chuàng)建一個(gè)對(duì)應(yīng)的包裝對(duì)象(wrapper object)。 這個(gè)包裝對(duì)象是臨時(shí)的,一旦屬性或方法訪問完畢,它就會(huì)被銷毀。
以下是關(guān)于 JS 包裝對(duì)象的幾個(gè)關(guān)鍵理解:
自動(dòng)裝箱和拆箱: JavaScript 引擎在后臺(tái)自動(dòng)執(zhí)行裝箱和拆箱操作。
裝箱 (Boxing): 當(dāng)訪問基本類型的屬性或方法時(shí),JavaScript 會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的包裝對(duì)象(
Number、String、Boolean)。例如,'hello'.toUpperCase()會(huì)先將字符串 'hello' 裝箱成String對(duì)象,然后調(diào)用toUpperCase()方法,最后返回結(jié)果。拆箱 (Unboxing): 裝箱創(chuàng)建的包裝對(duì)象是臨時(shí)的。一旦操作完成,對(duì)象會(huì)被銷毀,值會(huì)被還原成基本類型。
三種包裝類型: JavaScript 提供了三種內(nèi)置的包裝類型:
String:用于字符串基本類型。Number:用于數(shù)字基本類型。Boolean:用于布爾值基本類型。Symbol和BigInt也有對(duì)應(yīng)的包裝對(duì)象,但使用場景相對(duì)較少。
臨時(shí)性: 包裝對(duì)象只在訪問屬性或方法的瞬間存在,之后立即被銷毀。這意味著你不能持久地持有對(duì)包裝對(duì)象的引用。例如,以下代碼不會(huì)修改原始字符串:
let str = 'hello'; let strObject = new String(str); // 手動(dòng)創(chuàng)建 String 對(duì)象 strObject.foo = 'bar'; // 修改包裝對(duì)象 console.log(str.foo); // undefined,原始字符串不受影響
手動(dòng)創(chuàng)建包裝對(duì)象: 雖然不推薦,但你可以手動(dòng)使用
new String()、new Number()和new Boolean()創(chuàng)建包裝對(duì)象。 手動(dòng)創(chuàng)建的對(duì)象不會(huì)像自動(dòng)裝箱那樣短暫存在,它們會(huì)持續(xù)占用內(nèi)存,除非被垃圾回收。 一般情況下,應(yīng)該避免手動(dòng)創(chuàng)建包裝對(duì)象,讓 JavaScript 引擎自動(dòng)處理裝箱和拆箱即可。null 和 undefined 沒有包裝對(duì)象: 嘗試訪問
null或undefined的屬性或方法會(huì)拋出TypeError。
示例:
let num = 10; console.log(num.toFixed(2)); // "10.00",自動(dòng)裝箱成 Number 對(duì)象,調(diào)用 toFixed() 方法 let str = 'hello'; console.log(str.length); // 5,自動(dòng)裝箱成 String 對(duì)象,訪問 length 屬性 let bool = true; console.log(bool.toString()); // "true",自動(dòng)裝箱成 Boolean 對(duì)象,調(diào)用 toString() 方法
總結(jié):
理解 JavaScript 包裝對(duì)象的概念對(duì)于編寫高效和正確的代碼至關(guān)重要。記住,它們是臨時(shí)的,用于提供對(duì)基本類型屬性和方法的訪問,并且通常情況下,你應(yīng)該讓 JavaScript 引擎自動(dòng)處理裝箱和拆箱。 避免手動(dòng)創(chuàng)建包裝對(duì)象,除非你有非常特定的需求。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),需要的朋友參考下吧2016-12-12
js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)顯示當(dāng)前狀態(tài)的導(dǎo)航效果代碼,涉及javascript通過鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)改變頁面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對(duì)vite環(huán)境變量相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
JS+CSS實(shí)現(xiàn)簡單的二級(jí)下拉導(dǎo)航菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡單的二級(jí)下拉導(dǎo)航菜單效果,通過簡單的JavaScript頁面元素遍歷及樣式操作實(shí)現(xiàn)下拉菜單效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09
淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
本篇文章主要介紹了淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解
這篇文章主要介紹了JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解此部分知識(shí),需要的朋友可以參考下2016-11-11

