Javascript 简明教程

JavaScript - Function() Constructor

The Function() Constructor

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

The JavaScript Function() constructor can dynamically create a function object at the run time. The functions created using Function() constructor have global scope only.

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

The Function() constructor can be used to define the function at the run time, but you should use the Function() constructor with caution as it can lead to vulnerabilities in the code.

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

We can pass multiple arguments to the Function() constructor. All arguments except the last argument are the names of the parameters in the new function to be created. The last argument is the function body.

Syntax

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

Following is the syntax to use the Function() constructor to create an object of the function in JavaScript –

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

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

The Function() constructor can be called with or without new keyword to create a new function object. All the parameters are JavaScript strings.

  1. arg1, arg2…​ − These are arguments (optional) names that are used in function body. These are treated as the names of parameters in the function to be created.

  2. functionBody − This argument contains the JavaScript statements comprising the function definition.

Example

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

In the example below, we have passed the 3 arguments to the Function() constructor. The first 2 arguments are arguments for the func() function, and the third is a body of the func() function.

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

In the output, the func() function returns the multiplication of 5 and 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() 构造函数传递了一个参数。因此,它将其视为函数正文。除最后一个之外的所有参数都是可选的。

In the example below, we passed the one argument to the Function() constructor. So, it considers it as the function body. All the parameters except the last one are optional.

在输出中,你可以观察到 func() 函数返回 10 和 20 的和。

In the output, you can observe that the func() function returns the sum of 10 and 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 构造函数创建函数的效率低于使用函数声明或函数表达式并将其调用到代码中来创建函数。

Creating function using Function constructor is less efficient than creating function using a function declaration or function expression and calling it within the code.

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

We can write multiple statements in the functionBody parameter of the Function() constructor. All statements are separated by semicolons. We can create a function with function declaration or function expression and pass it as a statement in the <fucntionBody parameter.

Example

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

In this example, we defined a function sum with function expression and passed to the Function() constructor as a part of the parameter (functionBody). Here the return statement is required.

<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 语句不是必需的。

In this example, we defined a function anonymous function with function declaration and passed to the Function() constructor as a part of the parameter (functionBody). Here the return statement at the end is not required.

<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 都被自我调用。

Please note that in both the examples above, the new Function is self-invoked.