Javascript 简明教程

JavaScript - Function() Constructor

The Function() Constructor

JavaScript Function() 构造函数可以在运行时动态创建函数对象。使用 Function() 构造函数创建的函数仅具有全局范围。

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

我们可以向 Function() 构造函数传递多个参数。除最后一个参数之外的所有参数都是要创建的新函数中的参数名。最后一个参数是函数正文。

Syntax

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

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

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

  1. arg1, arg2…​ − 这些参数（可选）在函数正文中使用。这些参数视为要创建的函数中的参数名。

  2. functionBody − 这个参数包含构成函数定义的 JavaScript 语句。

Example

在下面的示例中，我们向 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

Example

在下面的示例中，我们向 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 Declaration or Function Expression as Parameter

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

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

Example

在这个示例中，我们用函数表达式定义了函数 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>

Example

在这个示例中，我们用函数声明定义了一个匿名函数，并将其作为参数（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>

请注意，在上面的两个示例中，new Function 都被自我调用。