如何在 JavaScript 中从字符串创建函数？

王林转载: 2023-08-28 12:49:10 867浏览

当您需要在运行时动态生成函数或您有一个包含您希望执行的函数代码的字符串时，在 JavaScript 中从字符串创建函数会很有帮助。

从字符串构造函数的能力是 JavaScript 的一项有用功能，它允许在运行时动态创建函数。 eval() 函数和 new Function() 函数 Object() [本机代码] 是执行此操作的两种最流行的方法，尽管两者都存在重大安全缺陷。

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() 方法。相反，您应该考虑其他选项，例如预编译函数或使用 Babel 等 JavaScript 预处理器将代码转换为等效的、更安全的版本。

以上就是如何在 JavaScript 中从字符串创建函数？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：FabricJS – 如何在 Line 对象的 URL 字符串中设置缩放倍数？下一条：如何使用 Fabric.js 设置画布圆的描边宽度？