JavaScript 你不知道的基本包裝類型

xingpingz 發(fā)布于2019-08-20 10:42 / 3259人閱讀

摘要：你不知道的基本包裝類型聲明本文的大部分內(nèi)容參考自高級(jí)程序設(shè)計(jì)第三版中文版，中間夾雜一些自己閱讀這部分內(nèi)容時(shí)的思路。而且，上面的步驟同樣適用于類型的類型對(duì)應(yīng)的布爾值和數(shù)字值。

JavaScript 你不知道的基本包裝類型

聲明：本文的大部分內(nèi)容參考自《JavaScript 高級(jí)程序設(shè)計(jì)（第三版）》（中文版 P.118），中間夾雜一些自己閱讀這部分內(nèi)容時(shí)的思路。

JavaScript 中共有 6 種基本數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、Symbol (new in ES 6) ！

舉例子入門

基本數(shù)據(jù)類型的值不是對(duì)象，因而從邏輯上講它們不應(yīng)該有方法或者屬性，然而事實(shí)并不是我們所想的那樣，看法寶：

var str = "hello world";
str.length;              // 11
str.toUpperCase();       // HELLO WORLD

你對(duì)上面的現(xiàn)象有疑問嗎？沒有的話，可以關(guān)掉這個(gè)頁面了。

引入基本包裝類型

為了便于操作基本數(shù)據(jù)類型的值，JavaScript 中的原始數(shù)據(jù)類型的值會(huì)在后臺(tái)隱式地被包裝為對(duì)象，從而引出了基本包裝類型（primitive wrapper type）這個(gè)概念。

【書中原話】每當(dāng)讀取一個(gè)基本類型的值的時(shí)候，后臺(tái)就創(chuàng)建一個(gè)對(duì)應(yīng)的基本包裝類型的對(duì)象，從而讓我們能夠調(diào)用一些方法來操作這些數(shù)據(jù)。

這也是為什么書中會(huì)提到這句話，ECMAScript 還提供了3個(gè)特殊的引用類型：Boolean、Number、String。哦，不對(duì)了，現(xiàn)在不是又出現(xiàn)了一種新的數(shù)據(jù)類型嗎？所以，這句話應(yīng)該改為：ECMAScript 還提供了4個(gè)特殊的引用類型：Boolean、Number、String、Symbol。

除了 null 和 undefined，所有的原始值都有等價(jià)的、由對(duì)象包裝原始值的形式表達(dá)，取而代之，null 和 undefined 常被當(dāng)作一個(gè)全局對(duì)象的全局屬性來使用。

window.null;          // undefined
window.undefined;     // undefined
null == undefined;    // true
null === undefined;   // false

繼續(xù)剛開始的那個(gè)例子

為了方便，就把前面的代碼直接挪過來了。

var str = "hello world";
str.length;              // 11
str.toUpperCase();       // HELLO WORLD

我們看到的代碼是上面的樣子，其實(shí)后臺(tái)會(huì)自動(dòng)完成下列的處理：

執(zhí)行到第二行時(shí)：

創(chuàng)建 String 類型的一個(gè)實(shí)例；

在實(shí)例上調(diào)用指定的屬性；

銷毀這個(gè)實(shí)例；

執(zhí)行到第三行時(shí)：

創(chuàng)建 String 類型的一個(gè)實(shí)例；

在實(shí)例上調(diào)用指定的方法；

銷毀這個(gè)實(shí)例；

可以將上面的步驟想象成下列 ECMAScript 代碼：

// 執(zhí)行到第二行時(shí)
var str = new String("hello world");
str.length;
str = null;

// 執(zhí)行到第三行時(shí)
var str = new String("hello world");
str.toUpperCase();
str = null;

經(jīng)過此番處理，基本的字符串值就變得跟對(duì)象一樣啦。而且，上面的步驟同樣適用于 Boolean 類型的 Number 類型對(duì)應(yīng)的布爾值和數(shù)字值。

嘿嘿，啰嗦了這么多，搞懂了嗎？

引用類型與基本包裝類型的區(qū)別

引用類型與基本包裝類型的主要區(qū)別就是對(duì)象的生存期。
使用 new 操作符創(chuàng)建的引用類型的實(shí)例，在執(zhí)行流離開當(dāng)前作用域之前，會(huì)一直保存在堆內(nèi)存中。而后臺(tái)自動(dòng)創(chuàng)建的基本包裝類型的對(duì)象，則只存在一行代碼的執(zhí)行瞬間，然后立即被銷毀。這意味著我們不能為基本類型的值添加屬性和方法。

看了上面的原理，再來看例子：

var str = "some text";
str.color = "red";
console.log(str.color);   // undefined

在此，第二行表面上看是為 str 添加了 color 屬性，但是仔細(xì)回想上面的后臺(tái)執(zhí)行的那 3 個(gè)步驟，會(huì)發(fā)現(xiàn)，第二行創(chuàng)建的 String 對(duì)象在添加了 color 屬性后，被銷毀了。執(zhí)行到第三行時(shí)，第三行代碼又創(chuàng)建了自己的 String 對(duì)象，然而這個(gè)對(duì)象沒有 color 屬性。一切都顯得那么清晰。

為了與上面的例子形成對(duì)比，我們顯式地創(chuàng)建基本包裝類型的對(duì)象，代碼如下：

var str = new String("some text");
str.color = "red";
console.log(str.color);     // red

書中有警告：除非絕對(duì)必要，否則不要顯式地創(chuàng)建基本包裝類型的對(duì)象，因?yàn)檫@種做法很容易讓人分不清自己是在處理基本類型還是引用類型的值。

var value = "25";

var number = Number(value);   // 轉(zhuǎn)型函數(shù)
console.log(number);          // 25

var obj = new Number(value);  // 構(gòu)造函數(shù)
console.log(typeof obj);      // object 
console.log(obj);             // Number {[[PrimitiveValue]]: 25}

Boolean 引用類型

書中很嚴(yán)肅地說：理解基本類型的布爾值與 Boolean 對(duì)象之間的區(qū)別非常重要------當(dāng)然，我們的建議是永遠(yuǎn)不要使用 Boolean 對(duì)象。

吐槽一下，segmentfault 好像不讓上傳本地的無聊表情包，所以只好外鏈過來了。喔草，我剛剛說了什么。。。

Number 引用類型

【MDN】傳送門---Number

var num = 1.2345678;

num.toFixed(2);        // 1.23
num.toPrecision(2);    // 1.2
num.toExponential(2);  // 1.23e+0

String 引用類型

【MDN】傳送門---String

這個(gè)家伙的方法就很多了。

charAt()

concat()

slice()

indexOf()

trim()

toUpperCase()

toLowerCase()

match()

search()

replace()

.........

自己進(jìn)門里面探索去吧！

Symbol 引用類型（ES 6）

【MDN】傳送門---Symbol

額，這個(gè)還沒怎么用過呢。但是這里還是有一點(diǎn)需要注意下：

var sym = new Symbol();   // TypeError: Symbol is not a constructor

為什么會(huì)這樣呢？這是因?yàn)?strong>圍繞原始數(shù)據(jù)類型創(chuàng)建一個(gè)顯式包裝器對(duì)象從 ECMAScript 6 開始不再被支持。然而，現(xiàn)有的原始包裝器對(duì)象，如 new Boolean、new String 以及 new Number 因?yàn)檫z留原因仍可被創(chuàng)建。

好了，就這樣結(jié)束吧！