如何從字符串中調用JavaScript函數而不使用est-js教程-PHP中文網

How to Call a JavaScript Function From a String Without Using eval

在 JavaScript 中，eval 並非良策！ MDN 的 eval 頁面指出：> 已過時此功能已過時。儘管瀏覽器仍然支持它，但在新項目中不建議使用它。盡量避免使用它。

eval 執行包含代碼的字符串，例如：

eval("var x = 'Hello from eval!';");
console.log(x);

登入後複製

eval 會引發一些問題：

安全性：您的字符串可能會被第三方腳本或用戶輸入註入其他命令。
調試：很難調試錯誤——您沒有行號或明顯的故障點。
優化：JavaScript 解釋器不一定能夠預編譯代碼，因為它可能會更改。雖然解釋器效率越來越高，但它幾乎肯定比原生代碼運行速度慢。

不幸的是，eval 功能非常強大，經驗不足的開發人員很容易過度使用此命令。儘管有警告，eval 仍然有效——即使在嚴格模式下——但您通常可以避免它。過去，它主要用於反序列化 JSON 字符串，但我們現在有更安全的 JSON.parse 方法。但是，如果我們有一個字符串中的函數名，例如：

// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}

登入後複製

我們如何在不使用 eval 的情況下執行 runMe() 函數？我最近在使用 HTML5 History API 時遇到了這種情況；pushState 方法不允許您存儲對函數的直接引用，因此您需要將其名稱定義為字符串。使用 Web Workers 或任何其他序列化對象的 API 時，您也可能會面臨類似的挑戰。

最簡單、最安全的無需 eval 的執行解決方案是一系列條件，例如：

// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}

登入後複製

它很安全，但是如果要調用數十個函數，編寫起來效率相當低且令人頭疼。更好的解決方案是使用 window 對象，它引用當前窗口及其中的所有項目。我們可以檢查 fnstring 是否作為 window 中的對象可用，如果它是函數，則運行它，例如：

// 我们要运行的函数
var fnstring = "runMe";

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

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

登入後複製

如有必要，您可以執行其他檢查以確保函數具有預期的名稱。如果我們要調用的函數有參數——可能存儲在數組中呢？沒問題；我們只需使用 apply 方法：

// 函数名称和要传递的参数
var fnstring = "runMe";
var fnparams = [1, 2, 3];

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

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

登入後複製

所以這是停止使用 eval 的另一個理由。此外，此解決方案更安全、錯誤更少、更易於調試，並且通常執行速度更快。希望對您有所幫助。

關於在不使用 `eval` 的情況下從字符串執行 JavaScript 函數的常見問題解答

不使用 `eval()` 而使用字符串調用 JavaScript 函數的意義是什麼？

JavaScript 中的 eval() 函數是一個強大的工具，允許您執行任意代碼字符串。但是，由於安全性和性能問題，使用 eval() 通常被認為是不好的做法。它可能使您的代碼容易受到注入攻擊。此外，現代 JavaScript 引擎會優化代碼的性能，但它們無法對 eval() 執行的代碼進行優化。因此，了解如何在不使用 eval() 的情況下使用字符串調用 JavaScript 函數非常有益。這可以通過使用 window 對像或 Function 構造函數來實現，它們是更安全、更高效的替代方案。

如何使用 `window` 對象使用字符串調用 JavaScript 函數？

JavaScript 中的 window 對象表示瀏覽器顯示的窗口。它是瀏覽器環境中的全局對象，所有全局變量和函數都成為 window 對象的屬性和方法。您可以通過將函數作為 window 對象的屬性來訪問，從而使用 window 對象使用字符串調用函數。這是一個示例：

eval("var x = 'Hello from eval!';");
console.log(x);

登入後複製

在此代碼中，“hello”是 window 對象的一個屬性，它引用 hello() 函數。因此，window["hello"] 調用 hello() 函數。

什麼是 `Function` 構造函數，如何使用它來使用字符串調用函數？

JavaScript 中的 Function 構造函數創建一個新的 Function 對象。這是一種不太常見但仍然有效的方法來定義函數。您可以通過將字符串傳遞給構造函數來使用 Function 構造函數使用字符串調用函數。這是一個示例：

// 我们要运行的函数
var fnstring = "runMe";

function runMe() {
    // 执行操作
}

登入後複製

在此代碼中，Function 構造函數創建一個新的函數，該函數接受兩個參數“a”和“b”，並返回它們的和。參數和函數體作為字符串傳遞。

如果函數是對象的某個方法，我可以使用字符串調用函數嗎？

是的，即使函數是對象的某個方法，您也可以使用字符串調用函數。您可以通過訪問對象的屬性來實現此目的，這與處理 window 對象的方式類似。這是一個示例：

// 我们要运行的函数
var fnstring = "runMe";

switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}

登入後複製

在此代碼中，“hello”是 obj 對象的一個屬性，它引用 hello() 方法。因此，obj["hello"] 調用 hello() 方法。

使用字符串調用 JavaScript 函數的局限性是什麼？

雖然在某些情況下使用字符串調用 JavaScript 函數可能很有用，但它也有一些局限性。一個限制是它僅適用於全局函數或已知對象的某個方法。如果函數不是已知對象的屬性，則無法使用字符串調用它。另一個限制是您無法直接向函數傳遞參數。如果函數接受參數，則需要將它們包含在字符串中，或者使用其他函數來傳遞它們。儘管有這些限制，但在正確使用時，使用字符串調用函數仍然是一個強大的工具。

以上是如何從字符串中調用JavaScript函數而不使用est的詳細內容。更多資訊請關注PHP中文網其他相關文章！