快捷導(dǎo)航

深入理解Javascript中的valueOf與toString

更新時(shí)間：2017年01月04日 14:46:38 投稿：mrr

javascript中所有數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法，null除外。它們倆解決javascript值運(yùn)算與顯示的問題,本文將詳細(xì)介紹，有需要的朋友可以參考下

基本上，javascript中所有數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法，null除外。它們倆解決javascript值運(yùn)算與顯示的問題,本文將詳細(xì)介紹，有需要的朋友可以參考下。

toString()

toString()函數(shù)的作用是返回object的字符串表示，JavaScript中object默認(rèn)的toString()方法返回字符串”[object Object]“。定義類時(shí)可以實(shí)現(xiàn)新的toString()方法，從而返回更加具有可讀性的結(jié)果。JavaScript對(duì)于數(shù)組對(duì)象、函數(shù)對(duì)象、正則表達(dá)式對(duì)象以及Date日期對(duì)象均定義了更加具有可讀性的toString()方法：

1.array的toString()方法將返回以逗號(hào)分隔的數(shù)組成員。比如，[1,2,3].toString()會(huì)返回字符串”1,2,3″。

2.function的toString()方法將返回函數(shù)的文本定義。比如，(function(x){return x*2;}).toString()會(huì)返回字符串”function(x){return x*2;}”。

3.RegExp的toString()方法與function的toString()方法類似，將返回正則表達(dá)式的文本定義。比如，/\d+/g.toString()會(huì)返回字符串”/\\d+/g”。

4.Date的toString()方法將返回一個(gè)具有可讀性的日期時(shí)間字符串。

5.如果 Boolean 值是 true，則返回 “true”。否則，返回 “false”。

valueOf()

valueOf()函數(shù)的作用是返回該object自身。與toString()一樣，定義類時(shí)可以實(shí)現(xiàn)新的valueOf()方法，從而返回需要的結(jié)果。JavaScript對(duì)于Date對(duì)象定義了更加具有可讀性的valueOf()方法：

1.Date的valueOf()方法將返回一個(gè)時(shí)間戳數(shù)值，該數(shù)值為Date對(duì)象與1970年1月1日零時(shí)的時(shí)間差(以毫秒為單位)。其他一律返回對(duì)象本身。

在js高程里面有一段代碼：

var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含3 個(gè)字符串的數(shù)組 
alert(colors.toString()); // red,blue,green 
alert(colors.valueOf()); // red,blue,green 
alert(colors); // red,blue,green

三個(gè)輸出全部一樣，那么toString()和valueOf()區(qū)別到底是什么？看下一個(gè)我寫的例子：

var arr = [1,2,3]; 
alert(Array.isArray(arr.valueOf())); 
alert(Array.isArray(arr.toString()));

結(jié)果是第一個(gè)是true而第二個(gè)是false，為什么呢，其實(shí)valueOf()調(diào)用完以后還是返回一個(gè)數(shù)組。這個(gè)數(shù)組被alert的時(shí)候會(huì)調(diào)用toString()函數(shù)，所以不是valueOf()和toString()函數(shù)相同，而是間接的調(diào)用了toString()函數(shù)！
進(jìn)一步測試下：

var arr = [1,2,3]; 
arr.toString = function () { 
  alert("你調(diào)用了toString函數(shù)"); 
} 
alert(arr.valueOf());

結(jié)果就是我們會(huì)看到“你調(diào)用了toString函數(shù)”。

而對(duì)于數(shù)值，我們可以調(diào)用valueOf的時(shí)候直接可以獲得數(shù)字進(jìn)行計(jì)算，不必轉(zhuǎn)化成字符串，所以不會(huì)調(diào)用toString。反言之，如果我們需要獲得操作對(duì)象的字符串形式的時(shí)候就會(huì)調(diào)用其toString函數(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

我的理解：valueOf的意思是返回最適合該對(duì)象類型的原始值，而toString則是將在該對(duì)象類型的原始值以字符串形式返回。

第一個(gè)

alert(bbb);// 10 toString

這里我們的alert函數(shù)需要是的字符串，所以獲取的是字符串，而不是原始值，故而調(diào)用了toString

第二個(gè)

alert(+bbb); // 10 valueOf

同理，alert要的是字符串不是原始值，其實(shí)是+bbb這個(gè)東西被調(diào)用了toString，而bbb被調(diào)用了valueOf

為了驗(yàn)證我們這樣寫

var a = { 
  i: 1, 
  valueOf: function () { 
    alert("你調(diào)用了a的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了a的toString函數(shù)"); 
    return this.i; 
  } 
}; 
var c = { 
  i: +a, 
  valueOf: function () { 
    alert("你調(diào)用了c的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了c的toString函數(shù)"); 
    return this.i; 
  } 
}; 
alert(c);

其中讓c=+a，那么即可知道結(jié)果，果然如此，調(diào)用了a的valueOf和c的toString

第三個(gè)

alert(''+bbb); // 10 valueOf

同理，我們可以把上一段我寫的程序里面的c:+a改成c:''+a

第四個(gè)

alert(String(bbb)); // 10 toString

String這個(gè)強(qiáng)制轉(zhuǎn)換其實(shí)在其內(nèi)部是調(diào)用了傳入?yún)?shù)的toString函數(shù)……

第五個(gè)

alert(Number(bbb)); // 10 valueOf

這個(gè)是有區(qū)別的，因?yàn)閎bb的i屬性是數(shù)值類型的，如果i為11111xxxxx這樣的字符串，我們就可以看到調(diào)用了bbb的toString了

代碼例子：

 var c = { 
  i: "11111xxxx", 
  valueOf: function () { 
    alert("你調(diào)用了c的valueOf函數(shù)"); 
    return this.i; 
  }, 
  toString: function () { 
    alert("你調(diào)用了c的toString函數(shù)"); 
    return this.i; 
  } 
}; 
alert(c);

第六個(gè)