如何使用“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 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.