JavaScript中import().then()的变量作用域问题及解决咨询

问题原因 #

这是因为动态import()的回调函数被JavaScript引擎特殊处理，它的作用域规则和普通闭包不同：

• 函数参数path会被作为import()的输入参数，被引擎显式绑定到回调的作用域中，所以能正常访问；
• 而let声明的index属于函数内部的块级作用域变量，动态import()的异步回调执行时，引擎会认为该变量仍处于**暂时性死区（TDZ）**中，或者说回调的特殊作用域无法正确捕获这个块级变量的绑定，因此抛出初始化未完成的错误。

解决方法 #

有几种简单的方式可以解决这个问题：

• 改用var声明变量
  var没有暂时性死区，且属于函数作用域，能被回调的闭包正常捕获：

load(path) {
    var index = 5;
    import(path)
        .then((data) => {
             console.log(path);
             console.log(index);
        })
}

• 使用async/await改写函数
  将函数改为异步函数，用await等待模块加载完成，此时函数的执行上下文会保持，index的作用域不会被销毁：

async load(path) {
    let index = 5;
    const data = await import(path);
    console.log(path);
    console.log(index);
}

• 提前将变量值存入闭包
  通过立即执行函数将index的值捕获到新的闭包中，让回调能访问到这个值：

load(path) {
    let index = 5;
    (() => {
        const idx = index;
        import(path)
            .then((data) => {
                 console.log(path);
                 console.log(idx);
            })
    })();
}

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