vue js 可选链报错问题?

Question

const name = undefined
console.log('🚀 ~ mounted ~ name', name?.()) // undefined

const name = 'mike'
console.log('🚀 ~ mounted ~ name', name?.()) // TypeError: name is not a function

这是为什么呢....

Answer 1

Optional Chaining 只负责null/undefined判断，不负责判断它是不是function。
如果a非null非undefined也非function，a?.()就会抛出错误。

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]

a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
                              // otherwise, evaluates to `a.b()`

a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function
                             // invokes the function `a` otherwise

参见提案：https://github.com/tc39/propo...

Answer 2

可选链是为了防止引用undefined 或 null，不是让你这么用的
https://developer.mozilla.org...

Answer 3

你的代码等价于

const name = 'mike'
if(name){//name是个字符串所以这里为true
    console.log('🚀 ~ mounted ~ name', name.()) //name只是个字符串，所以这时报错
}

Answer 4

如果只是判断是否为函数可以参考如下代码：
typeof xxx === 'function' && xxx()