概述定義

對象是JavaScript語言最主要的數據類型，三種原始類型的值——數值、字符串、布爾值——在一定條件下，也會自動轉為對象，也就是原始類型的“包裝對象”（wrapper）。

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

var v1 = new Number(123);var v2 = new String(’abc’);var v3 = new Boolean(true);typeof v1 // 'object'typeof v2 // 'object'typeof v3 // 'object'v1 === 123 // falsev2 === ’abc’ // falsev3 === true // false

上面代碼中，基于原始類型的值，生成了三個對應的包裝對象?？梢钥吹?，v1、v2、v3都是對象，且與對應的簡單類型值不相等。

包裝對象的設計目的，首先是使得“對象”這種類型可以覆蓋JavaScript所有的值，整門語言有一個通用的數據模型，其次是使得原始類型的值也有辦法調用自己的方法。

Number、String和Boolean這三個原生對象，如果不作為構造函數調用（即調用時不加new），而是作為普通函數調用，常常用于將任意類型的值轉為數值、字符串和布爾值。

// 字符串轉為數值Number(’123’) // 123// 數值轉為字符串String(123) // '123'// 數值轉為布爾值Boolean(123) // true

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

實例方法

三種包裝對象各自提供了許多實例方法。這里介紹兩種它們共同具有、從Object對象繼承的方法：valueOf()和toString()。

valueOf()

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

new Number(123).valueOf() // 123new 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'原始類型與實例對象的自動轉換

某些場合，原始類型的值會自動當作包裝對象調用，即調用包裝對象的屬性和方法。這時，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

自動轉換生成的包裝對象是只讀的，無法修改。所以，字符串無法添加新屬性。

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

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

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

自定義方法

除了原生的實例方法，包裝對象還可以自定義方法和屬性，供原始類型的值直接調用。

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

String.prototype.double = function () { return this.valueOf() + this.valueOf();};’abc’.double() // abcabcNumber.prototype.double = function () { return this.valueOf() + this.valueOf();};(123).double() // 246

上面代碼在String和Number這兩個對象的原型上面，分別自定義了一個方法，從而可以在所有實例對象上調用。注意，最后的123外面必須要加上圓括號，否則后面的點運算符（.）會被解釋成小數點。

Boolean 對象概述

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

var b = new Boolean(true);typeof b // 'object'b.valueOf() // true

上面代碼的變量b是一個Boolean對象的實例，它的類型是對象，值為布爾值true。

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

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

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

Boolean 函數的類型轉換作用

Boolean對象除了可以作為構造函數，還可以單獨使用，將任意值轉為布爾值。這時Boolean就是一個單純的工具方法。

Boolean(undefined) // falseBoolean(null) // falseBoolean(0) // falseBoolean(’’) // falseBoolean(NaN) // falseBoolean(1) // trueBoolean(’false’) // trueBoolean([]) // trueBoolean({}) // trueBoolean(function () {}) // trueBoolean(/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’);} // trueif (Boolean(null)) { console.log(’true’);} // 無輸出if (new Boolean(null)) { console.log(’true’);} // trueNumber 對象概述

Number對象是數值對應的包裝對象，可以作為構造函數使用，也可以作為工具函數使用。

作為構造函數時，它用于生成值為數值的對象。

var n = new Number(1);typeof n // 'object'

上面代碼中，Number對象作為構造函數使用，返回一個值為1的對象。

作為工具函數時，它可以將任何類型的值轉為數值。

Number(true) // 1靜態屬性

Number對象擁有以下一些靜態屬性（即直接定義在Number對象上的屬性，而不是定義在實例上的屬性）。

Number.POSITIVE_INFINITY：正的無限，指向Infinity。 Number.NEGATIVE_INFINITY：負的無限，指向-Infinity。 Number.NaN：表示非數值，指向NaN。 Number.MIN_VALUE：表示最小的正數（即最接近0的正數，在64位浮點數體系中為5e-324），相應的，最接近0的負數為-Number.MIN_VALUE。 Number.MAX_SAFE_INTEGER：表示能夠精確表示的最大整數，即9007199254740991。 Number.MIN_SAFE_INTEGER：表示能夠精確表示的最小整數，即-9007199254740991。

Number.POSITIVE_INFINITY // InfinityNumber.NEGATIVE_INFINITY // -InfinityNumber.NaN // NaNNumber.MAX_VALUE // 1.7976931348623157e+308Number.MAX_VALUE < Infinity // trueNumber.MIN_VALUE // 5e-324Number.MIN_VALUE > 0 // trueNumber.MAX_SAFE_INTEGER // 9007199254740991Number.MIN_SAFE_INTEGER // -9007199254740991實例方法

Number對象有4個實例方法，都跟將數值轉換成指定格式有關。

Number.prototype.toString()

Number對象部署了自己的toString方法，用來將一個數值轉為字符串形式。

(10).toString() // '10'

toString方法可以接受一個參數，表示輸出的進制。如果省略這個參數，默認將數值先轉為十進制，再輸出字符串；否則，就根據參數指定的進制，將一個數字轉化成某個進制的字符串。

(10).toString(2) // '1010'(10).toString(8) // '12'(10).toString(16) // 'a'

上面代碼中，10一定要放在括號里，這樣表明后面的點表示調用對象屬性。如果不加括號，這個點會被 JavaScript 引擎解釋成小數點，從而報錯。

10.toString(2)// SyntaxError: Unexpected token ILLEGAL

只要能夠讓 JavaScript 引擎不混淆小數點和對象的點運算符，各種寫法都能用。除了為10加上括號，還可以在10后面加兩個點，JavaScript 會把第一個點理解成小數點（即10.0），把第二個點理解成調用對象屬性，從而得到正確結果。

10..toString(2) // '1010'// 其他方法還包括10 .toString(2) // '1010'10.0.toString(2) // '1010'

這實際上意味著，可以直接對一個小數使用toString方法。

10.5.toString() // '10.5'10.5.toString(2) // '1010.1'10.5.toString(8) // '12.4'10.5.toString(16) // 'a.8'

通過方括號運算符也可以調用toString方法。

10[’toString’](2) // '1010'

toString方法只能將十進制的數，轉為其他進制的字符串。如果要將其他進制的數，轉回十進制，需要使用parseInt方法。

Number.prototype.toFixed()

toFixed()方法先將一個數轉為指定位數的小數，然后返回這個小數對應的字符串。

(10).toFixed(2) // '10.00'10.005.toFixed(2) // '10.01'

上面代碼中，10和10.005先轉成2位小數，然后轉成字符串。其中10必須放在括號里，否則后面的點會被處理成小數點。

toFixed()方法的參數為小數位數，有效范圍為0到20，超出這個范圍將拋出RangeError錯誤。

由于浮點數的原因，小數5的四舍五入是不確定的，使用的時候必須小心。

(10.055).toFixed(2) // 10.05(10.005).toFixed(2) // 10.01

Number.prototype.toExponential()

toExponential方法用于將一個數轉為科學計數法形式。

(10).toExponential() // '1e+1'(10).toExponential(1) // '1.0e+1'(10).toExponential(2) // '1.00e+1'(1234).toExponential() // '1.234e+3'(1234).toExponential(1) // '1.2e+3'(1234).toExponential(2) // '1.23e+3'

toExponential方法的參數是小數點后有效數字的位數，范圍為0到20，超出這個范圍，會拋出一個RangeError錯誤。

Number.prototype.toPrecision()

toPrecision方法用于將一個數轉為指定位數的有效數字。

(12.34).toPrecision(1) // '1e+1'(12.34).toPrecision(2) // '12'(12.34).toPrecision(3) // '12.3'(12.34).toPrecision(4) // '12.34'(12.34).toPrecision(5) // '12.340'

toPrecision方法的參數為有效數字的位數，范圍是1到21，超出這個范圍會拋出RangeError錯誤。

toPrecision方法用于四舍五入時不太可靠，跟浮點數不是精確儲存有關。

(12.35).toPrecision(3) // '12.3'(12.25).toPrecision(3) // '12.3'(12.15).toPrecision(3) // '12.2'(12.45).toPrecision(3) // '12.4'自定義方法

與其他對象一樣，Number.prototype對象上面可以自定義方法，被Number的實例繼承。

Number.prototype.add = function (x) { return this + x;};8[’add’](2) // 10

上面代碼為Number對象實例定義了一個add方法。在數值上調用某個方法，數值會自動轉為Number的實例對象，所以就可以調用add方法了。由于add方法返回的還是數值，所以可以鏈式運算。

Number.prototype.subtract = function (x) { return this - x;};(8).add(2).subtract(4) // 6

我們還可以部署更復雜的方法。

Number.prototype.iterate = function () { var result = []; for (var i = 0; i <= this; i++) { result.push(i); } return result;};(8).iterate() // [0, 1, 2, 3, 4, 5, 6, 7, 8]

上面代碼在Number對象的原型上部署了iterate方法，將一個數值自動遍歷為一個數組。

注意，數值的自定義方法，只能定義在它的原型對象Number.prototype上面，數值本身是無法自定義屬性的。

var n = 1;n.x = 1;n.x // undefined

上面代碼中，n是一個原始類型的數值。直接在它上面新增一個屬性x，不會報錯，但毫無作用，總是返回undefined。這是因為一旦被調用屬性，n就自動轉為Number的實例對象，調用結束后，該對象自動銷毀。所以，下一次調用n的屬性時，實際取到的是另一個對象，屬性x當然就讀不出來。

String 對象概述

String對象是 JavaScript 原生提供的三個包裝對象之一，用來生成字符串對象。

var s1 = ’abc’;var s2 = new String(’abc’);typeof s1 // 'string'typeof s2 // 'object's2.valueOf() // 'abc'

字符串對象是一個類似數組的對象（很像數組，但不是數組）。

new String(’abc’)// String {0: 'a', 1: 'b', 2: 'c', length: 3}(new String(’abc’))[1] // 'b'

上面代碼中，字符串abc對應的字符串對象，有數值鍵（0、1、2）和length屬性，所以可以像數組那樣取值。

除了用作構造函數，String對象還可以當作工具方法使用，將任意類型的值轉為字符串。

String(true) // 'true'String(5) // '5'靜態方法

String.fromCharCode()

String對象提供的靜態方法（即定義在對象本身，而不是定義在對象實例的方法），主要是String.fromCharCode()。該方法的參數是一個或多個數值，代表 Unicode 碼點，返回值是這些碼點組成的字符串。

String.fromCharCode() // ''String.fromCharCode(97) // 'a'String.fromCharCode(104, 101, 108, 108, 111) // 'hello'

上面代碼中，String.fromCharCode方法的參數為空，就返回空字符串；否則，返回參數對應的 Unicode 字符串。

注意，該方法不支持 Unicode 碼點大于0xFFFF的字符，即傳入的參數不能大于0xFFFF（即十進制的 65535）。

String.fromCharCode(0x20BB7) // 'ஷ'String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)// true

上面代碼中，String.fromCharCode參數0x20BB7大于0xFFFF，導致返回結果出錯。0x20BB7對應的字符是漢字

以上就是淺談JS包裝對象的詳細內容，更多關于JS包裝對象的資料請關注好吧啦網其它相關文章！