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
  1. 调用上述两个方法的时候,需要 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
  1. 如果有 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
  1. 其他问题
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 的值再转为字符串)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,596评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,691评论 0 4
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,227评论 0 1
  • 1、js数据类型 js中有7种数据类型,可以分为两类:原始类型、对象类型: 基础类型(原始值): Undefine...
    好奇男孩阅读 10,009评论 1 16
  • 我对你说, 我养了只长尾巴的兔子, 你来看看吧! 你真的来了, 我枕着你的胳膊, 躺在你旁边。 我还记得, 天亮未...
    oh尘埃阅读 332评论 1 5

友情链接更多精彩内容