JavaScript 中的 Function()
构造函数可以在运行时动态创建函数对象。使用 Function()
构造函数创建的函数具有全局作用域。
Function()
构造函数可以在运行时定义函数,但是应该谨慎使用,因为它可能导致代码中的漏洞。
我们可以向 Function()
构造函数传递多个参数。除最后一个参数外的所有参数都是新创建函数中的参数名称。最后一个参数是函数体。
语法
以下是在 JavaScript 中使用 Function()
构造函数创建函数对象的语法:
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 =
"函数返回的值是: " + func(5, 7);
</script>
</body>
</html>
输出:
函数返回的值是: 35
示例
在下面的例子中,我们向 Function()
构造函数传递了一个参数。因此,它将其视为函数体。除最后一个参数外的所有参数都是可选的。
在输出中,你可以看到 func()
函数返回 10 和 20 的和。
<html>
<body>
<p id="output"> </p>
<script>
const func = new Function("return 10 + 20");
document.getElementById("output").innerHTML =
"函数返回的值是: " + func();
</script>
</body>
</html>
输出:
函数返回的值是: 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);
</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");
</script>
</body>
</html>
请注意,在上面的两个例子中,new Function
都是自调用的。