JavaScript?原始包裝類型匯總
前言:
引出問題: 如下一段簡單的代碼,變量a賦予了字符串類型原始值"str",通過控制臺打印輸出變量a,只有“str"。a并沒有定義slice這個方法,但是后續(xù)為什么變量a可以調(diào)用slice方法呢?
let a = "str"; console.log(a); // "str" console.log(a.slice(1)) // "tr"
針對以上問題,需要追溯到JavaScript中的原始包裝類型。
一、原始包裝類型
為了方便操作原始值,ECMAScript提供了3種特殊的引用類型:Boolean、Number 和 String
關(guān)于Boolean、Number 和 String涉及的方法和屬性很多,這里僅介紹三種引用類型的 valueOf() 方法和 toString() 方法。
1、Boolean
創(chuàng)建一個Boolean類型的對象實(shí)例時,傳入的參數(shù)按轉(zhuǎn)換為Boolean類型值的規(guī)則確實(shí)是true還是false
(1)valueOf() :返回一個原始值 true 或者 false
let a = new Boolean(true); console.log(a.valueOf()); // true
(2)toString() :返回字符串 ‘true' 或者 'false'
let b = new Boolean(false); console.log(b.toString()); // "false"
2、Number
(1)valueOf() :返回對象的原始數(shù)值
let a = new Number(12); console.log(a.valueOf()); // 12
(2)toString() :返回相應(yīng)基數(shù)(進(jìn)制數(shù))的數(shù)值字符串
let b = new Number(123); console.log(b.toString()); // "123"
3、String
valueOf() 、toString() 和 toLocalString() 都繼承自 Object,均返回對象的原始字符串值
let a = new String('str'); console.log(a.valueOf()); // str console.log(a.toString()); // str console.log(a.toLocaleString()); // str
二、原始包裝類型的特點(diǎn)
1、原始值為什么可以調(diào)用一些方法
let s = "str"; console.log(s.slice(1)) // "tr"
如上代碼,第二行中訪問a時,是以讀模式訪問的,也就是要從內(nèi)存中讀取變量保存的值。
在以讀模式訪問字符串值得任何時候,后臺都會自動執(zhí)行以下三步:
(1)根據(jù)字符串值創(chuàng)建一個 String 類型的實(shí)例
(2)調(diào)用實(shí)例上的特定方法
(3)銷毀實(shí)例
即相當(dāng)于執(zhí)行了以下三行代碼:
// 創(chuàng)建String實(shí)例 let s = new String("str"); // 調(diào)用特定方法 s.slice(1) // 銷毀實(shí)例 s = null
這種行為則讓原始值擁有了對象的行為。
針對布爾值和數(shù)值,也會在后臺執(zhí)行相同的步驟。
2、引用類型和原始值包裝類型的區(qū)別
引用類型和原始值包裝類型的區(qū)別主要在于對象的生命周期:
- (1)通過new實(shí)例化引用類型后,得到的實(shí)例會在離開作用域時被銷毀
- (2)自動創(chuàng)建的原始值包裝對象則只會存在于訪問它的那行代碼執(zhí)行期間。(所以運(yùn)行時并不能給原始值添加屬性和方法)
3、原始包裝類型構(gòu)造函數(shù) 和 轉(zhuǎn)型函數(shù)
以Number為例:
- (1)如果直接調(diào)用 Number(),執(zhí)行的是 Number()轉(zhuǎn)型函數(shù),強(qiáng)制數(shù)值類型轉(zhuǎn)換
- (2)如果通過new 調(diào)用 Number(),執(zhí)行的是 Number() 構(gòu)造函數(shù),創(chuàng)建一個Number的實(shí)例
let a = Number(1); console.log(typeof a); // number let b = new Number(1); console.log(typeof b); // object
一個簡單的知識點(diǎn),主要自己之前學(xué)習(xí)太倉促,這些基礎(chǔ)知識點(diǎn)并沒有學(xué)習(xí)牢固,此復(fù)盤整理一下。
相關(guān)文章
JavaScript實(shí)現(xiàn)仿新浪微博大廳和騰訊微博首頁滾動特效源碼
最近看到朋友用JavaScript實(shí)現(xiàn)仿新浪微博大廳和未登錄騰訊微博首頁滾動效果,朋友使用jquery實(shí)現(xiàn)的,在網(wǎng)上看到有用js制作的也比較好,于是把我的內(nèi)容整理分享給大家,具體詳解請看本文2015-09-09JavaScript iframe 實(shí)現(xiàn)多窗口通信實(shí)例詳解
這篇文章主要為大家介紹了JavaScript iframe 實(shí)現(xiàn)多窗口通信實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10關(guān)于同時使用swiper和echarts遇到的問題及解決方法
這篇文章主要介紹了關(guān)于同時使用swiper和echarts遇到的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換
近期在練習(xí)或?qū)戫?xiàng)目時經(jīng)常會遇到時間格式的轉(zhuǎn)換問題,今天我就來總結(jié)一下,這篇文章主要給大家介紹了關(guān)于JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換,需要的朋友可以參考下2024-01-01小程序短信驗(yàn)證碼頁面實(shí)現(xiàn)demo
這篇文章主要為大家介紹了小程序短信驗(yàn)證碼頁實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11JavaScript實(shí)現(xiàn)圖片無縫滾動效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無縫滾動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07