摘要：方法和方法介紹方法和我們知道在中，一切皆為對(duì)象。每個(gè)對(duì)象都有一個(gè)方法和方法，其中方法返回一個(gè)表示該對(duì)象的字符串，方法返回該對(duì)象的原始值。這兩個(gè)方法都是原型鏈上的方法，被每個(gè)對(duì)象所繼承。

valueOf()方法和toString()

我們知道在js中，"一切皆為對(duì)象"。每個(gè)對(duì)象都有一個(gè)toString()方法和value方法，其中toString()方法返回一個(gè)表示該對(duì)象的字符串，value方法返回該對(duì)象的原始值。對(duì)于toString方法來(lái)說(shuō)，當(dāng)對(duì)象被表示為文本值或者當(dāng)以期望字符串的方式引用對(duì)象時(shí)。該方法被自動(dòng)調(diào)用。對(duì)于一個(gè)對(duì)象，toSting()返回"[object type]",其中type是對(duì)象類型。如果x不是對(duì)象，toString()返回應(yīng)有的文本值。
對(duì)于valueOf() 方法來(lái)說(shuō)，默認(rèn)情況下, valueOf() 會(huì)被每個(gè)對(duì)象Object繼承。每一個(gè)內(nèi)置對(duì)象都會(huì)覆蓋這個(gè)方法為了返回一個(gè)合理的值，如果對(duì)象沒(méi)有原始值，valueOf() 就會(huì)返回對(duì)象自身。
但是注意，對(duì)于Null如果
不同類型的對(duì)象的value方法的返回值

二者的使用場(chǎng)景以及區(qū)別與比較

通過(guò)來(lái)自MDN[!https://developer.mozilla.org...]上面對(duì)兩個(gè)方法的介紹，我們得知。這兩個(gè)方法都是Object原型鏈上的方法，被每個(gè)對(duì)象所繼承。下面，我們看下該方法在兩個(gè)應(yīng)用場(chǎng)景下的區(qū)別。
1、對(duì)于值類型數(shù)據(jù)(又叫基本類型)場(chǎng)景下，toString及valueOf方法的使用

var str = "hello",n = 123,bool = true;

console.log(typeof(str.toString())+ "_"+ str.toString())        //string_hello
console.log(typeof(n.toString())+"_"+n.toString()  )            //string_123
console.log(typeof(bool.toString())+"_"+bool.toString())        //string_true

toString放對(duì)于值類型數(shù)據(jù)使用而言，其效果相當(dāng)于類型轉(zhuǎn)換，將原類型轉(zhuǎn)為字符串。

console.log(typeof(str.valueOf())+"_"+str.valueOf())            //string_hello
console.log(typeof(n.valueOf())+"_"+n.valueOf())                //string_123
console.log(typeof(bool.valueOf())+"_"+bool.valueOf())          //string_true

console.log(str.valueOf === str) //  // true
console.log(n.valueOf === n) //   // true
console.log(bool.valueOf() === bool) // true

由上面的例子可以得出，
toString方法對(duì)于值類型數(shù)據(jù)使用而言，其效果相當(dāng)于類型轉(zhuǎn)換，將原類型轉(zhuǎn)為字符串。
valueOf方法對(duì)于值類型數(shù)據(jù)使用而言，其效果將相當(dāng)于返回原數(shù)據(jù)。
2、復(fù)合對(duì)象類型數(shù)據(jù)使用toString及valueOf方法

var obj = {};

console.log(obj.toString());    //[object Object] 返回對(duì)象類型
console.log(obj.valueOf());     //{} 返回對(duì)象本身

可以看到與方法介紹中所說(shuō)一致。下面讓我們看下，具體兩個(gè)方法是如何執(zhí)行的。

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

其中，第一個(gè)alert,我們可以看到調(diào)用了toString方法，說(shuō)明alert這里是需要一個(gè)字符串，這樣我們可以推測(cè),toString()方法一般不需要我們主動(dòng)去顯示的調(diào)用，符合對(duì)象類型會(huì)在相應(yīng)的場(chǎng)景中調(diào)用適合的方法，返回適當(dāng)類型的值。
第二個(gè)，這里通過(guò)alert我們知道這里依然是需要一個(gè)字符串的值，所以這里是+test調(diào)用了toString方法。而對(duì)于test,調(diào)用valueOf方法。在有運(yùn)算操作符的情況下,valueOf的優(yōu)先級(jí)要高一點(diǎn)。可以看一個(gè)例子。

var ab = { 
  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: +ab, 
  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è)，同樣我們可以把上面的例子改為。

var c = { 
  i: ""+ab, 
  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è)，String方法是要返回一個(gè)字符串類型，所以這里調(diào)用了toString()方法。
第五個(gè),強(qiáng)轉(zhuǎn)換為數(shù)字類型，調(diào)用了valueOf方法。
第六個(gè),這個(gè)里面的判等的順序是，獲取原始值，然后判斷兩邊的原始值是否相等，所以調(diào)用valueOf。
第七個(gè),alert(bbb === "10"); // false
===操作符不進(jìn)行隱式轉(zhuǎn)換，判全等的第一個(gè)步驟是判斷類型，因?yàn)轭愋投疾灰粯恿耍院竺媸裁炊疾粫?huì)調(diào)用.
總結(jié)：
1、在進(jìn)行強(qiáng)轉(zhuǎn)字符串類型時(shí)將優(yōu)先調(diào)用toString方法，強(qiáng)轉(zhuǎn)為數(shù)字時(shí)優(yōu)先調(diào)用valueOf。
2、在有運(yùn)算操作符的情況下，valueOf的優(yōu)先級(jí)高于toString。
這兩個(gè)方法一般是交由js去隱式調(diào)用，以滿足不同的運(yùn)算情況。
在數(shù)值運(yùn)算里，會(huì)優(yōu)先調(diào)用valueOf()，如 a + b;
在字符串運(yùn)算里，會(huì)優(yōu)先調(diào)用toString(),如alert(c).

補(bǔ)充下toString()方法和String()方法的區(qū)別

toString()方法和String()方法都可以轉(zhuǎn)換為字符串類型。
1、toString()可以將所有的數(shù)據(jù)都轉(zhuǎn)換為字符串，但是要排除null和undefined

var str = false.toString();
console.log(str, typeof str);         //false, string

但是 null和undefined不能轉(zhuǎn)換為字符串,null和undefined調(diào)用toString()方法會(huì)報(bào)錯(cuò)

var str = null.toString();
var str = undefined.soString();

如果當(dāng)前數(shù)據(jù)為數(shù)字類型，則toString()括號(hào)中的可以寫一個(gè)數(shù)字，代表進(jìn)制，可以將數(shù)字轉(zhuǎn)化為對(duì)應(yīng)進(jìn)制字符串。

var num = 123;
console.log(num.toString()+"_"+ typeof(num.toString()));    //123_string
console.log(num.toString(2)+"_"+typeof(num.toString()));    //1111011_string
console.log(num.toString(8)+"_"+typeof(num.toString()));    //173_string
console.log(num.toString(16)+"_"+typeof(num.toString()));   //7b_string

2、String()可以將null和undefined轉(zhuǎn)換為字符串，但是沒(méi)法轉(zhuǎn)進(jìn)制字符串。當(dāng) String() 和運(yùn)算符 new 一起作為構(gòu)造函數(shù)使用時(shí)，它返回一個(gè)新創(chuàng)建的 String 對(duì)象，存放的是字符串 s 或 s 的字符串表示。

var str = new String("123");
console.log(str+"_"+typeof(str));     //123_object

當(dāng)不用 new 運(yùn)算符調(diào)用 String() 時(shí)，它只是把s轉(zhuǎn)換成原始的字符串，并返回轉(zhuǎn)換后的值。

var str = String(s);
console.log(str+"_"+typeof(str))                      //123_string

對(duì)象的Symbol.toPrimitive屬性。指向一個(gè)方法。該對(duì)象被轉(zhuǎn)化為原始類型的值時(shí)，會(huì)調(diào)用這個(gè)辦法，返回該對(duì)象對(duì)應(yīng)的原始類型值。
Symbol.toPrimitive被調(diào)用時(shí),會(huì)接受一個(gè)字符串參數(shù)，表示當(dāng)前運(yùn)算的模式，一個(gè)有三種模式。

Number:該場(chǎng)合需要轉(zhuǎn)成數(shù)值

String:該場(chǎng)合需要轉(zhuǎn)成字符串

Default:該場(chǎng)合可以轉(zhuǎn)成數(shù)值，也可以轉(zhuǎn)成字符串。

以上內(nèi)容來(lái)自阮老師的ES6入門，下面我們結(jié)合幾個(gè)例子，具體看下Symbol.toPrimitive是如何被調(diào)用的。

// 沒(méi)有 Symbol.toPrimitive 屬性的對(duì)象
var obj1 = {};
console.log(+obj1);       //NaN
console.log(`${obj1}`);   //"[object Object]"
console.log(obj1 + "");   //"[object Object]"

上面的結(jié)果我們可以通過(guò)上面說(shuō)的toSting()方法和value方法去理解。
第一個(gè)，+符號(hào)。可以看成是是把數(shù)據(jù)轉(zhuǎn)化為數(shù)字類型，由于obj是個(gè)空對(duì)象，所以結(jié)果是NaN
第二個(gè)，是es6中的字符串的新語(yǔ)法，這里需要的結(jié)果是一個(gè)字符串，所以使用的是toString()方法，而toString()方法返回的是對(duì)象的類型。
第三個(gè)，這里是連接符連接obj。實(shí)際上也是需要字符串的結(jié)果，所以同理。

// 擁有 Symbol.toPrimitive 屬性的對(duì)象
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if(hint == "number"){
        return 10;
    }
    if(hint == "string"){
        return "hello";
    }
    return true;
  }
}

console.log(+obj2);     //10    --hint in "number"
console.log(`${obj2}`); //hello --hint is "string"
console.log(obj2 + ""); //"true"

// 擁有 Symbol.toPrimitive 屬性的對(duì)象
let obj = {
  [Symbol.toPrimitive](hint) {
    if(hint === "number"){
      console.log("Number場(chǎng)景");
      return 123;
    }
    if(hint === "string"){
      console.log("String場(chǎng)景");
      return "str";
    }
    if(hint === "default"){
      console.log("Default 場(chǎng)景");
      return "default";
    }
  }
}
console.log(2*obj); // Number場(chǎng)景 246
console.log(3+obj); // String場(chǎng)景 3default
console.log(obj + "");  // Default場(chǎng)景 default
console.log(String(obj)); //String場(chǎng)景 str

由以上例子可以總結(jié)，一般情況下，+連接運(yùn)算符傳入的參數(shù)是default,而對(duì)于乘法等算數(shù)運(yùn)算符傳入的是number。對(duì)于String(str),${str}等情況，傳入的參數(shù)是defalut。

Symbol.toPrimitive和toString、valueOf

當(dāng)然，你也可以重寫一個(gè)不做參數(shù)判斷的Symbol.toPrimitive方法，結(jié)合上面提到的toString,可以有以下例子。

let ab = {
    valueOf() {
        return 0;
    },
    toString() {
        return "1";
    },
    [Symbol.toPrimitive]() {
        return 2;
    }
}
console.log(1+ab);
console.log("1"+ab);

可以看到，Symbol.toPrimitive方法在轉(zhuǎn)換基本類型的時(shí)候優(yōu)先級(jí)最高。

參考鏈接：
http://www.sohu.com/a/1464105...
https://www.cnblogs.com/good1...
https://www.jb51.net/article/...
https://yuchengkai.cn/docs/zh...
https://github.com/ruanyf/es6...
https://developer.mozilla.org...
https://blog.csdn.net/kittyji...