如何在特定条件下终止JavaScript对象属性访问链式调用？

• 对象A持有一个由Object B实例构成的数组
• 对象A对外提供接收索引参数、返回对应Object B实例的getter方法
• Object B包含一组可被外部调用的方法

通过a.getB().method()链式调用Object B方法时，测试代码如下：

class ObjectB{
  foo(){return 'bar'}
}

class ObjectA{
  constructor(){
    this.list = []
   }
  addB(){this.list.push(new ObjectB)}
  getB(index) { if(index < this.list.length) return this.list[index]}
}

const a = new ObjectA();
a.addB();
a.getB(0).foo(); // 正常执行
a.getB(4).foo(); // 抛出错误，getB(4)返回undefined，不存在foo方法

传入索引超出数组长度时，getB返回undefined，后续访问.foo()会直接抛错。尝试在getB()内添加else分支、内部try/catch都无法在非法索引时阻断后续属性访问，需要无需在每处链式调用外层包裹try/catch的简洁处理方案。

方案1：非法索引返回安全代理对象（推荐，零调用侧改动） #

索引不合法时不返回undefined，而是返回一个和ObjectB接口对齐的代理空对象，所有方法调用都不会抛错，默认返回undefined，完全兼容原有链式写法，不需要修改任何已有调用代码：

class ObjectB{
  foo(){return 'bar'}
}

// 生成安全代理，匹配ObjectB的所有方法
const createSafeB = () => new Proxy({}, {
  get: (_, prop) => {
    if (typeof ObjectB.prototype[prop] === 'function') {
      return () => undefined
    }
    return undefined
  }
})

class ObjectA{
  constructor(){
    this.list = []
  }
  addB(){this.list.push(new ObjectB)}
  getB(index) { 
    if(index < this.list.length) return this.list[index]
    return createSafeB()
  }
}

// 测试
const a = new ObjectA();
a.addB();
console.log(a.getB(0).foo()) // 输出 'bar'，原有逻辑完全不变
console.log(a.getB(4).foo()) // 输出 undefined，不会抛出错误

方案2：可选链操作符（轻量场景首选，改动量极小） #

如果运行环境支持ES2020标准，不需要修改类逻辑，只需要在属性访问前加可选链符?.，遇到null/undefined会自动短路返回undefined，不会继续执行后续访问：

a.getB(0)?.foo() // 正常返回 'bar'
a.getB(4)?.foo() // 返回undefined，无报错

该方案写法最简洁，缺点是所有调用点都需要手动添加?.，调用点分散时容易漏写。

方案3：自定义错误+全局统一捕获 #

如果需要明确感知非法访问场景，可以在索引非法时抛出固定标识的自定义错误，通过全局错误监听、框架错误边界统一处理，不需要每个调用点单独包裹try/catch：

class ObjectA{
  // 其余逻辑不变
  getB(index) { 
    if(index < this.list.length) return this.list[index]
    throw new Error('ERR_INVALID_B_INDEX')
  }
}

// 浏览器环境全局错误兜底示例
window.addEventListener('error', (e) => {
  if(e.message === 'ERR_INVALID_B_INDEX') {
    // 统一处理非法访问逻辑：日志上报、用户提示等
    console.warn('访问了不存在的B实例')
    return
  }
})

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