valueOf() toString()的另类解读

1. 引子

请说出以下代码输出的内容

console.log([] + [])
console.log({} + [])
console.log([] == ![])
console.log(true + false)

2. 答案

• 首先你要知道的是，包装类型在运算的时候，会先调用valueOf方法,如果valueOf返回的还是包装类型，那么在调用toString方法

valueOf()方法返回指定对象的原始值 - MDN官方解释

image.png

toString()方法返回一个表示该对象的字符串 - MDN官方解释
描述：每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中 type 是对象的类型

栗子

var o = new Object();
o.toString(); // returns [object Object]

var toString = Object.prototype.toString;
toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

• ok
  那么现在的情况是什么？

//首先
[] = [].valueOf() // [] 发现还是[] 这是便会调用toString()方法
// 数组 toString 默认会将数组各项使用逗号 "," 隔开, 比如 [1,2,3].toSting 变成了"1,2,3",空数组 toString 就是空字符串
[] = [].toString() // ''
//so？ 以上相当于
console.log(''+'') //''
//请举一反三 朋友
let o = {}
console.log(o.valueOf()) // {}
console.log(o.toString()) // [object Object]
console.log({} + []) // [object Object]
// 继续
//两个基本类型相加，如果其中一方是字符，则将其他的转换为字符相加，否则将类型转换为Number,然后相加, Number(true) 是1, Number(false)是0, 所以结果是 1
console.log(![]) //false
console.log(Number(false)) //0
console.log(Number('')) //0
console.log(0 == 0) // true
//继续
console.log(true + false) // 0 + 1 = 1

结语

就像是一场梦，醒来还是很感动