JavaScript 包裝對象和Boolean對象

包裝對象

定義

在JavaScript中，“一切皆對象”，數(shù)組和函數(shù)本質(zhì)上都是對象，就連三種原始類型的值——數(shù)值、字符串、布爾值——在一定條件下，也會自動轉(zhuǎn)為對象，也就是原始類型的“包裝對象”。

所謂“包裝對象”，就是分別與數(shù)值、字符串、布爾值相對應(yīng)的Number、String、Boolean三個原生對象。這三個原生對象可以把原始類型的值變成（包裝成）對象。

var v1 = new Number(123);
var v2 = new String("abc");
var v3 = new Boolean(true);

上面代碼根據(jù)原始類型的值，生成了三個對象，與原始值的類型不同。這用typeof運算符就可以看出來。

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"

v1 === 123 // false
v2 === "abc" // false
v3 === true // false

JavaScript設(shè)計包裝對象的最大目的，首先是使得JavaScript的“對象”涵蓋所有的值。其次，使得原始類型的值可以方便地調(diào)用特定方法。

包裝對象的構(gòu)造函數(shù)

Number、String和Boolean這三個原生對象，既可以當(dāng)作構(gòu)造函數(shù)使用（即加上new關(guān)鍵字，生成包裝對象實例），也可以當(dāng)作工具方法使用（即不加new關(guān)鍵字，直接調(diào)用），這相當(dāng)于生成實例后再調(diào)用valueOf方法，常常用于將任意類型的值轉(zhuǎn)為某種原始類型的值。

Number(123) // 123

String("abc") // "abc"

Boolean(true) // true

工具方法的詳細(xì)介紹參見第二章的《數(shù)據(jù)類型轉(zhuǎn)換》一節(jié)。

包裝對象實例的方法

包裝對象實例可以使用Object對象提供的原生方法，主要是 valueOf 方法和 toString 方法。

（1）valueOf方法

valueOf方法返回包裝對象實例對應(yīng)的原始類型的值。

new Number(123).valueOf()
// 123

new String("abc").valueOf()
// "abc"

new Boolean("true").valueOf()
// true

（2）toString方法

toString方法返回該實例對應(yīng)的原始類型值的字符串形式。

new Number(123).toString()
// "123"

new String("abc").toString()
// "abc"

new Boolean("true").toString()
// "true"

原始類型的自動轉(zhuǎn)換

原始類型可以自動調(diào)用定義在包裝對象上的方法和屬性。比如String對象的實例有一個length屬性，返回字符串的長度。

var v = new String("abc");
v.length // 3

所有原始類型的字符串，都可以直接使用這個length屬性。

"abc".length // 3

上面代碼對字符串a(chǎn)bc調(diào)用length屬性，實際上是將“字符串”自動轉(zhuǎn)為String對象的實例，再在其上調(diào)用length屬性。這就叫原始類型的自動轉(zhuǎn)換。

abc是一個字符串，屬于原始類型，本身不能調(diào)用任何方法和屬性。但當(dāng)對abc調(diào)用length屬性時，JavaScript引擎自動將abc轉(zhuǎn)化為一個包裝對象實例，然后再對這個實例調(diào)用length屬性，在得到返回值后，再自動銷毀這個臨時生成的包裝對象實例。

這種原始類型值可以直接調(diào)用的方法還有很多（詳見后文對各包裝對象的介紹），除了前面介紹過的valueOf和stringOf方法，還包括三個包裝對象各自定義在實例上的方法。。

'abc'.charAt === String.prototype.charAt
// true

上面代碼表示，字符串a(chǎn)bc的charAt方法，實際上就是定義在String對象實例上的方法（關(guān)于prototype對象的介紹參見《面向?qū)ο缶幊獭芬徽拢?/p>

如果包裝對象與原始類型值進(jìn)行混合運算，包裝對象會轉(zhuǎn)化為原始類型（實際是調(diào)用自身的valueOf方法）。

new Number(123) + 123
// 246

new String("abc") + "abc"
// "abcabc"

自定義方法

三種包裝對象還可以在原型上添加自定義方法和屬性，供原始類型的值直接調(diào)用。

比如，我們可以新增一個double方法，使得字符串和數(shù)字翻倍。

String.prototype.double = function (){
    return this.valueOf() + this.valueOf();
};

"abc".double()
// abcabc

Number.prototype.double = function (){
    return this.valueOf() + this.valueOf();
};

(123).double()
// 246

上面代碼在123外面必須要加上圓括號，否則后面的點運算符（.）會被解釋成小數(shù)點。

但是，這種自定義方法和屬性的機(jī)制，只能定義在包裝對象的原型上，如果直接對原始類型的變量添加屬性，則無效。

var s = "abc";

s.p = 123;
s.p // undefined

上面代碼直接對支付串a(chǎn)bc添加屬性，結(jié)果無效。

Boolean對象

概述

Boolean對象是JavaScript的三個包裝對象之一。作為構(gòu)造函數(shù)，它主要用于生成布爾值的包裝對象的實例。

var b = new Boolean(true);

typeof b // "object"
b.valueOf() // true

上面代碼的變量b是一個Boolean對象的實例，它的類型是對象，值為布爾值true。這種寫法太繁瑣，幾乎無人使用，直接對變量賦值更簡單清晰。

var b = true;

Boolean實例對象的布爾值

特別要注意的是，所有對象的布爾運算結(jié)果都是true。因此，false對應(yīng)的包裝對象實例，布爾運算結(jié)果也是true。

if (new Boolean(false)) {
    console.log("true"); 
} // true

if (new Boolean(false).valueOf()) {
    console.log("true"); 
} // 無輸出

上面代碼的第一個例子之所以得到true，是因為false對應(yīng)的包裝對象實例是一個對象，進(jìn)行邏輯運算時，被自動轉(zhuǎn)化成布爾值true（所有對象對應(yīng)的布爾值都是true）。而實例的valueOf方法，則返回實例對應(yīng)的原始類型值，本例為false。

Boolean函數(shù)的類型轉(zhuǎn)換作用

Boolean對象除了可以作為構(gòu)造函數(shù)，還可以單獨使用，將任意值轉(zhuǎn)為布爾值。這時Boolean就是一個單純的工具方法。

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false
Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function(){}) // true
Boolean(/foo/) // true

上面代碼中幾種得到true的情況，都值得認(rèn)真記住。

使用not運算符（!）也可以達(dá)到同樣效果。

!!undefined // false
!!null // false
!!0 // false
!!'' // false
!!NaN // false
!!1 // true
!!'false' // true
!![] // true
!!{} // true
!!function(){} // true
!!/foo/ // true

綜上所述，如果要獲得一個變量對應(yīng)的布爾值，有多種寫法。

var a = "hello world";

new Boolean(a).valueOf() // true
Boolean(a) // true
!!a // true

最后，對于一些特殊值，Boolean對象前面加不加new，會得到完全相反的結(jié)果，必須小心。

if (Boolean(false)) 
        console.log('true'); // 無輸出

if (new Boolean(false))
        console.log('true'); // true

if (Boolean(null)) 
        console.log('true'); // 無輸出

if (new Boolean(null))
        console.log('true'); // true