JavaScript 包裝對象和Boolean對象

目錄

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

所謂“包裝對象”，就是分別與數(shù)值、字符串、布爾值相對應的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設計包裝對象的最大目的，首先是使得JavaScript的“對象”涵蓋所有的值。其次，使得原始類型的值可以方便地調用特定方法。

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

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

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

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

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

valueOf()

valueOf方法返回包裝對象實例對應的原始類型的值。

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

toString()

toString方法返回實例對應的字符串形式。

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

原始類型的值，可以自動當作對象調用，即調用各種對象的方法和參數(shù)。這時，JavaScript引擎會自動將原始類型的值轉為包裝對象，在使用后立刻銷毀。

比如，字符串可以調用length屬性，返回字符串的長度。

'abc'.length // 3

上面代碼中，abc是一個字符串，本身不是對象，不能調用length屬性。JavaScript引擎自動將其轉為包裝對象，在這個對象上調用length屬性。調用結束后，這個臨時對象就會被銷毀。這就叫原始類型的自動轉換。

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的包裝對象有每個位置的值、有length屬性、還有一個內部屬性[[PrimitiveValue]]保存字符串的原始值。這個[[PrimitiveValue]]內部屬性，外部是無法調用，僅供ValueOf或toString這樣的方法內部調用。

這個臨時對象是只讀的，無法修改。所以，字符串無法添加新屬性。

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

上面代碼為字符串s添加了一個x屬性，結果無效，總是返回undefined。

另一方面，調用結束后，臨時對象會自動銷毀。這意味著，下一次調用字符串的屬性時，實際是調用一個新生成的對象，而不是上一次調用時生成的那個對象，所以取不到賦值在上一個對象的屬性。如果想要為字符串添加屬性，只有在它的原型對象String.prototype上定義（參見《面向對象編程》一章）。

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

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

上面代碼表示，字符串abc的charAt方法，實際上就是定義在String對象實例上的方法（關于prototype對象的介紹參見《面向對象編程》一章）。

如果包裝對象與原始類型值進行混合運算，包裝對象會轉化為原始類型（實際是調用自身的valueOf方法）。

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

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

比如，我們可以新增一個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ù)點。

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

var s = 'abc';

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

上面代碼直接對字符串abc添加屬性，結果無效。主要原因是上面說的，這里的包裝對象是自動生成的，賦值后自動銷毀，所以最后一行實際上調用的是一個新的包裝對象。

概述

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

var b = new Boolean(true);

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

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

var b = true;

注意，false對應的包裝對象實例，布爾運算結果也是true。

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

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

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

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

Boolean對象除了可以作為構造函數(shù)，還可以單獨使用，將任意值轉為布爾值。這時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的情況，都值得認真記住。

使用雙重的否運算符（!）也可以將任意值轉為對應的布爾值。

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

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

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