js 对象转基本类型

对象转基本类型

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

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

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

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

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

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

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

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

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

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

console.log(1 + obj)

// 依次打印出
valueOf
toString
1string

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

var 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 属性的话，会优先调用，它的优先级最高

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

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

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

var 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

5. 其他问题

var 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 的值再转为字符串）