摘要：對(duì)于與的設(shè)計(jì)在中所設(shè)計(jì)的純對(duì)象類型的與方法，它們的返回如下方法返回值對(duì)象本身。與三個(gè)強(qiáng)制轉(zhuǎn)換函數(shù)，所對(duì)應(yīng)的就是在標(biāo)準(zhǔn)中的三個(gè)內(nèi)部運(yùn)算轉(zhuǎn)換的對(duì)照表。

在JS中的運(yùn)算符共同的情況中，(+)符號(hào)是很常見的一種，它有以下的使用情況:

數(shù)字的加法運(yùn)算，二元運(yùn)算

字符串的連接運(yùn)算，二元運(yùn)算，最高優(yōu)先

正號(hào)，一元運(yùn)算，可延伸為強(qiáng)制轉(zhuǎn)換其他類型的運(yùn)算元為數(shù)字類型

當(dāng)然，如果考慮多個(gè)符號(hào)一起使用時(shí)，(+=)與(++)又是另外的用途。

另一個(gè)常見的是花括號(hào)({})，它有兩個(gè)用途也很常見:

對(duì)象的字面文字定義

區(qū)塊語(yǔ)句

所以，要能回答這個(gè)問題，要先搞清楚重點(diǎn)是什么？

第一個(gè)重點(diǎn)是:

加號(hào)(+)運(yùn)算在JS中在使用上的規(guī)定是什么。

第二個(gè)重點(diǎn)則是:

對(duì)象在JS中是怎么轉(zhuǎn)換為原始數(shù)據(jù)類型的值的。

除了上面說明的常見情況外，在標(biāo)準(zhǔn)中轉(zhuǎn)換的規(guī)則還有以下幾個(gè)，要注意它的順序:

operand + operand = result

使用ToPrimitive運(yùn)算轉(zhuǎn)換左與右運(yùn)算元為原始數(shù)據(jù)類型值(primitive)

在第1步轉(zhuǎn)換后，如果有運(yùn)算元出現(xiàn)原始數(shù)據(jù)類型是"字符串"類型值時(shí)，則另一運(yùn)算元作強(qiáng)制轉(zhuǎn)換為字符串，然后作字符串的連接運(yùn)算(concatenation)

在其他情況時(shí)，所有運(yùn)算元都會(huì)轉(zhuǎn)換為原始數(shù)據(jù)類型的"數(shù)字"類型值，然后作數(shù)學(xué)的相加運(yùn)算(addition)

因此，加號(hào)運(yùn)算符只能使用于原始數(shù)據(jù)類型，那么對(duì)于對(duì)象類型的值，要如何轉(zhuǎn)換為原始數(shù)據(jù)類型？下面說明是如何轉(zhuǎn)換為原始數(shù)據(jù)類型的。

在ECMAScript 6th Edition #7.1.1，有一個(gè)抽象的ToPrimitive運(yùn)算，它會(huì)用于對(duì)象轉(zhuǎn)換為原始數(shù)據(jù)類型，這個(gè)運(yùn)算不只會(huì)用在加號(hào)運(yùn)算符，也會(huì)用在關(guān)系比較或值相等比較的運(yùn)算中。下面有關(guān)于ToPrimitive的說明語(yǔ)法:

ToPrimitive(input, PreferredType?)

input代表代入的值，而PreferredType可以是數(shù)字(Number)或字符串(String)其中一種，這會(huì)代表"優(yōu)先的"、"首選的"的要進(jìn)行轉(zhuǎn)換到哪一種原始類型，轉(zhuǎn)換的步驟會(huì)依這里的值而有所不同。但如果沒有提供這個(gè)值也就是預(yù)設(shè)情況，則會(huì)設(shè)置轉(zhuǎn)換的hint值為"default"。這個(gè)首選的轉(zhuǎn)換原始類型的指示(hint值)，是在作內(nèi)部轉(zhuǎn)換時(shí)由JS視情況自動(dòng)加上的，一般情況就是預(yù)設(shè)值。

而在JS的Object原型的設(shè)計(jì)中，都一定會(huì)有兩個(gè)valueOf與toString方法，所以這兩個(gè)方法在所有對(duì)象里面都會(huì)有，不過它們?cè)谵D(zhuǎn)換有可能會(huì)交換被調(diào)用的順序。

當(dāng)PreferredType為數(shù)字(Number)時(shí)，input為要被轉(zhuǎn)換的值，以下是轉(zhuǎn)換這個(gè)input值的步驟:

如果input是原始數(shù)據(jù)類型，則直接返回input。

否則，如果input是個(gè)對(duì)象時(shí)，則調(diào)用對(duì)象的valueOf()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。

否則，如果input是個(gè)對(duì)象時(shí)，調(diào)用對(duì)象的toString()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。

否則，拋出TypeError錯(cuò)誤。

上面的步驟2與3對(duì)調(diào)，如同下面所說:

如果input是原始數(shù)據(jù)類型，則直接返回input。

否則，如果input是個(gè)對(duì)象時(shí)，調(diào)用對(duì)象的toString()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。

否則，如果input是個(gè)對(duì)象時(shí)，則調(diào)用對(duì)象的valueOf()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。

否則，拋出TypeError錯(cuò)誤。

與PreferredType為數(shù)字(Number)時(shí)的步驟相同。

數(shù)字其實(shí)是預(yù)設(shè)的首選類型，也就是說在一般情況下，加號(hào)運(yùn)算中的對(duì)象要作轉(zhuǎn)型時(shí)，都是先調(diào)用valueOf再調(diào)用toString。

但這有兩個(gè)異常，一個(gè)是Date對(duì)象，另一是Symbol對(duì)象，它們覆蓋了原來的PreferredType行為，Date對(duì)象的預(yù)設(shè)首選類型是字符串(String)。

因此你會(huì)看到在一些教程文件上會(huì)區(qū)分為兩大類對(duì)象，一類是 Date 對(duì)象，另一類叫 非Date(non-date) 對(duì)象。因?yàn)檫@兩大類的對(duì)象在進(jìn)行轉(zhuǎn)換為原始數(shù)據(jù)類型時(shí)，首選類型恰好相反。

以簡(jiǎn)單的模擬代碼來說明，加號(hào)運(yùn)算符(+)的運(yùn)行過程就是像下面這個(gè)模擬碼一樣，我想這會(huì)很容易理解:

a + b:
    pa = ToPrimitive(a)
    pb = ToPrimitive(b)

    if(pa is string || pb is string)
       return concat(ToString(pa), ToString(pb))
    else
       return add(ToNumber(pa), ToNumber(pb))

步驟簡(jiǎn)單來說就是，運(yùn)算元都用ToPrimitive先轉(zhuǎn)換為原始數(shù)據(jù)類型，然后其一是字符串時(shí)，使用ToString強(qiáng)制轉(zhuǎn)換另一個(gè)運(yùn)算元，然后作字符串連接運(yùn)算。要不然，就是都使用ToNumber強(qiáng)制轉(zhuǎn)換為數(shù)字作加法運(yùn)算。

而ToPrimitive在遇到對(duì)象類型時(shí)，預(yù)設(shè)調(diào)用方式是先調(diào)用valueOf再調(diào)用toString，一般情況數(shù)字類型是首選類型。

上面說的ToString與ToNumber這兩個(gè)也是JS內(nèi)部的抽象運(yùn)算。

valueOf與ToString是在Object中的兩個(gè)必有的方法，位于Object.prototype上，它是對(duì)象要轉(zhuǎn)為原始數(shù)據(jù)類型的兩個(gè)姐妹方法。從上面的內(nèi)容已經(jīng)可以看到，ToPrimitive這個(gè)抽象的內(nèi)部運(yùn)算，會(huì)依照設(shè)置的首選的類型，決定要先后調(diào)用valueOf與toString方法的順序，當(dāng)數(shù)字為首選類型時(shí)，優(yōu)先使用valueOf，然后再調(diào)用toString。當(dāng)字符串為首選類型時(shí)，則是相反的順序。預(yù)設(shè)調(diào)用方式則是如數(shù)字首選類型一樣，是先調(diào)用valueOf再調(diào)用toString。

在JS中所設(shè)計(jì)的Object純對(duì)象類型的valueOf與toString方法，它們的返回如下:

valueOf方法返回值: 對(duì)象本身。

toString方法返回值: "[object Object]"字符串值，不同的內(nèi)建對(duì)象的返回值是"[object type]"字符串，"type"指的是對(duì)象本身的類型識(shí)別，例如Math對(duì)象是返回"[object Math]"字符串。但有些內(nèi)建對(duì)象因?yàn)楦采w了這個(gè)方法，所以直接調(diào)用時(shí)不是這種值。(注意: 這個(gè)返回字符串的前面的"object"開頭英文是小寫，后面開頭英文是大寫)

你有可能會(huì)看過，利用Object中的toString來進(jìn)行各種不同對(duì)象的判斷語(yǔ)法，這在以前JS能用的函數(shù)庫(kù)或方法不多的年代經(jīng)?？吹?，不過它需要配合使用函數(shù)中的call方法，才能輸出正確的對(duì)象類型值，例如:

> Object.prototype.toString.call([])
"[object Array]"

> Object.prototype.toString.call(new Date)
"[object Date]"

所以，從上面的內(nèi)容就可以知道，下面的這段代碼的結(jié)果會(huì)是調(diào)用到toString方法(因?yàn)?b>valueOf方法的返回并不是原始的數(shù)據(jù)類型):

> 1 + {}
"1[object Object]"

一元正號(hào)(+)，具有讓首選類型(也就是hint)設(shè)置為數(shù)字(Number)的功能，所以可以強(qiáng)制讓對(duì)象轉(zhuǎn)為數(shù)字類型，一般的對(duì)象會(huì)轉(zhuǎn)為:

> +{} //相當(dāng)于 +"[object Object]"
NaN

當(dāng)然，對(duì)象的這兩個(gè)方法都可以被覆蓋，你可以用下面的代碼來觀察這兩個(gè)方法的運(yùn)行順序，下面這個(gè)都是先調(diào)用valueOf的情況:

let obj = {
  valueOf: function () {
      console.log("valueOf");
      return {}; // object
  },
  toString: function () {
      console.log("toString");
      return "obj"; // string
  }
}
console.log(1 + obj);  //valueOf -> toString -> "1obj"
console.log(+obj); //valueOf -> toString -> NaN
console.log("" + obj); //valueOf -> toString -> "obj"

先調(diào)用toString的情況比較少見，大概只有Date對(duì)象或強(qiáng)制要轉(zhuǎn)換為字符串時(shí)才會(huì)看到:

let obj = {
  valueOf: function () {
      console.log("valueOf");
      return 1; // number
  },
  toString: function () {
      console.log("toString");
      return {}; // object
  }
}
alert(obj); //toString -> valueOf -> alert("1");
String(obj); //toString -> valueOf -> "1";

而下面這個(gè)例子會(huì)造成錯(cuò)誤，因?yàn)椴徽擁樞蚴侨绾味嫉貌坏皆紨?shù)據(jù)類型的值，錯(cuò)誤消息是"TypeError: Cannot convert object to primitive value"，從這個(gè)消息中很明白的告訴你，它這里面會(huì)需要轉(zhuǎn)換對(duì)象到原始數(shù)據(jù)類型:

let obj = {
  valueOf: function () {
      console.log("valueOf");
      return {}; // object
  },
  toString: function () {
      console.log("toString");
      return {}; // object
  }
}

console.log(obj + obj);  //valueOf -> toString -> error!

Array(數(shù)組)很常用到，雖然它是個(gè)對(duì)象類型，但它與Object的設(shè)計(jì)不同，它的toString有覆蓋，說明一下數(shù)組的valueOf與toString的兩個(gè)方法的返回值:

valueOf方法返回值: 對(duì)象本身。(與Object一樣)

toString方法返回值: 相當(dāng)于用數(shù)組值調(diào)用join(",")所返回的字符串。也就是[1,2,3].toString()會(huì)是"1,2,3"，這點(diǎn)要特別注意。

Function對(duì)象很少會(huì)用到，它的toString也有被覆蓋，所以并不是Object中的那個(gè)toString，F(xiàn)unction對(duì)象的valueOf與toString的兩個(gè)方法的返回值:

valueOf方法返回值: 對(duì)象本身。(與Object一樣)

toString方法返回值: 函數(shù)中包含的代碼轉(zhuǎn)為字符串值

包裝對(duì)象是JS為原始數(shù)據(jù)類型數(shù)字、字符串、布爾專門設(shè)計(jì)的對(duì)象，所有的這三種原始數(shù)據(jù)類型所使用到的屬性與方法，都是在這上面所提供。

包裝對(duì)象的valueOf與toString的兩個(gè)方法在原型上有經(jīng)過覆蓋，所以它們的返回值與一般的Object的設(shè)計(jì)不同:

valueOf方法返回值: 對(duì)應(yīng)的原始數(shù)據(jù)類型值

toString方法返回值: 對(duì)應(yīng)的原始數(shù)據(jù)類型值，轉(zhuǎn)換為字符串類型時(shí)的字符串值

toString方法會(huì)比較特別，這三個(gè)包裝對(duì)象里的toString的細(xì)部說明如下:

Number包裝對(duì)象的toString方法: 可以有一個(gè)傳參，可以決定轉(zhuǎn)換為字符串時(shí)的進(jìn)位(2、8、16)

String包裝對(duì)象的toString方法: 與String包裝對(duì)象中的valueOf相同返回結(jié)果

Boolean包裝對(duì)象的toString方法: 返回"true"或"false"字符串

另外，常被搞混的是直接使用Number()、String()與Boolean()三個(gè)強(qiáng)制轉(zhuǎn)換函數(shù)的用法，這與包裝對(duì)象的用法不同，包裝對(duì)象是必須使用new關(guān)鍵字進(jìn)行對(duì)象實(shí)例化的，例如new Number(123)，而Number("123")則是強(qiáng)制轉(zhuǎn)換其他類型為數(shù)字類型的函數(shù)。

Number()、String()與Boolean()三個(gè)強(qiáng)制轉(zhuǎn)換函數(shù)，所對(duì)應(yīng)的就是在ECMAScript標(biāo)準(zhǔn)中的ToNumber、ToString、ToBoolean三個(gè)內(nèi)部運(yùn)算轉(zhuǎn)換的對(duì)照表。而當(dāng)它們要轉(zhuǎn)換對(duì)象類型前，會(huì)先用上面說的ToPrimitive先轉(zhuǎn)換對(duì)象為原始數(shù)據(jù)類型，再進(jìn)行轉(zhuǎn)換到所要的類型值。

不管如何，包裝對(duì)象很少會(huì)被使用到，一般我們只會(huì)直接使用原始數(shù)據(jù)類型的值。而強(qiáng)制轉(zhuǎn)換函數(shù)因?yàn)橐灿刑鎿Q的語(yǔ)法，它們會(huì)被用到的機(jī)會(huì)也不多。

字符串在加號(hào)運(yùn)算有最高的優(yōu)先運(yùn)算，與字符串相加必定是字符串連接運(yùn)算(concatenation)。所有的其他原始數(shù)據(jù)類型轉(zhuǎn)為字符串，可以參考ECMAScript標(biāo)準(zhǔn)中的ToString對(duì)照表，以下為一些簡(jiǎn)單的例子:

> "1" + 123
"1123"

> "1" + false
"1false"

> "1" + null
"1null"

> "1" + undefined
"1undefined"

數(shù)字與其他類型作相加時(shí)，除了字符串會(huì)優(yōu)先使用字符串連接運(yùn)算(concatenation)的，其他都要依照數(shù)字為優(yōu)先，所以除了字符串之外的其他原始數(shù)據(jù)類型，都要轉(zhuǎn)換為數(shù)字來進(jìn)行數(shù)學(xué)的相加運(yùn)算。如果明白這項(xiàng)規(guī)則，就會(huì)很容易的得出加法運(yùn)算的結(jié)果。

所有轉(zhuǎn)為數(shù)字類型可以參考ECMAScript標(biāo)準(zhǔn)中的ToNumber對(duì)照表，以下為一些簡(jiǎn)單的例子:

> 1 + true //true轉(zhuǎn)為1, false轉(zhuǎn)為0
2

> 1 + null //null轉(zhuǎn)為0
1

> 1 + undefined //undefined轉(zhuǎn)為NaN
NaN

當(dāng)數(shù)字與字符串以外的，其他原始數(shù)據(jù)類型直接使用加號(hào)運(yùn)算時(shí)，就是轉(zhuǎn)為數(shù)字再運(yùn)算，這與字符串完全無(wú)關(guān)。

> true + true
2

> true + null
1

> undefined + null
NaN

> [] + []
""

兩個(gè)數(shù)組相加，依然按照valueOf -> toString的順序，但因?yàn)?b>valueOf是數(shù)組本身，所以會(huì)以toString的返回值才是原始數(shù)據(jù)類型，也就是空字符串，所以這個(gè)運(yùn)算相當(dāng)于兩個(gè)空字符串在相加，依照加法運(yùn)算規(guī)則第2步驟，是字符串連接運(yùn)算(concatenation)，兩個(gè)空字符串連接最后得出一個(gè)空字符串。

> {} + {}
"[object Object][object Object]"

兩個(gè)空對(duì)象相加，依然按照valueOf -> toString的順序，但因?yàn)?b>valueOf是對(duì)象本身，所以會(huì)以toString的返回值才是原始數(shù)據(jù)類型，也就是"[object Object]"字符串，所以這個(gè)運(yùn)算相當(dāng)于兩個(gè)"[object Object]"字符串在相加，依照加法運(yùn)算規(guī)則第2步驟，是字符串連接運(yùn)算(concatenation)，最后得出一個(gè)"object Object"字符串。

但是這個(gè)結(jié)果有異常，上面的結(jié)果只是在Chrome瀏覽器上的結(jié)果(v55)，怎么說呢？

有些瀏覽器例如Firefox、Edge瀏覽器會(huì)把{} + {}直譯為相當(dāng)于+{}語(yǔ)句，因?yàn)樗鼈儠?huì)認(rèn)為以花括號(hào)開頭({)的，是一個(gè)區(qū)塊語(yǔ)句的開頭，而不是一個(gè)對(duì)象字面量，所以會(huì)認(rèn)為略過第一個(gè){}，把整個(gè)語(yǔ)句認(rèn)為是個(gè)+{}的語(yǔ)句，也就是相當(dāng)于強(qiáng)制求出數(shù)字值的Number({})函數(shù)調(diào)用運(yùn)算，相當(dāng)于Number("[object Object]")運(yùn)算，最后得出的是NaN。

特別注意: {} + {}在不同的瀏覽器有不同結(jié)果

如果在第一個(gè)(前面)的空對(duì)象加上圓括號(hào)(())，這樣JS就會(huì)認(rèn)為前面是個(gè)對(duì)象，就可以得出同樣的結(jié)果:

> ({}) + {}
"[object Object][object Object]"

或是分開來先聲明對(duì)象的變量值，也可以得出同樣的結(jié)果，像下面這樣:

> let foo = {}, bar = {};
> foo + bar;

注: 上面說的行為這與加號(hào)運(yùn)算的第一個(gè)(前面)的對(duì)象字面值是不是個(gè)空對(duì)象無(wú)關(guān)，就算是里面有值的對(duì)象字面，例如{a:1, b:2}，也是同樣的結(jié)果。
注: 上面說的Chrome瀏覽器是在v55版本中的主控臺(tái)直接運(yùn)行的結(jié)果。其它舊版本有可能并非此結(jié)果。

上面同樣的把{}當(dāng)作區(qū)塊語(yǔ)句的情況又會(huì)發(fā)生，不過這次所有的瀏覽器都會(huì)有一致結(jié)果，如果{}(空對(duì)象)在前面，而[](空數(shù)組)在后面時(shí)，前面(左邊)那個(gè)運(yùn)算元會(huì)被認(rèn)為是區(qū)塊語(yǔ)句而不是對(duì)象字面量。

所以{} + []相當(dāng)于+[]語(yǔ)句，也就是相當(dāng)于強(qiáng)制求出數(shù)字值的Number([])運(yùn)算，相當(dāng)于Number("")運(yùn)算，最后得出的是0數(shù)字。

> {} + []
0

> [] + {}
"[object Object]"

特別注意: 所以如果第一個(gè)(前面)是{}時(shí)，后面加上其他的像數(shù)組、數(shù)字或字符串，這時(shí)候加號(hào)運(yùn)算會(huì)直接變?yōu)橐辉?hào)運(yùn)算，也就是強(qiáng)制轉(zhuǎn)為數(shù)字的運(yùn)算。這是個(gè)陷阱要小心。

Date對(duì)象的valueOf與toString的兩個(gè)方法的返回值:

valueOf方法返回值: 給定的時(shí)間轉(zhuǎn)為UNIX時(shí)間(自1 January 1970 00:00:00 UTC起算)，但是以微秒計(jì)算的數(shù)字值

toString方法返回值: 本地化的時(shí)間字符串

Date對(duì)象上面有提及是首選類型為"字符串"的一種異常的對(duì)象，這與其他的對(duì)象的行為不同(一般對(duì)象會(huì)先調(diào)用valueOf再調(diào)用toString)，在進(jìn)行加號(hào)運(yùn)算時(shí)時(shí)，它會(huì)優(yōu)先使用toString來進(jìn)行轉(zhuǎn)換，最后必定是字符串連接運(yùn)算(concatenation)，例如以下的結(jié)果:

> 1 + (new Date())
> "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

要得出Date對(duì)象中的valueOf返回值，需要使用一元加號(hào)(+)，來強(qiáng)制轉(zhuǎn)換它為數(shù)字類型，例如以下的代碼:

> +new Date()
1480180751492

ES6中新加入的Symbols數(shù)據(jù)類型，它不算是一般的值也不是對(duì)象，它并沒有內(nèi)部自動(dòng)轉(zhuǎn)型的設(shè)計(jì)，所以完全不能直接用于加法運(yùn)算，使用時(shí)會(huì)報(bào)錯(cuò)。

{} + {}的結(jié)果是會(huì)因?yàn)g覽器而有不同結(jié)果，Chrome(v55)中是[object Object][object Object]字符串連接，但其它的瀏覽器則是認(rèn)為相當(dāng)于+{}運(yùn)算，得出NaN數(shù)字類型。

{} + []的結(jié)果是相當(dāng)于+[]，結(jié)果是0數(shù)字類型。

What is {} + {} in JavaScript?