JavaScript 包裝對(duì)象和Boolean對(duì)象

目錄

有人說(shuō)，JavaScript語(yǔ)言“一切皆對(duì)象”，數(shù)組和函數(shù)本質(zhì)上都是對(duì)象，就連三種原始類型的值——數(shù)值、字符串、布爾值——在一定條件下，也會(huì)自動(dòng)轉(zhuǎn)為對(duì)象，也就是原始類型的“包裝對(duì)象”。

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

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

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

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

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

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

Number、String和Boolean如果不作為構(gòu)造函數(shù)調(diào)用（即調(diào)用時(shí)不加new），常常用于將任意類型的值轉(zhuǎn)為數(shù)值、字符串和布爾值。

Number(123) // 123
String('abc') // "abc"
Boolean(true) // true

上面這種數(shù)據(jù)類型的轉(zhuǎn)換，詳見《數(shù)據(jù)類型轉(zhuǎn)換》一節(jié)。

總之，這三個(gè)對(duì)象作為構(gòu)造函數(shù)使用（帶有new）時(shí)，可以將原始類型的值轉(zhuǎn)為對(duì)象；作為普通函數(shù)使用時(shí)（不帶有new），可以將任意類型的值，轉(zhuǎn)為原始類型的值。

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

valueOf()

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

new Number(123).valueOf()  // 123
new String("abc").valueOf() // "abc"
new Boolean("true").valueOf() // true

toString()

toString方法返回實(shí)例對(duì)應(yīng)的字符串形式。

new Number(123).toString() // "123"
new String("abc").toString() // "abc"
new Boolean("true").toString() // "true"

原始類型的值，可以自動(dòng)當(dāng)作對(duì)象調(diào)用，即調(diào)用各種對(duì)象的方法和參數(shù)。這時(shí)，JavaScript引擎會(huì)自動(dòng)將原始類型的值轉(zhuǎn)為包裝對(duì)象，在使用后立刻銷毀。

比如，字符串可以調(diào)用length屬性，返回字符串的長(zhǎng)度。

'abc'.length // 3

上面代碼中，abc是一個(gè)字符串，本身不是對(duì)象，不能調(diào)用length屬性。JavaScript引擎自動(dòng)將其轉(zhuǎn)為包裝對(duì)象，在這個(gè)對(duì)象上調(diào)用length屬性。調(diào)用結(jié)束后，這個(gè)臨時(shí)對(duì)象就會(huì)被銷毀。這就叫原始類型的自動(dòng)轉(zhuǎn)換。

var str = 'abc';
str.length // 3

// 等同于
var strObj = new String(str)
// String {
//   0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

上面代碼中，字符串abc的包裝對(duì)象有每個(gè)位置的值、有length屬性、還有一個(gè)內(nèi)部屬性[[PrimitiveValue]]保存字符串的原始值。這個(gè)[[PrimitiveValue]]內(nèi)部屬性，外部是無(wú)法調(diào)用，僅供ValueOf或toString這樣的方法內(nèi)部調(diào)用。

這個(gè)臨時(shí)對(duì)象是只讀的，無(wú)法修改。所以，字符串無(wú)法添加新屬性。

var s = 'Hello World';
s.x = 123;
s.x // undefined

上面代碼為字符串s添加了一個(gè)x屬性，結(jié)果無(wú)效，總是返回undefined。

另一方面，調(diào)用結(jié)束后，臨時(shí)對(duì)象會(huì)自動(dòng)銷毀。這意味著，下一次調(diào)用字符串的屬性時(shí)，實(shí)際是調(diào)用一個(gè)新生成的對(duì)象，而不是上一次調(diào)用時(shí)生成的那個(gè)對(duì)象，所以取不到賦值在上一個(gè)對(duì)象的屬性。如果想要為字符串添加屬性，只有在它的原型對(duì)象String.prototype上定義（參見《面向?qū)ο缶幊獭芬徽拢?/p>

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

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

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

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

new Number(123) + 123 // 246
new String('abc') + 'abc' // "abcabc"

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

比如，我們可以新增一個(gè)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外面必須要加上圓括號(hào)，否則后面的點(diǎn)運(yùn)算符（.）會(huì)被解釋成小數(shù)點(diǎn)。

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

var s = 'abc';

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

上面代碼直接對(duì)字符串abc添加屬性，結(jié)果無(wú)效。主要原因是上面說(shuō)的，這里的包裝對(duì)象是自動(dòng)生成的，賦值后自動(dòng)銷毀，所以最后一行實(shí)際上調(diào)用的是一個(gè)新的包裝對(duì)象。

概述

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

var b = new Boolean(true);

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

上面代碼的變量b是一個(gè)Boolean對(duì)象的實(shí)例，它的類型是對(duì)象，值為布爾值true。這種寫法太繁瑣，幾乎無(wú)人使用，直接對(duì)變量賦值更簡(jiǎn)單清晰。

var b = true;

注意，false對(duì)應(yīng)的包裝對(duì)象實(shí)例，布爾運(yùn)算結(jié)果也是true。

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

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

上面代碼的第一個(gè)例子之所以得到true，是因?yàn)?code class="highlighter-rouge">false對(duì)應(yīng)的包裝對(duì)象實(shí)例是一個(gè)對(duì)象，進(jìn)行邏輯運(yùn)算時(shí)，被自動(dòng)轉(zhuǎn)化成布爾值true（因?yàn)樗袑?duì)象對(duì)應(yīng)的布爾值都是true）。而實(shí)例的valueOf方法，則返回實(shí)例對(duì)應(yīng)的原始值，本例為false。

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

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

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)真記住。

使用雙重的否運(yùn)算符（!）也可以將任意值轉(zhuǎn)為對(duì)應(yīng)的布爾值。

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

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

if (Boolean(false)) {
  console.log('true');
} // 無(wú)輸出

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

if (Boolean(null)) {
  console.log('true');
} // 無(wú)輸出

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