Comment appeler une fonction javascript à partir d'une chaîne sans utiliser evaliss

en javascript, eval n'est pas une bonne idée! La page eval de MDN indique: & gt; obsolète cette fonction est obsolète. Bien que le navigateur le prend toujours en charge, il n'est pas recommandé dans de nouveaux projets. Essayez d'éviter de l'utiliser.

eval Exécuter une chaîne contenant le code, par exemple:

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

eval Certains problèmes surviendront:

1. Sécurité: Votre chaîne peut être injectée dans d'autres commandes par des scripts tiers ou une entrée utilisateur.
2. débogage: Il est difficile de déboguer les erreurs - vous n'avez pas de numéros de ligne ou de points de défaut évidents.
3. Optimisation: L'interpréteur JavaScript n'est pas nécessairement en mesure de précompiler le code car il peut changer. Bien que l'interprète devienne plus efficace, il fonctionne presque certainement plus lent que le code natif.

Malheureusement, eval est très puissant et les développeurs inexpérimentés peuvent facilement utiliser cette commande. Malgré l'avertissement, eval fonctionne toujours - même en mode strict - mais vous pouvez généralement l'éviter. Dans le passé, il était principalement utilisé pour désérialiser les cordes JSON, mais nous avons maintenant une méthode plus sûre JSON.parse. Cependant, si nous avons un nom de fonction dans une chaîne, par exemple:

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

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

Comment exécuter les fonctions eval sans utiliser runMe()? J'ai récemment rencontré cela lors de l'utilisation de l'API d'histoire HTML5; Vous pouvez faire face à des défis similaires lorsque vous utilisez des travailleurs Web ou toute autre API qui sérialise les objets. pushState

La solution d'implémentation la plus simple et la plus sûre sans

est une série de conditions, telles que: eval

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

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

C'est sûr, mais c'est assez inefficace et des maux de tête à écrire si vous voulez appeler des dizaines de fonctions. Une meilleure solution consiste à utiliser l'objet

, qui fait référence à la fenêtre actuelle et à tous les éléments. Nous pouvons vérifier si window est disponible en tant qu'objet dans fnstring et s'il s'agit d'une fonction, exécutez-la, par exemple: window

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

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

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

Si nécessaire, vous pouvez effectuer des vérifications supplémentaires pour vous assurer que la fonction a le nom attendu. Et si la fonction que nous appelons a des paramètres - peut-être stockés dans un tableau? Aucun problème; nous avons juste besoin d'utiliser

Méthode: apply

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

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

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

C'est donc une autre raison d'arrêter d'utiliser

. De plus, cette solution est plus sûre, a moins d'erreurs, est plus facile à déboguer et est souvent plus rapide à exécuter. J'espère que cela vous aide. eval

FAQ sur l'exécution des fonctions JavaScript à partir de chaînes sans utiliser eval

Quelle est la signification d'appeler les fonctions JavaScript avec des chaînes sans utiliser eval()?

La fonction eval() dans JavaScript est un outil puissant qui vous permet d'exécuter des chaînes de code arbitraires. Cependant, l'utilisation de eval() est souvent considérée comme une mauvaise pratique en raison de problèmes de sécurité et de performances. Il peut rendre votre code vulnérable aux attaques d'injection. De plus, les moteurs JavaScript modernes optimisent les performances du code, mais ils ne peuvent pas optimiser le code exécuté par eval(). Par conséquent, il est très bénéfique de savoir comment appeler les fonctions JavaScript avec des chaînes sans utiliser eval(). Cela peut être réalisé en utilisant des objets window ou des constructeurs Function, qui sont des alternatives plus sûres et plus efficaces.

Comment utiliser les objets window pour appeler les fonctions JavaScript à l'aide de chaînes?

L'objet window dans JavaScript représente la fenêtre affichée par le navigateur. Il s'agit d'un objet global dans l'environnement du navigateur, et toutes les variables et fonctions globales deviennent des attributs et des méthodes d'objets window. Vous pouvez utiliser l'objet window pour appeler la fonction à l'aide d'une chaîne en accédant à la fonction comme une propriété de l'objet window. Voici un exemple:

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

Dans ce code, "Hello" est une propriété de l'objet window, qui fait référence à la fonction hello(). Par conséquent, window["hello"] appelle la fonction hello().

Qu'est-ce qu'un constructeur Function, comment l'utilisez-vous pour appeler une fonction à l'aide d'une chaîne?

Le constructeur Function dans JavaScript crée un nouvel objet Function. C'est un moyen moins courant mais toujours efficace de définir une fonction. Vous pouvez utiliser le constructeur Function pour appeler la fonction à l'aide d'une chaîne en passant la chaîne au constructeur. Voici un exemple:

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

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

Dans ce code, le constructeur Function crée une nouvelle fonction qui prend deux arguments "A" et "B" et renvoie leur somme. Les paramètres et les corps de fonction sont passés sous forme de chaînes.

Si la fonction est une méthode d'un objet, puis-je appeler la fonction à l'aide d'une chaîne?

Oui, vous pouvez appeler des fonctions à l'aide de chaînes même si la fonction est une méthode d'un objet. Vous pouvez le faire en accédant aux propriétés de l'objet, ce qui est similaire à la façon dont vous gérez les objets window. Voici un exemple:

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

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

Dans ce code, "Hello" est une propriété de l'objet obj, qui fait référence à la méthode hello(). Par conséquent, obj["hello"] appelle la méthode hello().

Quelles sont les limites de l'appel des fonctions JavaScript à l'aide de chaînes?

Bien qu'il puisse être utile dans certains cas d'appeler les fonctions JavaScript à l'aide de chaînes, elle a également certaines limites. Une limitation est qu'elle ne s'applique qu'à une méthode d'une fonction globale ou d'un objet connu. Si la fonction n'est pas une propriété d'un objet connu, il ne peut pas être appelé avec une chaîne. Une autre limitation est que vous ne pouvez pas transmettre des paramètres directement à la fonction. Si la fonction accepte les paramètres, vous devez les inclure dans une chaîne ou utiliser d'autres fonctions pour les passer. Malgré ces limites, les fonctions d'appel avec des chaînes sont toujours un outil puissant lorsqu'ils sont utilisés correctement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!