JaveScript 的 newFunction

1、new Function的基础概念

• new Function() 是 JavaScript 中的一个构造函数，它可以实例化一个新的函数对象并返回。该函数对象可以使用传递给 new Function() 的字符串参数作为函数体，并使用其他传递给它的参数作为函数参数，从而动态创建一个可执行的函数。
• 使用 new Function 创建的函数，它的 [[Environment]] 指向全局词法环境，而不是函数所在的外部词法环境。因此，我们不能在 new Function 中直接使用外部变量。不过这样是好事，这有助于降低我们代码出错的可能。并且，从代码架构上讲，显式地使用参数传值是一种更好的方法，并且避免了与使用压缩程序而产生冲突的问题。

2、语法结构

• new Function() 构造函数可以接受多个字符串参数作为函数的参数和函数体

let func = new Function ([arg1, arg2, ...argN], functionBody);

其中，arg1, arg2, …, argn 为函数的参数列表，functionBody 为函数体的字符串表示。当调用 new Function() 函数时，JavaScript 引擎会将 arg1, arg2, …, argn 所表示的参数和 functionBody 所表示的函数体组合成一个新的函数对象，并将该对象返回。

3、示例

• 简单函数

const add = new Function('a', 'b', 'return a + b;');
console.log(add(2, 3)); // 5

• 复杂示例

// 示例数据
const FormData = reactive({
  feeTotal: 1000, 
  res: ''
})

/**
 * 使用new Function 执行前端js脚本
 * @param funBody 函数体
 */
function customeFun(funBody: string) {
  if (!!funBody) {
    /**
     * new Function() 构造函数可以接受多个字符串参数作为函数的参数和函数体
     * new Function ([arg1[, arg2[, ...argn]],] functionBody)
     */
    let customFunc = new Function('FormData', funBody)
    return customFunc(FormData)
  }
  return ''
}

// 执行自定义js函数
function handleClick() {
  // 函数体
  let funBody= "if(FormData.feeTotal>500) {  return '费用金额异常！'} else {  return ‘金额有效！’;}"; 
  let calcResult = customeFun(funBody)
  console.log(calcResult)
}
//调用方法
handleClick();// 费用金额异常！

3、支持es6语法，可使用?.处理对象空异常

// 如果使用空对象，或对象属性不存在会报语法错误
let funbody="if(FormData.a.d) {  return  true} else {  return false}"
//此时由于a.d属性不存在，会导致函数执行异常，此时可通过?.解决属性不确定引起的语法异常
let funbod="if(FormData?.a?.d) {  return  true} else {  return false}"
console.log(customeFun(funBody)) // false

4、总结

• new Function() 的使用场景主要是动态生成 Javascript 代码的情况。由于它可以使用字符串形式作为函数体，并接受可变数量的参数，因此很适合在需要动态生成 JavaScript 代码的场景中使用。
• new Function 可以实现前端函数或脚本的配置化，对于项目中做动态初始化个性设置，或数据提交前的动态逻辑处理十分便利。

5、补充知识

• new Function 和 eval 的区别

  • 执行方式不同：new Function() 构造函数创建的函数对象只会在其被调用时才会执行，而 eval() 函数则立即执行其参数中的 JavaScript 代码，并返回其中的值（如果有）
  • 作用域不同：new Function() 构造函数创建的函数对象没有访问父作用域的能力，只能访问自己的局部变量和全局变量；而 eval() 函数则可以访问其自身函数作用域和父作用域的变量和函数，因此具有更高的灵活性和不可预知性。
  • 安全性不同：由于 new Function() 构造函数定义的函数对象是在严格的函数作用域下运行的，因此其代码不会改变或访问父作用域中的变量。因此，使用 new Function() 构造函数创建函数对象时，可以更好地保证其安全性。而 eval() 函数则无法保证代码的安全性，因为它可以访问并改变父作用域中的变量，从而具有更高的攻击风险。
  • 与 eval() 相比，new Function() 函数具有更好的性能。这是因为 new Function() 函数在编译时会创建一个新的函数对象，不会像 eval() 函数一样将代码注入到当前作用域中。相反，它只在需要时才编译并执行代码，因此在常规情况下，new Function() 的性能比 eval() 更好