解决TypeError: Right-hand side of ‘instanceof‘ is not callable

最新推荐文章于 2024-06-06 08:00:00 发布

陈坚泓

最新推荐文章于 2024-06-06 08:00:00 发布

阅读量3w

点赞数 14

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42752574/article/details/105377140

版权

Vue 专栏收录该内容

63 篇文章 29 订阅

订阅专栏

解决TypeError: Right-hand side of 'instanceof' is not callable

问题

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
  }
}