如何使用JavaScript检测变量或API是否被当前浏览器支持

你不需要额外自定义variableExists这类判断函数，用JS原生语法就能安全完成兼容性检测，核心原则是避免访问不存在的属性/未声明变量时抛出错误中断代码，针对不同场景的判断方式如下：

• 判断全局函数是否存在：直接用typeof操作符，这是唯一不会对未声明变量抛错的判断方式

  // 例：检测浏览器是否支持原生fetch
  if (typeof fetch === 'function') {
    // 支持fetch的逻辑
  } else {
    // 降级用XMLHttpRequest的逻辑
  }
  

• 判断对象上的方法、属性是否存在：需要逐级确认前置对象存在，再访问目标属性，避免链式访问时某一级为undefined触发报错。

针对你给出的canvas actualBoundingBoxAscent 检测场景，兼容所有浏览器（包括IE）的正确写法如下：

let supportBoundingBox = false;
// 先逐级判断前置依赖是否存在
if (typeof ctx !== 'undefined' && typeof ctx.measureText === 'function') {
  const metrics = ctx.measureText('');
  // 再判断目标属性是否存在，不要直接写if(metrics.xxx)，避免属性值为0、空字符串等假值时误判
  supportBoundingBox = typeof metrics.actualBoundingBoxAscent !== 'undefined';
  // 也可以用in操作符判断：supportBoundingBox = 'actualBoundingBoxAscent' in metrics;
}

if (supportBoundingBox) {
  // 使用actualBoundingBoxAscent的正常逻辑
} else {
  // 降级兼容逻辑
}

如果你的项目不需要兼容IE等老旧浏览器，可以用ES2020新增的可选链操作符?.简化写法，它会在链式访问某一级不存在时自动返回undefined，不会抛错：

if (typeof ctx?.measureText?.('')?.actualBoundingBoxAscent !== 'undefined') {
  // 支持时的逻辑
} else {
  // 降级逻辑
}

几个容易踩的坑：

• 不要直接对可能未声明的变量/不存在的属性做真值判断（比如直接写if (ctx.measureText('').actualBoundingBoxAscent)），一旦某一级不存在会直接抛错中断代码
• 如果目标属性可能是0、''、false这类假值，不要用if (xxx)做判断，会误判为不存在，一定要用typeof或者in操作符判断
• 判断函数时优先判断类型为function，避免遇到属性名和函数重名但值不是函数的场景

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