如何使用“new”函数构造器调用 JavaScript 函数？

在本教程中，我们将学习如何使用“new”函数构造器调用 JavaScript 函数。

函数是一组可重用的代码，它们执行特定任务并可能返回值。在 JavaScript 中，函数由关键字 function 定义。函数可能没有任何参数，也可能没有任何 return 语句。在 JavaScript 中，我们还有没有函数名的函数，称为匿名函数。

使用“new”函数构造器

Function 构造器创建一个新的 Function 对象。通过使用构造器，我们可以动态创建函数。它接受参数或参数和函数体。它可能存在安全问题，因为我们可以使用它来动态声明函数。

用户可以按照以下语法使用“new”函数构造器调用 JavaScript 函数。

语法

const func = new Function(arg1, arg2, ..., function_body)

在上面的语法中，“func”是存储由“new”函数构造器创建的函数的变量。函数构造器接受参数和函数体。

参数

  • 参数 – 它接受函数的“n”个参数。

  • 函数体 – 它是包含所有函数逻辑的函数体。

无参数调用函数使用“new”函数构造器

参数是我们调用函数时传入函数的信息或数据的集合。函数可以只有一个参数、多个参数或根本没有参数。我们必须编写函数名称并加上开括号和闭括号来调用函数。对于匿名函数，我们需要编写存储函数的变量，然后加上开括号和闭括号。

用户可以按照以下语法调用没有参数的 JavaScript 函数。

语法

// function declaration with no arguments
const func = new Function(function_body)

// function call
func()

在上面的语法中，“func”是存储函数的变量名。

示例

在下面的示例中，我们使用“new”函数构造器调用了一个 JavaScript 函数。我们使用两个按钮的点击事件来调用函数。“蓝色”按钮将使用“changeBlue”函数将“root”元素的背景颜色更改为“蓝色”，“绿色”按钮将使用“changeGreen”函数将“root”元素的背景颜色更改为“绿色”。

<html>
<body>
   <p>Invoking a JavaScript Function with 'new' Function Constructor</p>
   <button onclick="changeBlue()">Blue</button>
   <button onclick="changeGreen()">Green</button>
   <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px;">Welcome to Tutorialspoint</div>
   <script>
      let root = document.getElementById('root')
      const changeBlue = new Function("root.style.backgroundColor = 'blue'")
      const changeGreen = new Function("root.style.backgroundColor = 'green'")
   </script>
</body>
</html>

带参数调用函数使用“new”函数构造器

函数参数是函数中的输入，函数使用这些参数执行其任务并可能返回一些值。函数可以有多个参数，每个参数名称都必须唯一。参数的实际值称为参数。

用户可以按照以下语法调用带参数的 JavaScript 函数。

语法

// function declaration with arguments
const func = new Function(arg1, arg2, function_body)

// function call with arguments
func(arg1, arg2)

在上面的语法中，“func”是存储函数的变量名。“arg1”和“arg2”是函数的两个参数。

示例

在下面的示例中，我们将 JavaScript 函数作为函数调用。我们使用两个按钮的点击事件来执行数字的平方和立方。每个函数都接受一个参数“num”。单击“求平方”按钮时，我们将执行平方函数，该函数接受参数并返回其平方值。单击“求立方”按钮时，我们将执行立方函数，该函数接受参数并返回其值。我们将函数的返回值输出到网页上。

<html>
<body>
   <p>Invoking a JavaScript Function with 'new' Function Constructor</p>
   <p>Calculate the value of Square and Cube of the number 2</p>
   <button onclick="square(2)">Find Square</button>
   <button onclick="cube(2)">Find Cube</button>
   <h4 id="root" style="margin-top: 10px;"></h4>
   <script>
      let root = document.getElementById('root')
      const square = new Function('num', "root.innerHTML = 'Square: ' + num*num")
      const cube = new Function('num', "root.innerHTML = 'Cube: ' + num*num*num")
   </script>
</body>
</html>

更新于：2022年9月14日

658 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告