JS对象转基本类型

1. 对象在转换基本类型时，会调用 valueOf 和 toString，并且这两个方法你是可以重写的。

2. 调用哪个方法，主要是要看这个对象倾向于转换为什么。如果倾向于转换为 Number 类型的，就优先调用 valueOf；如果倾向于转换为 String 类型，就只调用 toString

let obj = {
    toString () {
      console.log('toString')
      return 'string'
    },
    valueOf () {
      console.log('valueOf')
      return 'value'
    }
  }
// console.log(`ssss${obj}`)    // toString  ssssstring
// console.log(1+obj)           // valueOf   1value
// console.log('1'+ obj)        // valueOf   1value

• 如果重写了 toString 方法，而没有重写 valueOf 方法，则会调用 toString 方法

let obj = {
  toString () {
    return 'string'
  }
}

console.log(1 + obj) // 1string

3. 调用上述两个方法的时候，需要 return 原始类型的值 (primitive value),

• 如果在调用 valueOf 的时候，返回的不是原始类型的值，就会去调用 toString

let obj = {
  toString () {
    console.log('toString')
    return 'string'
  },
  valueOf () {
    console.log('valueOf')
    return {}
  }
}

console.log(1 + obj)

// 依次打印出
valueOf
toString
1string

• 如果返回还不是原始的值，就会报错

let obj = {
  toString () {
    console.log('toString')
    return {}
  },
  valueOf () {
    console.log('valueOf')
    return {}
  }
}

console.log(1 + obj)
// 报错。无法将一个对象转换为原始类型的值
Uncaught TypeError: Cannot convert object to primitive value

4. 如果有 Symbol.toPrimitive 属性的话，会优先调用，它的优先级最高

let a = {
  valueOf() {
    return 0;
  },
  toString() {
    return '1';
  },
  [Symbol.toPrimitive]() {
    return 2;
  }
}
1 + a // => 3
'1' + a // => '12'

• 同样只能 return 原始类型的值，否则会报和上面所说一样的错。

let obj = {
  toString () {
    console.log('toString')
    return {}
  },
  valueOf () {
    console.log('valueOf')
    return {}
  },
  [Symbol.toPrimitive] () {
    console.log('primitive')
    return {}
  }
}

console.log(1 + obj)

// 报错 
TypeError: Cannot convert object to primitive value

• 其他问题

let obj = {
  toString () {
    console.log('toString')
    return '1'
  },
  valueOf () {
    console.log('valueOf')
    return 2
  }
}

console.log(1 + obj)
console.log('1' + obj)

// 依次输出
valueOf
3
valueOf
12

按理来说
‘1’ + obj

这个 + 是倾向于转为转换为字符串类型的（也就是调用 toString）；但是，它最后却是调用 valueOf。
原因在于，对于 + 这个操作符来说，本身就是代表加法，也就是说，本来就倾向于转为 number 类型，只不过发现加号左边出现字符串，于是乎把它的右边也转为字符串（也就是调用 valueOf 后，return 的值再转为字符串）

5. 四则运算符

• 只有当加法运算时，其中一方是字符串类型，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串

1 + '1' // '11'
2 * '2' // 4
[1, 2] + [2, 1] // '1,22,1'
// [1, 2].toString() -> '1,2'
// [2, 1].toString() -> '2,1'
// '1,2' + '2,1' = '1,22,1'

• 对于加号需要注意这个表达式 ‘a’ + + ‘b’

'a' + + 'b' // -> "aNaN"
// 因为 + 'b' -> NaN
// 你也许在一些代码中看到过 + '1' -> 1

参考 https://www.jianshu.com/p/c1872ec363cb