JavaScript - Function() 建構函式

Function() 建構函式

JavaScript 的Function() 建構函式可以在執行時動態建立函式物件。使用 Function() 建構函式建立的函式只有全域性作用域。

Function() 建構函式可以用來在執行時定義函式，但是應該謹慎使用 Function() 建構函式，因為它可能導致程式碼漏洞。

我們可以向 Function() 建構函式傳遞多個引數。除最後一個引數外，所有引數都是新函式中使用的引數名稱。最後一個引數是函式體。

語法

以下是使用 Function() 建構函式在 JavaScript 中建立函式物件的語法：

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 = 
      "The value returned from the function is: " + func(5, 7);
   </script>
</body>
</html>

輸出

The value returned from the function is: 35

示例

在下面的示例中，我們向 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 引數中編寫多條語句。所有語句都用分號隔開。我們可以建立一個帶有函式宣告或函式表示式的函式，並將其作為<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) // 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 都是自呼叫的。

列印頁面