如何让自定义类eval函数在调用者作用域执行代码？

问题背景 #

eval()会在当前词法作用域执行字符串形式的代码。如果想实现一个自定义版的eval——先修改传入的代码字符串（比如支持异步操作）再执行——直接在自定义函数内部调用eval会遇到作用域问题：此时eval会使用自定义函数的作用域，而非调用者的局部作用域。比如下面的例子，eval2无法读取调用者的局部变量x：

function eval2(code){
    return eval(code)
}

(() => {
    let x = 1;
    let code = `console.log(x)`
    eval(code)      // 输出1
    eval2(code)     // 抛出ReferenceError: x is not defined
})()

目前能想到的回调函数方案，不仅没法创建局部变量，使用体验也很差。下面给出更优雅的实现方式，同时解释eval行为变化的原因。

为什么间接调用eval会改变作用域？ #

eval是JS中特殊的函数，它的作用域规则和普通函数完全不同：

• 直接调用：当你直接写eval(code)时，它会在你写这句话的当前词法作用域内执行代码，能访问该作用域的所有局部变量。
• 间接调用：如果把eval赋值给变量、作为参数传递，或者在另一个函数内部调用它（比如你的eval2），就属于间接调用。此时eval会切换到全局作用域执行，自然拿不到调用者的局部变量。

优雅的实现方案 #

1. 返回执行函数，让eval在调用者作用域直接执行 #

这是最接近原生eval体验的方式：自定义函数返回一个函数，由调用者在自己的作用域内执行这个返回函数，触发eval的直接调用，从而访问局部变量。

function customEval(code) {
    // 先修改代码，比如添加异步包裹支持await
    const modifiedCode = `(async () => { ${code} })()`;
    // 返回一个函数，让调用者在自身作用域执行
    return () => eval(modifiedCode);
}

// 使用示例
(async () => {
    let x = 1;
    await customEval('console.log(x)')(); // 输出1
    // 也能创建局部变量
    await customEval('let y = 2; console.log(x + y)')(); // 输出3
})()

2. 使用new Function（安全优先，适合不需要访问局部变量的场景） #

如果你的代码不需要访问调用者的局部变量，new Function是更安全的选择——它默认运行在全局作用域，不会污染或访问局部作用域。如果需要传递变量，可以显式传参：

function customEval(code, ...args) {
    // 修改代码，比如添加异步逻辑
    const modifiedCode = `return (async () => { ${code} })()`;
    return new Function(...args, modifiedCode)(...args);
}

// 使用示例
(async () => {
    let x = 1;
    await customEval('console.log(x)', 'x', x); // 输出1
})()

3. 动态导入（适合异步场景，安全性高） #

如果需要处理异步代码，可以把代码字符串封装成模块，通过URL.createObjectURL和动态导入执行：

async function customEval(code) {
    // 修改代码，添加模块导出逻辑
    const modifiedCode = `export default (async () => { ${code} })()`;
    const blob = new Blob([modifiedCode], { type: 'application/javascript' });
    const url = URL.createObjectURL(blob);
    const module = await import(url);
    URL.revokeObjectURL(url);
    return module.default;
}

// 使用示例
(async () => {
    let x = 1;
    // 模块无法直接访问局部变量，需通过模板字符串注入
    await customEval(`console.log(${x})`); // 输出1
})()

总结 #

• eval的作用域由调用方式决定：直接调用用当前词法作用域，间接调用用全局作用域。
• 要让自定义函数访问调用者的局部变量，最优方式是返回执行函数，让eval在调用者作用域内直接执行。
• 若不需要访问局部变量，优先选择new Function或动态导入，安全性更高。

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