Javascript中valueOf與toString區(qū)別淺析

基本上攘轩,所有JS數(shù)據(jù)類(lèi)型都擁有這兩個(gè)方法淋叶,null除外仑荐。它們倆解決javascript值運(yùn)算與顯示的問(wèn)題雕拼,重寫(xiě)會(huì)加大它們調(diào)用的優(yōu)化。

測(cè)試分析

先看一例:

var aaa = { 
 i: 10, 
 valueOf: function() { return this.i+30; }, 
 toString: function() { return this.valueOf()+10; } 
}
alert(aaa > 20); // true 
alert(+aaa); // 40 
alert(aaa); // 50 

之所以有這樣的結(jié)果粘招,因?yàn)樗鼈兺低档卣{(diào)用valueOf或toString方法啥寇。
但如何區(qū)分什么情況下是調(diào)用了哪個(gè)方法呢,我們可以通過(guò)另一個(gè)方法測(cè)試一下男图。
由于用到console.log示姿,請(qǐng)?jiān)谘b有firebug的FF中實(shí)驗(yàn)!

var bbb = {
 i: 10,
 toString: function() {
  console.log('toString');
  return this.i;
 },
 valueOf: function() {
  console.log('valueOf');
  return this.i;
 }
}
alert(bbb);// 10 toString
alert(+bbb); // 10 valueOf
alert(''+bbb); // 10 valueOf
alert(String(bbb)); // 10 toString
alert(Number(bbb)); // 10 valueOf
alert(bbb == '10'); // true valueOf
alert(bbb === '10'); // false

結(jié)果給人的感覺(jué)是逊笆,如果轉(zhuǎn)換為字符串時(shí)調(diào)用toString方法栈戳,如果是轉(zhuǎn)換為數(shù)值時(shí)則調(diào)用valueOf方法,但其中有兩個(gè)很不和諧难裆。一個(gè)是alert(''+bbb)子檀,字符串合拼應(yīng)該是調(diào)用toString方法……另一個(gè)我們暫時(shí)可以理解為===操作符不進(jìn)行隱式轉(zhuǎn)換,因此不調(diào)用它們乃戈。為了追究真相褂痰,我們需要更嚴(yán)謹(jǐn)?shù)膶?shí)驗(yàn)。

var aa = { 
 i: 10, 
 toString: function() { 
  console.log('toString'); 
  return this.i; 
 } 
} 
alert(aa);// 10 toString 
alert(+aa); // 10 toString 
alert(''+aa); // 10 toString 
alert(String(aa)); // 10 toString 
alert(Number(aa)); // 10 toString 
alert(aa == '10'); // true toString 

再看valueOf症虑。

var bb = { 
 i: 10, 
 valueOf: function() { 
  console.log('valueOf'); 
  return this.i; 
 } 
}
alert(bb);// [object Object] 
alert(+bb); // 10 valueOf 
alert(''+bb); // 10 valueOf 
alert(String(bb)); // [object Object] 
alert(Number(bb)); // 10 valueOf 
alert(bb == '10'); // true valueOf 

發(fā)現(xiàn)有點(diǎn)不同吧缩歪?!它沒(méi)有像上面toString那樣統(tǒng)一規(guī)整谍憔。
對(duì)于那個(gè)[object Object]匪蝙,我估計(jì)是從Object那里繼承過(guò)來(lái)的主籍,我們?cè)偃サ羲纯础?/p>

Object.prototype.toString = null; 
var cc = { 
 i: 10, 
 valueOf: function() { 
  console.log('valueOf'); 
  return this.i; 
 } 
}

alert(cc);// 10 valueOf 
alert(+cc); // 10 valueOf 
alert(''+cc); // 10 valueOf 
alert(String(cc)); // 10 valueOf 
alert(Number(cc)); // 10 valueOf 
alert(cc == '10'); // true valueOf 

總結(jié):valueOf偏向于運(yùn)算,toString偏向于顯示逛球。
1千元、 在進(jìn)行對(duì)象轉(zhuǎn)換時(shí)(例如:alert(a)),將優(yōu)先調(diào)用toString方法,如若沒(méi)有重寫(xiě)toString將調(diào)用valueOf方法颤绕,如果兩方法都不沒(méi)有重寫(xiě)幸海,但按Object的toString輸出。
2奥务、 在進(jìn)行強(qiáng)轉(zhuǎn)字符串類(lèi)型時(shí)將優(yōu)先調(diào)用toString方法物独,強(qiáng)轉(zhuǎn)為數(shù)字時(shí)優(yōu)先調(diào)用valueOf。
3汗洒、 在有運(yùn)算操作符的情況下议纯,valueOf的優(yōu)先級(jí)高于toString父款。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末溢谤,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子憨攒,更是在濱河造成了極大的恐慌世杀,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肝集,死亡現(xiàn)場(chǎng)離奇詭異瞻坝,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)杏瞻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)所刀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人捞挥,你說(shuō)我怎么就攤上這事浮创。” “怎么了砌函?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵斩披,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我讹俊,道長(zhǎng)垦沉,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任仍劈,我火速辦了婚禮厕倍,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘贩疙。我一直安慰自己讹弯,他們只是感情好诬像,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著闸婴,像睡著了一般坏挠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上邪乍,一...
    開(kāi)封第一講書(shū)人閱讀 52,549評(píng)論 1 312
  • 那天降狠,我揣著相機(jī)與錄音,去河邊找鬼庇楞。 笑死榜配,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的吕晌。 我是一名探鬼主播蛋褥,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼睛驳!你這毒婦竟也來(lái)了烙心?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤乏沸,失蹤者是張志新(化名)和其女友劉穎淫茵,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蹬跃,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡匙瘪,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蝶缀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丹喻。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖翁都,靈堂內(nèi)的尸體忽然破棺而出碍论,到底是詐尸還是另有隱情,我是刑警寧澤荐吵,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布骑冗,位于F島的核電站,受9級(jí)特大地震影響先煎,放射性物質(zhì)發(fā)生泄漏贼涩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一薯蝎、第九天 我趴在偏房一處隱蔽的房頂上張望遥倦。 院中可真熱鬧,春花似錦、人聲如沸袒哥。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)堡称。三九已至瞎抛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間却紧,已是汗流浹背桐臊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晓殊,地道東北人断凶。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像巫俺,于是被迫代替她去往敵國(guó)和親认烁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語(yǔ)法 2.1 概述 基本句法和變量 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line)介汹,也就是一...
    悟名先生閱讀 4,153評(píng)論 0 13
  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,238評(píng)論 0 4
  • 一却嗡、Java 簡(jiǎn)介 Java是由Sun Microsystems公司于1995年5月推出的Java面向?qū)ο蟪绦蛟O(shè)計(jì)...
    子非魚(yú)_t_閱讀 4,206評(píng)論 1 44
  • ??引用類(lèi)型的值(對(duì)象)是引用類(lèi)型的一個(gè)實(shí)例稽穆。 ??在 ECMAscript 中冠王,引用類(lèi)型是一種數(shù)據(jù)結(jié)構(gòu)赶撰,用于將數(shù)...
    霜天曉閱讀 1,066評(píng)論 0 1
  • 1豪娜、 剛剛過(guò)去不久的三八節(jié),已經(jīng)不再是婦女的專利哟楷,所以瘤载,還沒(méi)有結(jié)婚的她,也在三八節(jié)這一天卖擅,收到了來(lái)自男友的禮物鸣奔。男...
    費(fèi)漠塵閱讀 681評(píng)論 0 2