JavaScript - Function() 构造函数_JavaScript 菜鸟教程

Function（）构造函数

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

Function（）构造函数可用于在运行时定义函数，但应谨慎使用 Function（）构造函数，因为它可能会导致代码中出现漏洞。

我们可以将多个参数传递给 Function（）构造函数。除最后一个参数外，所有参数都是要创建的新函数中的参数名称。最后一个参数是函数体。

语法

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

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

Function（）构造函数可以带或不带 new 关键字来创建新的函数对象。所有参数都是 JavaScript 字符串。

参数

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

例

在下面的示例中，我们已将 3 个参数传递给 Function（）构造函数。前 2 个参数是 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

例

在下面的示例中，我们将 one 参数传递给 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 参数中编写多个语句。所有语句都用分号分隔。我们可以使用函数声明或函数表达式创建一个函数，并将其作为语句传递到 <fucntionBody 参数中。

例

在这个例子中，我们使用函数 expression 定义了一个函数 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 都是自调用的。

<< JavaScript - 默认参数 JavaScript - 函数提升 >>

Function（） 构造函数

语法

参数

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

Function（）构造函数