用new关键字声明函数并在javascript中自调用它

Question

我遇到了一个代码，它看起来像这样：

const tempFunc = exp => {
return new Function(`return ${exp}`)()
}

第一个问题：它是否自调用函数并返回它？。tempFunc到底返回什么？

第二个问题：如果我们调用函数：

let result=tempFunc('3+2')

结果是5。它如何转换字符串并计算结果？

Answer 1

当您调用tempFunc('3+2')时，它返回new Function("return 3+2")()，它将创建一个函数(function() { return 3+2 };(，然后调用该函数。

相反，如果tempFunc看起来像这样：

const tempFunc = exp => {
return new Function(`return ${exp}`);
}

然后它只会返回未调用的新函数，您必须单独调用它：tempFunc('3+2')();

函数构造函数

函数构造函数(new Function()(非常有趣；您基本上可以告诉它第一个n参数需要什么参数，最后一个参数是函数体。在您的示例中，我们的新函数没有自变量，但我们可以创建一个接受自变量的函数：

const tempFunc = num => {
return new Function('x', `return x + ${num}`)(2);
}
tempFunc(3);
// 5

Answer 2

如果箭头函数让你感到困惑，你也可以这样写：

const tempFunc = function(exp) {
const compiledFunc = new Function(`return ${exp}`)
return compiledFunc()
}

此：

new Function(`return ${exp}`)

使用提交的字符串创建一个新的Function对象。字符串(在您的示例中为"3+2"(被编译为一个函数，就好像它是javascript代码一样。然后可以像调用一个普通的javascript函数一样调用这个Function对象。这就是最后两个偏执狂所做的：

return new Function(`return ${exp}`)() // <-- these call it

因此，如果您调用tempFunc，它会以javascript代码的形式运行字符串并返回它，这与eval的操作非常相似。