为何可选链访问多级属性时空对象报错，null却不报错？

在Node REPL或浏览器控制台中执行以下代码：

> ({})?.a
undefined
> (null)?.a
undefined
> (null)?.a.b
undefined
> ({})?.a.b
Uncaught TypeError: Cannot read properties of undefined (reading 'b')

既然(anything)?.a的结果为undefined，为何null?.a得到的undefined读取不存在的属性时不会抛出错误？

核心是可选链操作符?.的短路求值逻辑，别被表面的返回值误导：

• 对于null?.a.b，JavaScript会从左到右检查链式访问的每一环：首先判断null是null/undefined，直接触发短路，整个表达式直接返回undefined，根本不会执行后续的.b属性访问操作。
• 而({})?.a.b的逻辑是：先执行({})?.a，因为空对象不是null/undefined，所以正常访问a属性得到undefined；接下来用普通的.访问undefined.b，这时候因为undefined没有可访问的属性，且这里用的不是可选链，所以直接抛出类型错误。

简单总结：

• null?.a.b是全程被可选链的短路逻辑覆盖，没走到访问undefined.b的步骤
• ({})?.a.b只有前半段用了可选链，后半段是普通属性访问，自然会报错

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