JavaScript - Function() 构造函数

Function() 构造函数

JavaScript 的Function() 构造函数可以在运行时动态创建函数对象。使用 Function() 构造函数创建的函数只有全局作用域。

Function() 构造函数可以用来在运行时定义函数，但是应该谨慎使用 Function() 构造函数，因为它可能导致代码漏洞。

我们可以向 Function() 构造函数传递多个参数。除最后一个参数外，所有参数都是新函数中使用的参数名称。最后一个参数是函数体。

语法

以下是使用 Function() 构造函数在 JavaScript 中创建函数对象的语法：

const obj = new Function(arg1, arg2..., functionBody);

Function() 构造函数可以带或不带 new 关键字来调用以创建一个新的函数对象。所有参数都是 JavaScript 字符串。

参数

arg1, arg2... − 这些是（可选的）参数名称，在函数体中使用。这些被视为要创建的函数的参数名称。
functionBody − 此参数包含构成函数定义的 JavaScript 语句。

示例

在下面的示例中，我们向 Function() 构造函数传递了 3 个参数。前两个参数是 func() 函数的参数，第三个是 func() 函数的主体。

在输出中，func() 函数返回 5 和 7 的乘积。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const func = new Function("p", "q", "return p * q");
      document.getElementById("output").innerHTML = 
      "The value returned from the function is: " + func(5, 7);
   </script>
</body>
</html>

输出

The value returned from the function is: 35

示例

在下面的示例中，我们向 Function() 构造函数传递了一个参数。因此，它将其视为函数体。除最后一个参数外，所有参数都是可选的。

在输出中，您可以看到 func() 函数返回 10 和 20 的和。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const func = new Function("return 10 + 20");
      document.getElementById("output").innerHTML =
      "The value returned from the function is: " + func();
   </script>
</body>
</html>

输出

The value returned from the function is: 30

函数声明或函数表达式作为参数

使用 Function 构造函数创建函数的效率低于使用函数声明或函数表达式创建函数并在代码中调用它。

我们可以在 Function() 构造函数的functionBody 参数中编写多条语句。所有语句都用分号隔开。我们可以创建一个带有函数声明或函数表达式的函数，并将其作为<functionBody 参数的一部分传递。

示例

在这个例子中，我们用函数表达式定义了一个名为 sum 的函数，并将其作为参数 (functionBody) 的一部分传递给 Function() 构造函数。这里需要 return 语句。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const add = new Function(
	  "const sum = function (a, b) {return  a+ b};  return sum",
	  )();    
      document.getElementById("output").innerHTML = add(5,10) // 15
   </script>
</body>
</html>

示例

在这个例子中，我们用函数声明定义了一个匿名函数，并将其作为参数 (functionBody) 的一部分传递给 Function() 构造函数。这里不需要最后的 return 语句。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const sayHello = new Function(
	  "return function (name) { return `Hello, ${name}` }",
	  )();    
      document.getElementById("output").innerHTML = 
	  sayHello("world"); // Hello, world
    </script>
</body>
</html>

请注意，在上面两个示例中，新的 Function 都是自调用的。

打印页面