Javascript如何实现为函数绑定自定义作用域变量的包装方法？

实现方案 #

核心逻辑 #

JS采用静态词法作用域，函数作用域在定义时就已固定，无法直接修改。我们可以通过将函数序列化为字符串，将注入变量作为闭包参数包裹后重新生成函数的方式实现需求。

完整实现代码 #

function wrapFnOnScope(targetFn, scopeVars) {
  const varKeys = Object.keys(scopeVars)
  const varValues = Object.values(scopeVars)
  // 将目标函数转为字符串，包裹为接收注入变量的返回值
  const generatedFn = new Function(...varKeys, `return ${targetFn.toString()}`)
  // 传入注入变量生成绑定了对应作用域的新函数
  const boundFn = generatedFn(...varValues)
  // 兼容原函数的参数传递与this指向
  return function (...args) {
    return boundFn.apply(this, args)
  }
}

测试验证 #

const someFunction = () => console.log(a)
const wrappedFn = wrapFnOnScope(someFunction, { a: "Hello World!" })
wrappedFn() // 正常打印 Hello World!

注意事项 #

• 仅适用于用户自定义的JS函数，内置原生函数toString()会返回[native code]，无法用该方法处理
• 如果目标函数依赖原作用域的私有闭包变量，重新生成函数后会丢失原闭包引用，仅能访问注入变量和全局作用域变量
• 请勿用该方法包装不可信来源的第三方函数，避免代码注入安全风险

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