如何在 JavaScript 中從字串建立函式?


在 JavaScript 中從字串建立函式在您需要動態地在執行時生成函式或當您擁有包含您希望執行的函式程式碼的字串時非常有用。

從字串構建函式的能力是 JavaScript 的一項有用功能,它允許在執行時動態建立函式。`eval()` 函式和 `new Function()` 函式物件是執行此操作的兩種最常用的方法,儘管兩者都存在重大的安全漏洞。

即使 `Function.prototype.constructor` 不太為人所知,它也是一個更安全的選項。在選擇用於從字串建立 JavaScript 函式的方法之前,務必考慮風險和用例。

方法 1:使用 `eval()` 函式

JavaScript `eval()` 方法是從字串構建函式的最簡單方法之一。此強大的 `eval()` 函式可以執行作為字串提供給它的任何 JavaScript 程式碼。

示例

<html>
<body>
   <p id="result"></p>
   <script>
      let functionString = "function add(a, b) { return a + b; }";
      let add = eval("(" + functionString + ")");
      document.getElementById("result").innerHTML = "Sum of 1 and 2: " + add(1, 2);
   </script>
</body>
</html>

在這裡我們可以看到,我們有一個函式,它接受兩個引數並返回它們的和。現在,此函式包含在一個字串中。`eval()` 函式接收此字串作為引數並對其進行評估,然後返回該函式。然後將返回的函式分配給名為 `add` 的變數,該變數可以像任何其他函式一樣使用。

但是,它會執行提供給它的任何 JavaScript 程式碼,因此在生產程式碼中使用它可能存在風險,因為它可能導致安全漏洞。

方法 2:使用 `new Function()` 建構函式

在 JavaScript 中從字串建立函式的另一種方法是使用 `Function()` 建構函式。`Function()` 建構函式從包含函式程式碼的字串建立一個新的函式物件。以下是如何使用 `Function()` 建構函式從字串建立函式的示例:

示例

<html>
<body>
   <p id="print"></p>
   <script>
      let functionString = "function add(a, b) { return a + b; }";
      let functionBody = functionString.substring(
         functionString.indexOf("{") + 1,
         functionString.lastIndexOf("}")
      );
      let add = new Function("a", "b", functionBody);
      document.getElementById("print").innerHTML = "Sum of 1 and 2: " + add(1, 2);
   </script>
</body>
</html>

在此示例中,我們將包含函式程式碼的字串傳遞給 `Function()` 建構函式,該建構函式從此字串建立一個新的函式物件。然後我們將返回的函式分配給變數 `add`,該變數可以像任何其他函式一樣使用。

由於它只能建立函式,因此比 `eval()` 風險更小,但仍然存在類似的風險。

方法 3:使用 `Function.prototype.constructor`

這會生成一個函式,並且除了作為字串傳遞的函式體之外,不能執行任何其他程式碼。但是,它使用頻率較低,並且與其他兩種方法相比,較舊的瀏覽器對其支援不佳。

示例

<html>
<body>
   <p id="result"></p>
   <script>
      let add = Function.prototype.constructor('a', 'b', 'return a+b')(1, 2);
      document.getElementById("result").innerHTML = "Sum: " + add;
   </script>
</body>
</html>

在此示例中,向建構函式提供函式引數和函式體。我們使用 `Function.prototype.constructor` 建立一個具有給定引數和給定函式體的函式,然後透過使用給定引數呼叫該函式來立即呼叫該函式。

請記住,您從字串構建的函式將能夠訪問全域性作用域,並且不會包含在您建立它的程式碼的作用域內。

另一件需要牢記的重要事項是從字串建立函式可能會減慢應用程式的速度,尤其是在函式體很長的情況下。

此外,如果函式很複雜,從字串構建函式可能會使理解和除錯程式碼變得更加困難。

由於其安全問題,通常不建議在生產程式碼中使用 `eval()` 和 `new Function()` 方法。相反,您應該考慮其他選項,例如預編譯函式或使用 JavaScript 預處理器(如 Babel)將您的程式碼轉換為等效的安全版本。

更新於:2023年3月2日

2K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.