概述

定義

對(duì)象是JavaScript語(yǔ)言最主要的數(shù)據(jù)類型，三種原始類型的值——數(shù)值、字符串、布爾值——在一定條件下，也會(huì)自動(dòng)轉(zhuǎn)為對(duì)象，也就是原始類型的“包裝對(duì)象”（wrapper）。

所謂“包裝對(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);

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

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

上面代碼中，基于原始類型的值，生成了三個(gè)對(duì)應(yīng)的包裝對(duì)象。可以看到，v1、v2、v3都是對(duì)象，且與對(duì)應(yīng)的簡(jiǎn)單類型值不相等。

包裝對(duì)象的設(shè)計(jì)目的，首先是使得“對(duì)象”這種類型可以覆蓋JavaScript所有的值，整門語(yǔ)言有一個(gè)通用的數(shù)據(jù)模型，其次是使得原始類型的值也有辦法調(diào)用自己的方法。

Number、String和Boolean這三個(gè)原生對(duì)象，如果不作為構(gòu)造函數(shù)調(diào)用（即調(diào)用時(shí)不加new），而是作為普通函數(shù)調(diào)用，常常用于將任意類型的值轉(zhuǎn)為數(shù)值、字符串和布爾值。

// 字符串轉(zhuǎn)為數(shù)值
Number('123') // 123

// 數(shù)值轉(zhuǎn)為字符串
String(123) // "123"

// 數(shù)值轉(zhuǎn)為布爾值
Boolean(123) // true

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

實(shí)例方法

三種包裝對(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()方法返回對(duì)應(yīng)的字符串形式。

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

原始類型與實(shí)例對(duì)象的自動(dòng)轉(zhuǎn)換

某些場(chǎng)合，原始類型的值會(huì)自動(dòng)當(dāng)作包裝對(duì)象調(diào)用，即調(diào)用包裝對(duì)象的屬性和方法。這時(shí)，JavaScript 引擎會(huì)自動(dòng)將原始類型的值轉(zhuǎn)為包裝對(duì)象實(shí)例，并在使用后立刻銷毀實(shí)例。

比如，字符串可以調(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ì)被銷毀。這就叫原始類型與實(shí)例對(duì)象的自動(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

自動(dòng)轉(zhuǎn)換生成的包裝對(duì)象是只讀的，無(wú)法修改。所以，字符串無(wú)法添加新屬性。

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

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

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

自定義方法

除了原生的實(shí)例方法，包裝對(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

上面代碼在String和Number這兩個(gè)對(duì)象的原型上面，分別自定義了一個(gè)方法，從而可以在所有實(shí)例對(duì)象上調(diào)用。注意，最后的123外面必須要加上圓括號(hào)，否則后面的點(diǎn)運(yùn)算符（.）會(huì)被解釋成小數(shù)點(diǎn)。

Boolean 對(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。

注意，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)閒alse對(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

Number 對(duì)象

概述

Number對(duì)象是數(shù)值對(duì)應(yīng)的包裝對(duì)象，可以作為構(gòu)造函數(shù)使用，也可以作為工具函數(shù)使用。

作為構(gòu)造函數(shù)時(shí)，它用于生成值為數(shù)值的對(duì)象。

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

上面代碼中，Number對(duì)象作為構(gòu)造函數(shù)使用，返回一個(gè)值為1的對(duì)象。

作為工具函數(shù)時(shí)，它可以將任何類型的值轉(zhuǎn)為數(shù)值。

Number(true) // 1

靜態(tài)屬性

Number對(duì)象擁有以下一些靜態(tài)屬性（即直接定義在Number對(duì)象上的屬性，而不是定義在實(shí)例上的屬性）。

• Number.POSITIVE_INFINITY：正的無(wú)限，指向Infinity。
• Number.NEGATIVE_INFINITY：負(fù)的無(wú)限，指向-Infinity。
• Number.NaN：表示非數(shù)值，指向NaN。
• Number.MIN_VALUE：表示最小的正數(shù)（即最接近0的正數(shù)，在64位浮點(diǎn)數(shù)體系中為5e-324），相應(yīng)的，最接近0的負(fù)數(shù)為-Number.MIN_VALUE。
• Number.MAX_SAFE_INTEGER：表示能夠精確表示的最大整數(shù)，即9007199254740991。
• Number.MIN_SAFE_INTEGER：表示能夠精確表示的最小整數(shù)，即-9007199254740991。

Number.POSITIVE_INFINITY // Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MAX_VALUE < Infinity // true

Number.MIN_VALUE // 5e-324
Number.MIN_VALUE > 0 // true

Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

實(shí)例方法

Number對(duì)象有4個(gè)實(shí)例方法，都跟將數(shù)值轉(zhuǎn)換成指定格式有關(guān)。

Number.prototype.toString()

Number對(duì)象部署了自己的toString方法，用來(lái)將一個(gè)數(shù)值轉(zhuǎn)為字符串形式。

(10).toString() // "10"

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

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

上面代碼中，10一定要放在括號(hào)里，這樣表明后面的點(diǎn)表示調(diào)用對(duì)象屬性。如果不加括號(hào)，這個(gè)點(diǎn)會(huì)被 JavaScript 引擎解釋成小數(shù)點(diǎn)，從而報(bào)錯(cuò)。

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

只要能夠讓 JavaScript 引擎不混淆小數(shù)點(diǎn)和對(duì)象的點(diǎn)運(yùn)算符，各種寫法都能用。除了為10加上括號(hào)，還可以在10后面加兩個(gè)點(diǎn)，JavaScript 會(huì)把第一個(gè)點(diǎn)理解成小數(shù)點(diǎn)（即10.0），把第二個(gè)點(diǎn)理解成調(diào)用對(duì)象屬性，從而得到正確結(jié)果。

10..toString(2) // "1010"

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

這實(shí)際上意味著，可以直接對(duì)一個(gè)小數(shù)使用toString方法。

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

通過(guò)方括號(hào)運(yùn)算符也可以調(diào)用toString方法。

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

toString方法只能將十進(jìn)制的數(shù)，轉(zhuǎn)為其他進(jìn)制的字符串。如果要將其他進(jìn)制的數(shù)，轉(zhuǎn)回十進(jìn)制，需要使用parseInt方法。

Number.prototype.toFixed()

toFixed()方法先將一個(gè)數(shù)轉(zhuǎn)為指定位數(shù)的小數(shù)，然后返回這個(gè)小數(shù)對(duì)應(yīng)的字符串。

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

上面代碼中，10和10.005先轉(zhuǎn)成2位小數(shù)，然后轉(zhuǎn)成字符串。其中10必須放在括號(hào)里，否則后面的點(diǎn)會(huì)被處理成小數(shù)點(diǎn)。

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

由于浮點(diǎn)數(shù)的原因，小數(shù)5的四舍五入是不確定的，使用的時(shí)候必須小心。

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

Number.prototype.toExponential()

toExponential方法用于將一個(gè)數(shù)轉(zhuǎn)為科學(xué)計(jì)數(shù)法形式。

(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方法的參數(shù)是小數(shù)點(diǎn)后有效數(shù)字的位數(shù)，范圍為0到20，超出這個(gè)范圍，會(huì)拋出一個(gè)RangeError錯(cuò)誤。

Number.prototype.toPrecision()

toPrecision方法用于將一個(gè)數(shù)轉(zhuǎn)為指定位數(shù)的有效數(shù)字。

(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方法的參數(shù)為有效數(shù)字的位數(shù)，范圍是1到21，超出這個(gè)范圍會(huì)拋出RangeError錯(cuò)誤。

toPrecision方法用于四舍五入時(shí)不太可靠，跟浮點(diǎn)數(shù)不是精確儲(chǔ)存有關(guān)。

(12.35).toPrecision(3) // "12.3"
(12.25).toPrecision(3) // "12.3"
(12.15).toPrecision(3) // "12.2"
(12.45).toPrecision(3) // "12.4"

自定義方法

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

Number.prototype.add = function (x) {
  return this + x;
};

8['add'](2) // 10

上面代碼為Number對(duì)象實(shí)例定義了一個(gè)add方法。在數(shù)值上調(diào)用某個(gè)方法，數(shù)值會(huì)自動(dòng)轉(zhuǎn)為Number的實(shí)例對(duì)象，所以就可以調(diào)用add方法了。由于add方法返回的還是數(shù)值，所以可以鏈?zhǔn)竭\(yùn)算。

Number.prototype.subtract = function (x) {
  return this - x;
};

(8).add(2).subtract(4) // 6

我們還可以部署更復(fù)雜的方法。

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對(duì)象的原型上部署了iterate方法，將一個(gè)數(shù)值自動(dòng)遍歷為一個(gè)數(shù)組。

注意，數(shù)值的自定義方法，只能定義在它的原型對(duì)象Number.prototype上面，數(shù)值本身是無(wú)法自定義屬性的。

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

上面代碼中，n是一個(gè)原始類型的數(shù)值。直接在它上面新增一個(gè)屬性x，不會(huì)報(bào)錯(cuò)，但毫無(wú)作用，總是返回undefined。這是因?yàn)橐坏┍徽{(diào)用屬性，n就自動(dòng)轉(zhuǎn)為Number的實(shí)例對(duì)象，調(diào)用結(jié)束后，該對(duì)象自動(dòng)銷毀。所以，下一次調(diào)用n的屬性時(shí)，實(shí)際取到的是另一個(gè)對(duì)象，屬性x當(dāng)然就讀不出來(lái)。

String 對(duì)象

概述

String對(duì)象是 JavaScript 原生提供的三個(gè)包裝對(duì)象之一，用來(lái)生成字符串對(duì)象。

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"

字符串對(duì)象是一個(gè)類似數(shù)組的對(duì)象（很像數(shù)組，但不是數(shù)組）。

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

(new String('abc'))[1] // "b"

上面代碼中，字符串a(chǎn)bc對(duì)應(yīng)的字符串對(duì)象，有數(shù)值鍵（0、1、2）和length屬性，所以可以像數(shù)組那樣取值。

除了用作構(gòu)造函數(shù)，String對(duì)象還可以當(dāng)作工具方法使用，將任意類型的值轉(zhuǎn)為字符串。

String(true) // "true"
String(5) // "5"

靜態(tài)方法

String.fromCharCode()

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

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

上面代碼中，String.fromCharCode方法的參數(shù)為空，就返回空字符串；否則，返回參數(shù)對(duì)應(yīng)的 Unicode 字符串。

注意，該方法不支持 Unicode 碼點(diǎn)大于0xFFFF的字符，即傳入的參數(shù)不能大于0xFFFF（即十進(jìn)制的 65535）。

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

上面代碼中，String.fromCharCode參數(shù)0x20BB7大于0xFFFF，導(dǎo)致返回結(jié)果出錯(cuò)。0x20BB7對(duì)應(yīng)的字符是漢字

以上就是淺談JS包裝對(duì)象的詳細(xì)內(nèi)容，更多關(guān)于JS包裝對(duì)象的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論