TS枚举 —— 数字枚举可以互相映射的原因

466 阅读2分钟

TS数字枚举可以互相映射的原因

  • 数字枚举

    • TS的数字枚举是枚举的一种,TS的枚举如果不为它的枚举成员定义字符串等值的话,那么默认是数字枚举。
    • 数字枚举也就是,枚举中所有枚举成员的值都是number类型。
    • 如果不为数字枚举的枚举成员定义值,那么将从0开始递增。
  • 数字枚举互相映射

    • 数字枚举是可以互相映射的。(其他如字符串枚举都不行)

      enum LivingStatus{
        preview,
        living,
        replay,
        ended
      }
      LivingStatus['preview'] // 0
      LivingStatus[0] //'preview'
      
  • 数字枚举能够互相映射的原理

    • 首先我们来看一下,上面的TS枚举,被编译成JS后是什么样子

      var LivingStatus;
      (function(LivingStatus){
        LivingStatus[(LivingStatus['preview'] = 0)] = 'preview'
        LivingStatus[(LivingStatus['living'] = 1)] = 'living'
        LivingStatus[(LivingStatus['reply'] = 2)] = 'reply
        LivingStatus[(LivingStatus['ended'] = 3)] = 'ended'
      })(LivingStatus || (LivingStatus = {}))
      

      这里我们可以看到,首先声明了一个变量LivingStatus,然后是一个IIFE函数,这个IIFE函数接受一个参数LivingStatus,在调用这个IIFE的时候会传入全局作用域中定义的LivingStatus标识符指向的对象,如果LivingStatus没有初始化的话,就会立即执行一个赋值语句,令LivingStatus标识符指向一个新创建的空对象,并将这个空对象传入IIFE。 在执行这个立即执行的函数时,首先JS引擎准备执行第一行

      LivingSatus[(LivingStatus['preview'] = 0)] = 'preview'

      JS引擎发现这是一句赋值语句,所以首先会对LivingSatus[(LivingStatus['preview'] = 0)]

      进行LHS查询,在找到LivingStatus对象之后,查找

      (LivingStatus['preview'] = 0)成员,然后JS引擎发现,这时一个赋值操作,所以会先将0赋予LivingStatus['preview'],但是由于JS的赋值操作符是会返回值的,并且返回的是被赋予的值,所以

      LivingSatus[(LivingStatus['preview'] = 0)]变成了

      LivingStatus[0]