如何从字符串中调用JavaScript函数而不使用est

在 JavaScript 中，eval 并非良策！MDN 的 eval 页面指出：> 已过时 此功能已过时。尽管浏览器仍然支持它，但在新项目中不建议使用它。尽量避免使用它。

eval 执行包含代码的字符串，例如：

<code class="language-javascript">eval("var x = 'Hello from eval!';");
console.log(x);</code>

eval 会引发一些问题：

1. 安全性：您的字符串可能会被第三方脚本或用户输入注入其他命令。
2. 调试：很难调试错误——您没有行号或明显的故障点。
3. 优化：JavaScript 解释器不一定能够预编译代码，因为它可能会更改。虽然解释器效率越来越高，但它几乎肯定比原生代码运行速度慢。

不幸的是，eval 功能非常强大，经验不足的开发人员很容易过度使用此命令。尽管有警告，eval 仍然有效——即使在严格模式下——但您通常可以避免它。过去，它主要用于反序列化 JSON 字符串，但我们现在有更安全的 JSON.parse 方法。但是，如果我们有一个字符串中的函数名，例如：

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}</code>

我们如何在不使用 eval 的情况下执行 runMe() 函数？我最近在使用 HTML5 History API 时遇到了这种情况；pushState 方法不允许您存储对函数的直接引用，因此您需要将其名称定义为字符串。使用 Web Workers 或任何其他序列化对象的 API 时，您也可能会面临类似的挑战。

最简单、最安全的无需 eval 的执行解决方案是一系列条件，例如：

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}</code>

它很安全，但是如果要调用数十个函数，编写起来效率相当低且令人头疼。更好的解决方案是使用 window 对象，它引用当前窗口及其中的所有项目。我们可以检查 fnstring 是否作为 window 中的对象可用，如果它是函数，则运行它，例如：

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

// 查找对象
var fn = window[fnstring];

// 对象是否为函数？
if (typeof fn === "function") fn();</code>

如有必要，您可以执行其他检查以确保函数具有预期的名称。如果我们要调用的函数有参数——可能存储在数组中呢？没问题；我们只需使用 apply 方法：

<code class="language-javascript">// 函数名称和要传递的参数
var fnstring = "runMe";
var fnparams = [1, 2, 3];

// 查找对象
var fn = window[fnstring];

// 对象是否为函数？
if (typeof fn === "function") fn.apply(null, fnparams);</code>

所以这是停止使用 eval 的另一个理由。此外，此解决方案更安全、错误更少、更易于调试，并且通常执行速度更快。希望对您有所帮助。

关于在不使用 eval 的情况下从字符串执行 JavaScript 函数的常见问题解答

不使用 eval() 而使用字符串调用 JavaScript 函数的意义是什么？

JavaScript 中的 eval() 函数是一个强大的工具，允许您执行任意代码字符串。但是，由于安全性和性能问题，使用 eval() 通常被认为是不好的做法。它可能使您的代码容易受到注入攻击。此外，现代 JavaScript 引擎会优化代码的性能，但它们无法对 eval() 执行的代码进行优化。因此，了解如何在不使用 eval() 的情况下使用字符串调用 JavaScript 函数非常有益。这可以通过使用 window 对象或 Function 构造函数来实现，它们是更安全、更高效的替代方案。

如何使用 window 对象使用字符串调用 JavaScript 函数？

JavaScript 中的 window 对象表示浏览器显示的窗口。它是浏览器环境中的全局对象，所有全局变量和函数都成为 window 对象的属性和方法。您可以通过将函数作为 window 对象的属性来访问，从而使用 window 对象使用字符串调用函数。这是一个示例：

<code class="language-javascript">eval("var x = 'Hello from eval!';");
console.log(x);</code>

在此代码中，“hello”是 window 对象的一个属性，它引用 hello() 函数。因此，window["hello"] 调用 hello() 函数。

什么是 Function 构造函数，如何使用它来使用字符串调用函数？

JavaScript 中的 Function 构造函数创建一个新的 Function 对象。这是一种不太常见但仍然有效的方法来定义函数。您可以通过将字符串传递给构造函数来使用 Function 构造函数使用字符串调用函数。这是一个示例：

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}</code>

在此代码中，Function 构造函数创建一个新的函数，该函数接受两个参数“a”和“b”，并返回它们的和。参数和函数体作为字符串传递。

如果函数是对象的某个方法，我可以使用字符串调用函数吗？

是的，即使函数是对象的某个方法，您也可以使用字符串调用函数。您可以通过访问对象的属性来实现此目的，这与处理 window 对象的方式类似。这是一个示例：

<code class="language-javascript">// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}</code>

在此代码中，“hello”是 obj 对象的一个属性，它引用 hello() 方法。因此，obj["hello"] 调用 hello() 方法。

使用字符串调用 JavaScript 函数的局限性是什么？

虽然在某些情况下使用字符串调用 JavaScript 函数可能很有用，但它也有一些局限性。一个限制是它仅适用于全局函数或已知对象的某个方法。如果函数不是已知对象的属性，则无法使用字符串调用它。另一个限制是您无法直接向函数传递参数。如果函数接受参数，则需要将它们包含在字符串中，或者使用其他函数来传递它们。尽管有这些限制，但在正确使用时，使用字符串调用函数仍然是一个强大的工具。

以上是如何从字符串中调用JavaScript函数而不使用est的详细内容。更多信息请关注PHP中文网其他相关文章！