JavaScript中“ ”的陷阱

主题：JavaScript中“+”的陷阱

精华帖 (5) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)

作者 正文

• zhouyrt
• 等级:
• 
• 性别:
• 文章: 242
• 积分: 960
• 来自: 北京
• 

   发表时间：2012-02-22   最后修改：前天

< > 猎头职位: 北京: ITeye网站诚聘产品交互设计

相关文章:  

• JavaScript内核系列 第2章 基本概念
• javascript基础
• JavaScript中“+”的陷阱（续）

推荐群组: HTML5
更多相关推荐

先给出示例，据说是某公司的测试题

 

{}+{}

 

结果是什么？

 

先了解下+运算符。JavaScript中运算符 “+” 很简单，有两种意思

 

1，字符串连接

2，数字相加

 

运算时其它值都将转换成这两个类型。

 

 

JavaScript中有基本类型（undefined, null, booleans, numbers, strings）、对象类型（objects, arrays）和函数类型（functions）。

 

类型转换先将对象/函数类型转换成基本类型。然后在根据运算符“+”转成字符串或数字。

 

其它基本类型转成数字有如下规则

Number(undefined) // NaN
Number(null)      // 0
Number(true)      // 1
Number(false)     // 0
Number('1')       // 1

 

其它基本类型转成字符串有如下规则

 

String(undefined) // "undefined"
String(null)      // "null"
String(true)      // "true"
String(false)     // "false"
String(1)         // "1"

 

 

回到上面的题目 ： {}+{}

 

1，先将两个对象直接量转成基本类型，{}的valueOf()还是自己。如下

 

var obj = {};
obj.valueOf() === obj; // true

 

2，转成字符串，{}的toString()是“[object Object]”

 

最后两个字符串连接的结果是“[object Object][object Object]”。

 

 

结果真是这个吗？在浏览器的控制台中测试不是，是NaN。

 

 

原因是第一个{}并非表示对象直接量，而是语句块的意思。参考：Javascript中大括号“{}”的多义性

 

即第一个大括号是语句块，该语句块中没有任何执行语句，可以忽略。演变是这样的

 

1 {}+{}

2 +{}

3 +"[object Object]"

4 NaN

 

 

恍然大悟了，加个小括号强制将第一个大括号转成对象直接量。结果就是期望的了。如

 

 

({}+{})

 

这时将输出

 

 

补充：node环境中 {}+{} 输出的是“[object Object][object Object]” 却不是 NaN