JavaScript 包裝對(duì)象

2023-03-20 15:55 更新

定義

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

所謂“包裝對(duì)象”,指的是與數(shù)值、字符串、布爾值分別相對(duì)應(yīng)的NumberString、Boolean三個(gè)原生對(duì)象。這三個(gè)原生對(duì)象可以把原始類(lèi)型的值變成(包裝成)對(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

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

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

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

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

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

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

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

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

實(shí)例方法

三種包裝對(duì)象各自提供了許多實(shí)例方法,詳見(jiàn)后文。這里介紹兩種它們共同具有、從Object對(duì)象繼承的方法:valueOf()toString()

valueOf()

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

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"

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

某些場(chǎng)合,原始類(lèi)型的值會(huì)自動(dòng)當(dāng)作包裝對(duì)象調(diào)用,即調(diào)用包裝對(duì)象的屬性和方法。這時(shí),JavaScript 引擎會(huì)自動(dòng)將原始類(lèi)型的值轉(zhuǎn)為包裝對(duì)象實(shí)例,并在使用后立刻銷(xiāo)毀實(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ì)被銷(xiāo)毀。這就叫原始類(lèi)型與實(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

上面代碼中,字符串abc的包裝對(duì)象提供了多個(gè)屬性,length只是其中之一。

自動(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)銷(xiāo)毀。這意味著,下一次調(diào)用字符串的屬性時(shí),實(shí)際是調(diào)用一個(gè)新生成的對(duì)象,而不是上一次調(diào)用時(shí)生成的那個(gè)對(duì)象,所以取不到賦值在上一個(gè)對(duì)象的屬性。如果要為字符串添加屬性,只有在它的原型對(duì)象String.prototype上定義(參見(jiàn)《面向?qū)ο缶幊獭氛鹿?jié))。

自定義方法

除了原生的實(shí)例方法,包裝對(duì)象還可以自定義方法和屬性,供原始類(lèi)型的值直接調(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

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


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)