Résumé des exemples d'utilisation de eval et with in javascript_javascript skills

Les exemples de cet article décrivent l'utilisation de eval et with en javascript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Nous connaissons tous le mécanisme de portée de JavaScript, mais avec l'évaluation et l'évaluation, nous « détruisons » parfois notre compréhension conventionnelle de la portée. Résumons l'utilisation de eval et with en référence aux ressources en ligne et à votre propre compréhension.

1. évaluation

1. Fonction eval : traiter une chaîne comme une expression js pour l'exécuter

2. Syntaxe : eval(strScript) Remarque : Le paramètre strScript est obligatoire

3. Mode d'emploi

(1) Il a une valeur de retour Si la chaîne de paramètre est une expression, la valeur de l'expression sera renvoyée. Si la chaîne de paramètres n’est pas une expression et n’a aucune valeur, alors « non défini » est renvoyé.
(2) Lorsque la chaîne de paramètres est exécutée sous forme de code, elle est liée au contexte dans lequel la fonction eval est appelée, c'est-à-dire que les variables ou les appels de fonction qui y apparaissent doivent être disponibles dans le contexte dans lequel eval est appelé.

4. Exemple :

function $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } } //eval,这个比较常用
var myTest = function() { return "eval test"; };
function evalTest() {
  //简单数据
  alert(eval("1+1")); //2
  alert(eval("'a'+1")); //a1
  alert(eval("1+'a'")); //1a
  alert(eval("parseInt('a'+1)")); //NaN
  alert(eval("parseInt(1+'a')")); //1
  alert(eval("true")); //true
  alert(eval("0==false")); //true
  alert(eval("1==undefined")); //false
  alert(eval("isNaN(undefined)")); //true
  //函数和对象
  alert(eval("this")); //[object]
  alert(eval("typeof(this)")); //object
  alert(eval("typeof(test)")); //undefined
  alert(eval("evalTest")); //这个显示当前函数的定义语句细节,包含注释
  //alert(eval("evalTest()")); //调用自己并执行,这个会有大问题啊!
  alert(eval("typeof(evalTest)")); //function
  //其他
  var tmpFunc = "{a:1}";
  alert(eval(tmpFunc)); //1
  alert(eval("(" + tmpFunc + ")")); //[object object]
  alert(eval("tmpFunc")); //{a:1}
  //alert(eval("tmpFunc()")); //脚本错误
  alert(myTest());
  eval("alert(myTest())"); //和上面等价
  alert(eval(myTest));
  alert(eval("myTest")); //和上面等价
  //form里的一个input,id=txtUserName
  eval("$('txtUserName').value='jeff wong';"); //等价于 $('txtUserName').value = 'jeff wong';
  eval("alert( $('txtUserName').value);");
}
evalTest(); 

5, évaluation et portée

(1) Analyse de code classique

a.Commun

var str = "global";
function test() {
  alert(str); //undefined
  var str = "local";
}
test();
alert(str); //global

Analyse : Comme prévu, la valeur spécifiée est obtenue. Les résultats de str dans la fonction de test sans déclaration var et avec déclaration var sont également différents.

b, eval au lieu de déclarer directement les variables

var str = "global";
function test() {
  alert(str); //??
  eval("var str='local';");//会像我们预期的那样吗?
  //var str = "local";
  alert(str); //这里又是什么结果?
}
test();
alert(str); //??

Analyse : par rapport à la méthode d'écriture dans a, nous utilisons simplement l'instruction eval dans la fonction test pour remplacer la phrase qui déclare directement var pour définir la variable et juste alerter à la fin. Les résultats sont très différents.

(2) eval définit le code global

a. La fonction eval qui est compatible avec IE et FF et définit le code global

var nav = new Object();
//通用eval函数
nav.Eval = function(jsCode) {
  if (document.all) //IE下是execScript
   execScript(jsCode);
  else window.eval(jsCode); //FF下是window.eval
}

Pour le navigateur IE, la fonction execScript est utilisée pour exécuter du code dans l'espace global.
Pour le navigateur Firefox, si la fonction eval est appelée directement, elle sera exécutée dans l'espace de l'appelant ; si window.eval est appelée, elle sera exécutée dans l'espace global mais la valeur de retour de alert(eval==window. eval) est vrai, ce qui est étrange ff.

b. Appelez le code de test de a

var nav = new Object();
//通用eval函数
nav.Eval = function(jsCode) {
  if (document.all) //IE下是execScript
   execScript(jsCode);
  else window.eval(jsCode); //FF下是window.eval
}
function test() {
  nav.Eval("var str = 'global';"); //这里声明变量str,在外面的函数中可以调用变量
  nav.Eval("var tmpFunc = function(){alert('global function');};"); //这里声明函数变量tmpFunc,在外面的函数中可以调用函数
  alert(str); //global
  tmpFunc(); //global function
}
test();
alert(str); //global (调用nav.Eval函数声明的全局变量)
tmpFunc(); // global function (调用nav.Eval函数声明的全局函数)

Analyse : grâce au code en b, vous avez peut-être découvert un inconvénient évident de la définition du code global par eval, c'est-à-dire que pour le code global, les invites intelligentes js (ici vs, et d'autres outils peuvent également) sont complètement perdues. . À partir de là, vous vous demanderez certainement si une grande partie du code global est défini dans le programme via eval, sa maintenabilité sera-t-elle trop faible ? Mon opinion est que je suis d'accord avec le résumé sur Internet et que j'utilise moins eval. Après tout, les outils prêts à l'emploi ne peuvent pas fournir de bonnes invites, et la vue des programmeurs n'est souvent pas très bonne.

2. avec

1. avec instruction : Spécifiez un objet par défaut pour une ou un groupe d'instructions, généralement utilisé pour réduire la quantité de code qui doit être écrit dans une situation spécifique .
2. Grammaire : avec (273238ce9338fbb04bee6997e5552b95) fa7ef95fdb8b7324b4f19dcbb8e23063
avec (objet)
déclarations
(1) Objet paramètre : nouvel objet par défaut
(2) instructions : une ou plusieurs instructions, l'objet est l'objet par défaut de l'instruction.

3. Exemple :

function withTest() {
 with (document) { //document的重复使用
 writeln("Hello,");
 writeln("it's a with keyword test!");
 }
 with (Math) { //Math的重复使用
 alert(random());
 alert(abs(-10));
 }
}
withTest();

4. with modifiera temporairement la chaîne de portée

function withTest() {
 var userName = "jeff wong";
 //暂时修改作用域链
 with (document) {
 writeln("Hello,");
 writeln(userName);
 }//with内的语句执行完之后，作用域链恢复原状
 alert(userName);
}
withTest();

Analyse : lorsque la fonction withTest est définie, la chaîne de portée de withTest est déterminée. Nous pensons temporairement que le haut de cette chaîne de portée est l'objet fenêtre. Lorsque withTest est exécuté, le moteur js génère un objet d'appel (objet appelant. ) et ajoutez-le à la fin de la chaîne de portée (après l'objet window). Lorsque l'instruction s'exécute vers with(document), une nouvelle portée sera générée (en substance, cette portée est la même que la portée d'une fonction ordinaire). , sauf que Cependant, après l'exécution de la clause with, la portée disparaît) et est ajoutée à la fin de la chaîne de portée, donc lors de la recherche de variables dans with, la priorité sera donnée à la portée with (document) de cette chaîne. , puis recherchez à partir de l'objet d'appel de withTest, et enfin recherchez window. Une fois l'instruction dans with exécutée, la chaîne de portées est restaurée à son état d'origine (la portée générée par with(document) est déplacée hors de la chaîne de portées).

ps : with n'est pas recommandé car cela nécessite d'opérer la chaîne de portée (entrer et sortir de la portée), ce qui entraîne une faible efficacité d'exécution.

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.