Vue场景下如何让JavaScript的new Function访问外部方法

我明白你的痛点——用new Function()动态执行表达式时，没法直接访问外部定义的dropNode、minallowed这类方法对吧？这是因为new Function()创建的函数默认作用域是全局的，拿不到你组件或其他文件里的局部方法。下面给你几个实用的解决思路：

1. 把外部方法作为参数传入动态函数 #

这是最安全且推荐的方式，不会污染全局，也能精准控制哪些方法可以被表达式访问。

修改你的expression方法，让它支持接收一个包含外部方法的上下文对象，然后把这些方法作为参数注入到动态函数中：

expression(expr, context = {}) {
  // 整理参数列表：先传dataObject，再传上下文里的所有方法名
  const paramNames = ['dataObject', ...Object.keys(context)];
  // 创建动态函数，参数列表是paramNames，函数体是传入的expr
  const fn = new Function(...paramNames, expr);
  // 调用函数时，传入dataObject和上下文里的所有方法
  return fn(this.dataObject, ...Object.values(context));
}

然后在Vue模板里调用时，把需要的方法传入：

<v-checkbox 
  :value="getValue(layout.responseNode)" 
  @change="setValue(layout.responseNode, $event);expression(layout.onChange, { dropNode, minallowed })" 
  :label="expression(layout.label)" 
  :disabled="expression(layout.enableIf)"
></v-checkbox>

注意：这里的dropNode和minallowed需要是当前组件能访问到的——如果是从其他文件导入的，记得先import进来；如果是挂载到Vue实例上的方法，用this.dropNode（模板里可以直接写dropNode）。

2. 把外部方法挂载到全局对象（谨慎使用） #

如果你的项目比较小，或者这些方法确实需要全局可用，可以把它们挂载到window对象上（Vue2里也可以挂到Vue.prototype，但Vue3不推荐）。

比如在你的方法文件或项目入口里：

import { dropNode, minallowed } from './path-to-your-methods';
// 挂载到window全局
window.dropNode = dropNode;
window.minallowed = minallowed;

这样在new Function()的表达式里就能直接调用dropNode()了，因为动态函数会从全局作用域找到这些方法。但要注意：这种方式会污染全局命名空间，大型项目里容易引发命名冲突，非必要不推荐。

3. 使用eval替代new Function()（仅适用于可信表达式） #

如果你的表达式是完全可控的（比如都是你自己代码里定义的，不是用户输入的），可以用eval来创建闭包，这样动态代码能直接访问当前作用域的方法：

expression(expr) {
  // 用自执行函数包裹表达式，让它能访问当前上下文的dataObject和外部方法
  const executeExpr = eval(`(function(dataObject) { return ${expr}; })`);
  return executeExpr(this.dataObject);
}

这样在layout.onChange的表达式里就能直接写dropNode(xxx)了，因为eval的作用域是当前组件的上下文。但必须强调：如果表达式包含用户输入的内容，绝对不能用eval，会有严重的XSS安全风险！

额外注意事项 #

• 安全性：不管用哪种方案，都要确保动态执行的表达式是可信的，避免执行恶意代码。
• 性能：new Function()和eval都会有一定的编译开销，如果频繁调用，可以考虑缓存编译后的函数。
• 类型提示：如果用TypeScript，动态执行的代码会失去类型检查，需要额外处理类型定义。

内容的提问来源于stack exchange，提问作者Binesh Nambiar C