Vue表单生成器中如何判断字段定义的JavaScript原始类型

你遇到的核心问题是：formDesc.fields里定义的type是内置构造函数本身（比如Array、String、Date），而非对应类型的实例，所以之前用typeof或者Object.prototype.toString.call判断时，得到的都是function——因为这些构造函数本身就属于函数类型。

下面给你几个直接有效的解决方案：

方案1：直接比较构造函数（最推荐） #

既然你定义的item.type就是全局的内置构造函数，直接用全等比较就能准确判断类型：

// 修改你的isArray方法
isArray (item) {
  if (this.check(item) && item.type === Array && item.hasOwnProperty('list')) {
    return true
  } else {
    return false
  }
}

// 同理，判断数字类型
isNumber (item) {
  return this.check(item) && item.type === Number
}

// 判断日期类型
isDate (item) {
  return this.check(item) && item.type === Date
}

这种方法最直接高效，且无歧义，完全适配你使用内置类型的场景。

方案2：利用构造函数的name属性 #

每个内置构造函数都有name属性，返回它的字符串名称（比如Array.name是"Array"，Number.name是"Number"），你可以基于这个属性做判断，代码会更灵活：

// 重写你的getType方法
getType (constructor) {
  return constructor.name.toLowerCase()
}

// 然后修改isArray方法
isArray (item) {
  if (this.check(item) && this.getType(item.type) === 'array' && item.hasOwnProperty('list')) {
    return true
  } else {
    return false
  }
}

这个方法的优势是，如果以后需要支持自定义类型构造函数，只要保证构造函数的name属性正确，就能复用这套判断逻辑。

为什么之前的方法无效？ #

你之前尝试的几种方法没生效，原因很明确：

• typeof item.type返回function：因为Array、String这些本身就是构造函数，属于函数类型；
• Object.prototype.toString.call(item.type)返回[object Function]：同样是因为传入的是构造函数，而非该类型的实例；
• item.type.constructor === Number：构造函数的constructor是Function，所以这个判断永远不成立。

如果非要复用你原来的getType方法，需要传入该类型的实例（比如new item.type()），但这样会额外创建对象，完全没必要，不如直接比较构造函数高效。

内容的提问来源于stack exchange，提问作者Anthony