为什么new Function可实现计算器计算？错误写法为何会报错？

1. new Function基础语法规则 #

new Function是JavaScript内置的函数构造器，用于动态创建函数实例，固定语法如下：

new Function([形参1名称, 形参2名称...], 函数体字符串)

所有传入的参数都为字符串类型：

• 最后一个参数必须是合法的JavaScript语句字符串，作为新函数的执行逻辑
• 前面的可选参数是新函数的形参名称
• 构造器执行完成后返回的是函数实例，需要主动调用才能拿到执行结果

2. 原有计算器代码可正常执行的原因 #

你最初的calc函数逻辑：

result.value = new Function("return " + result.value)();

举个实际运行场景：如果输入框result中已经输入了表达式3+5*2，代码执行时会先取result.value的值做字符串拼接，最终传入new Function的函数体内容为"return 3+5*2"，是完全合法的JS语句。
末尾的()会立刻调用新创建的函数，函数执行后返回表达式的计算结果13，就能正确赋值给输入框。

3. 官方示例的逻辑说明 #

官方示例代码：

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));

这里是给新函数定义了a、b两个形参，函数体逻辑为返回两个形参的和，之后将创建好的函数赋值给sum变量，调用sum(2,6)时传入实参即可得到计算结果，本质和你的代码逻辑不冲突，只是使用场景不同。

4. 修改后代码报错的原因 #

你修改后的代码存在两个核心错误：

result.value = new Function("return  + result.value");

• 字符串拼接逻辑错误：你把result.value写在了引号内部，不会做变量取值，最终传入的函数体是固定字符串"return + result.value"，+前面缺少运算值属于语法错误；同时new Function创建的函数作用域为全局作用域，即使语法没问题，函数内部也无法直接访问局部作用域的result变量。
• 缺少函数调用步骤：new Function返回的是函数对象，你没有加()调用就直接赋值给输入框，就算函数逻辑正确，最终输入框只会显示函数的序列化字符串，而非计算结果。

使用new Function动态执行字符串和eval风险类似，存在XSS注入隐患，如果计算器允许用户自由输入内容，必须做好输入校验，过滤非运算类的非法字符。

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