杭州低价做网站,国内永久免费域名申请网站,博客系统 wordpress,一个网站主机多少钱一年1、new Function的基础概念 new Function() 是 JavaScript 中的一个构造函数#xff0c;它可以实例化一个新的函数对象并返回。该函数对象可以使用传递给 new Function() 的字符串参数作为函数体#xff0c;并使用其他传递给它的参数作为函数参数#xff0c;从而动态创建一…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.feeTotal500) { return 费用金额异常} else { return ‘金额有效’;}; let calcResult customeFun(funBody)console.log(calcResult) } //调用方法 handleClick();// 费用金额异常3、支持es6语法可使用?.处理对象空异常 // 如果使用空对象或对象属性不存在会报语法错误 let funbodyif(FormData.a.d) { return true} else { return false} //此时由于a.d属性不存在会导致函数执行异常此时可通过?.解决属性不确定引起的语法异常 let funbodif(FormData?.a?.d) { return true} else { return false} console.log(customeFun(funBody)) // false4、总结 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() 更好