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

问题描述

我遇到了一个看起来像这样的代码

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

一个问题: 它是自调用函数并返回它吗? tempFunc 究竟返回什么?

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

let result=tempFunc('3+2')

结果是5.如何转换字符串并计算结果?

解决方法

当您调用 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
,

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

 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 所做的非常相似。