适配旧浏览器async函数语法错误 不终止脚本执行的方案咨询

1. 构建阶段转译降级 #

最稳妥的方案是通过Babel等构建工具提前处理语法，配合@babel/preset-env指定需要兼容的旧浏览器范围，搭配core-js注入对应的polyfill，会自动把async/await语法转成旧浏览器支持的Promise或Generator实现，不需要手动写兼容分支代码，运行时也不会出现语法错误，完全规避了动态执行代码的问题。

2. 特性检测+动态脚本分支 #

把async版本的逻辑和兼容版本的逻辑拆成两个独立的JS文件，先通过特性检测判断浏览器对async的支持度，再动态加载对应版本的脚本：

const isAsyncSupported = (() => {
  try {
    return typeof new Function('async () => {}')() === 'function'
  } catch (err) {
    return false
  }
})()

// 根据判断结果动态创建script标签加载对应代码
const script = document.createElement('script')
script.src = isAsyncSupported ? './async-version.js' : './compat-version.js'
document.body.appendChild(script)

这种方案完全不需要用到eval，代码可维护性更高，也不会有作用域污染的问题。

3. Function构造器替代eval #

如果一定要保留动态执行逻辑，可以用Function构造器替代eval，它的作用域限制在全局，不会污染当前局部作用域，风险比eval更低：

try {
  window.foo = new Function('return async function() { console.log("bar") }')()
} catch (e) {
  window.foo = function() { console.log("bar") }
}

你当前场景下使用完全硬编码的字符串、没有任何用户输入或外部动态内容拼接，不会产生XSS之类的注入类安全漏洞。但仍存在以下需要注意的问题：

• 如果网站配置了内容安全策略（CSP），且script-src规则没有添加'unsafe-eval'声明，这段代码会直接被CSP拦截无法执行
• eval内的代码无法被JS引擎提前优化，执行性能会低于原生代码，不过短代码场景下感知不明显
• eval字符串内的代码无法被语法检查、断点调试工具正常识别，后续维护成本更高

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