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

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

当您需要在运行时动态生成函数或您有一个包含您希望执行的函数代码的字符串时,在 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 中从字符串创建函数?的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)