详解JavaScript对象转原始值

2022-04-15 0 400
目录
  • Object.prototype.valueOf()
  • Object.prototype.toString()
  • Symbol.toPrimitive
  • 对象转换原始值
    • 1. 预期被转换成字符串类型
    • 2. 预期被转换成数字类型
    • 3. 预期被转换成默认类型(其他)
  • 三种方法触发的顺序
    • 总结

      Object.prototype.valueOf()

      对象的valueOf旨在返回对象的原始值,会在需要将对象转换成原始值的地方自动执行。详细点这里。

      Object.prototype.toString()

      toString()方法会返回表示该对象的字符串,会在对象预期要被转换成字符串的地方自动执行。对象默认的toString()方法会返回[object type],这个type就是对象构造函数的名称。详细点这里。

      Symbol.toPrimitive

      Symbol.toPrimitive(hint)方法作用同valueOf()一样,但是优先级要高于valueOf();而且该方法还会接受一个参数hint,这个参数用来表示期望转换的原始值的具体类型,有以下几种:

      • number:数字类型
      • string:字符串类型
      • default:默认
      let obj = {
        [Symbol.toPrimitive](hint) {
          switch (hint) {
            case 'number':
              return 123;
            case 'string':
              return 'str';
            case 'default':
              return 'default';
            default:
              throw new Error();
           }
         }
      };
      2 * obj // 246
      3 + obj // '3default'
      obj == 'default' // true
      String(obj) // 'str'
      

      对象转换原始值

      以上三种方法都是在对象被预期转换成某种原始值时触发。

      1. 预期被转换成字符串类型

      对应的hint类型为string

      进行输出的地方,如alert()

      String(obj)

      let a = {
        toString () {
          return '2'
        }
      }
      console.log(String(a)) // 2
      

      字符串连接(+)操作

      let a = {
        toString () {
          return '2'
        }
      }
      console.log(a + 'vv')
      

      模板字符串

      let a = {
        [Symbol.toPrimitive] (hint) {
          console.log(hint) // string
          return 2
        }
      }
      console.log(`你是老${a}?`) // 你是老2?
      

      2. 预期被转换成数字类型

      对应的hint类型为numbe

      除法:

      let a = {
        valueOf () {
          return 2
        }
      }
      console.log(2 / a, a / 2) // 1  1
      

      Number(obj):

      let a = {
        [Symbol.toPrimitive] (hint) {
          console.log(hint) // number
          return 2
        }
      }
      console.log(Number(a)) // 2
      

      正负号(注意不是加减运算):

      let a = {
        [Symbol.toPrimitive] (hint) {
          console.log(hint) // number
          return 2
        }
      }
      console.log(+a) // 2
      console.log(-a) // -2
      

      3. 预期被转换成默认类型(其他)

      对应的hint类型为default

      数字加法(即与对象相加的一方为数字类型):

      let a = {
        [Symbol.toPrimitive] (hint) {
          console.log(hint) // default
          return 2
        }
      }
      console.log(1 + a) // 3
      

      这一点有点意外,原以为像这种情况预期转换的类型应该是数字类型,但事实上却是default;

      布尔运算:所有对象都被转换成true;

      let a = {
        [Symbol.toPrimitive] (hint) {
          console.log(hint) // 没有触发
          return false
        }
      }
      console.log(Boolean(a), a && 123) // true 123
      

      布尔运算包括==

      三种方法触发的顺序

      首先判断对象是否有Symbol.toPrimitive(hint)方法,若有则执行该方法,没有则执行下面的步骤;

      如果预期被转换成字符串类型时,则优先执行toString()方法;

      如果预期被转换成默认类型或者数字类型时,则优先执行valueOf()方法:

      :若没有valueOf()方法,但是定义了toString()方法,则会执行toString()方法;

      总结

      本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript 详解JavaScript对象转原始值 https://www.niceym.com/21318.html