问题

Vue项目中遇到这样的问题，没有提示具体哪个文件出问题，定位起来比较麻烦，后面发现是组件里props对象定义的类型有问题
TypeError: Right-hand side of 'instanceof' is not callable

在控制台里输入'jianhong' instanceof 'array' 就会有这个错误

解决

错误的写法(写快了 没注意到)

  props: {
    list: {
      type: {
        type: 'array',
        default: () => {
          return []
        }
      }
    }
  }

改写为正确的写法

  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  }

props里定义属性,type属性有以下7种(注意：首字母要大写)

• String
• Number
• Function
• Boolean
• Object
• Array
• Symbol

props属性改正确之后,就解决了这个报错

props部分源码实现

Vue源码 深入响应式原理 （六）Props (v2.6.11)
下面是Vue对props的类型校验的部分源码

对prop 的类型做校验，先是拿到prop中定义的类型 type，并尝试把它转成一个类型数组，然后依次遍历这个数组，执行assertType(value, type[i])去获取断言的结果，直到遍历完成或者是 valid 为 true 的时候跳出循环。

const simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/
function assertType (value: any, type: Function): {
  valid: boolean;
  expectedType: string;
} {
  let valid
  const expectedType = getType(type)
  if (simpleCheckRE.test(expectedType)) {
    const t = typeof value
    valid = t === expectedType.toLowerCase()
    // for primitive wrapper objects
    if (!valid && t === 'object') {
      valid = value instanceof type
    }
  } else if (expectedType === 'Object') {
    valid = isPlainObject(value)
  } else if (expectedType === 'Array') {
    valid = Array.isArray(value)
  } else {
    valid = value instanceof type
  }
  return {
    valid,
    expectedType
  }
}

assertType 的逻辑很简单，先通过 getType(type) 获取 prop 期望的类型 expectedType`，然后再去根据几种不同的情况对比 prop 的值 value 是否和 expectedType 匹配，最后返回匹配的结果。

如果循环结束后 valid 仍然为 false，那么说明 prop 的值 value 与 prop 定义的类型都不匹配，那么就会输出一段通过 getInvalidTypeMessage(name, value, expectedTypes)生成的警告信息

最后判断当 prop 自己定义了 validator 自定义校验器，则执行 validator 校验器方法，如果校验不通过则输出警告信息。

推荐阅读

连点成线 - 前端成长之路

连点成线 - 前端成长之路

Vue源码学习目录

Vue源码学习完整目录

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强