《javascript高級程序設(shè)計(jì)》筆記：valueOf() / toString() 對比

yzzz 發(fā)布于2019-08-20 18:32 / 3446人閱讀

摘要：中這樣描述和調(diào)用方法用來把對象轉(zhuǎn)換成原始類型的值數(shù)值字符串和布爾值。你很少需要自己調(diào)用此函數(shù)當(dāng)遇到一種需要轉(zhuǎn)換成一個(gè)原始值情況時(shí)候，會自動調(diào)用此函數(shù)。默認(rèn)情況下會被每個(gè)對象繼承。

MDN 中這樣描述 valueOf() 和 toString():

  JavaScript 調(diào)用 valueOf() 方法用來把對象轉(zhuǎn)換成原始類型的值（數(shù)值、字符串和布爾值）。
你很少需要自己調(diào)用此函數(shù)；當(dāng)遇到一種需要轉(zhuǎn)換成一個(gè)原始值情況時(shí)候， JavaScript 會自動調(diào)
用此函數(shù)。

  默認(rèn)情況下, valueOf() 會被每個(gè)對象Object繼承。每一個(gè)內(nèi)置對象都會覆蓋這個(gè)方法為了返回
一個(gè)合理的值，如果對象沒有原始值，valueOf() 就會返回對象自身；

  每個(gè)對象都有一個(gè) toString() 方法，當(dāng)對象被表示為文本值時(shí)或者當(dāng)以期望字符串的方式引用
對象時(shí)，該方法被自動調(diào)用。默認(rèn)情況下，toString() 方法被每個(gè)繼承自O(shè)bject的對象繼承。如
果此方法在自定義對象中未被覆蓋，toString() 返回 "[object type]",其中type是對象類型

簡單的說：
valueOf()函數(shù)用于返回指定對象的原始值；
toString()函數(shù)用于返回指定對象的字符串；

對象	valueOf() 返回值	toString() 返回值
Number	數(shù)字值(number)	數(shù)字值(string)
String	字符串值	字符串值
Boolean	布爾值	字符串值
Object	對象本身	字符串值
Function	函數(shù)本身	字符串值
Date	以毫秒數(shù)存儲的時(shí)間值(number)	標(biāo)準(zhǔn)時(shí)間輸出(string)

// Number
var num = 15.26540,
    num2 = new Number(15.26540);
console.log( "valueOf", num.valueOf() === num ); // true number類型 
console.log( "toString", num.toString() === num );// false string類型
console.log( "valueOf", num2.valueOf() === num2 ); // false number類型 
console.log( "toString", num2.toString() === num2 );// false string類型
console.log( num.valueOf() === num.toString());// false
console.log( num2.valueOf() === num2.toString());// false

// String
var str = "abcd",
    str2 = new String("abcd");
console.log( "valueOf", str.valueOf() === str );// true string類型
console.log( "toString", str.toString() === str );// true string類型
console.log( "valueOf", str2.valueOf() === str2 );// false string類型
console.log( "toString", str2.toString() === str2 );// false string類型
console.log( str.valueOf() === str.toString());// true
console.log( str2.valueOf() === str2.toString());// true

// Boolean
var bool = true,
    bool2 = new Boolean(true);
console.log( "valueOf", bool.valueOf() === bool );// true string類型
console.log( "toString", bool.toString() === bool );// false string類型
console.log( "valueOf", bool2.valueOf() === bool2 );// false boolean類型
console.log( "toString", bool2.toString() === bool2 );// false string類型
console.log( bool.valueOf() === bool.toString());// false
console.log( bool2.valueOf() === bool2.toString());// false

// Object
var obj = {name: "張三", age: 18};
console.log( "valueOf", obj.valueOf() === obj );// true object類型
console.log( "toString", obj.toString() === obj );// false string類型
console.log( obj.valueOf() === obj.toString());// false

// Function
var fn = function(){},
    fn2 = new Function("x", "y", "return x+y")
console.log( "valueOf", fn.valueOf() === fn );// true object類型
console.log( "toString", fn.toString() === fn );// false string類型
console.log( "valueOf", fn2.valueOf() === fn2 );// true object類型
console.log( "toString", fn2.toString() === fn2 );// false string類型
console.log( fn.valueOf() === fn.toString());// false
console.log( fn2.valueOf() === fn2.toString());// false

// Date
var date = new Date();
console.log( "valueOf", date.valueOf() );// 1501830320383 number類型
console.log( "toString", date.toString() );// Fri Aug 04 2017 15:05:45 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) string類型
console.log( date.valueOf() === date.toString());// false

移步：valueOf() / toString()深入分析對比