Zusammenfassung der Anwendungsbeispiele von eval und with in javascript_javascript skills

Die Beispiele in diesem Artikel beschreiben die Verwendung von eval und with in Javascript. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wir alle kennen den Scope-Mechanismus von JavaScript, aber mit und eval „zerstören“ wir manchmal unser konventionelles Verständnis des Scopes. Fassen wir die Verwendung von eval und with unter Bezugnahme auf Online-Ressourcen und Ihr eigenes Verständnis zusammen.

1. Bewertung

1. Auswertungsfunktion: Behandeln Sie einen String als js-Ausdruck, um ihn auszuführen 2. Syntax: eval(strScript) Hinweis: Der Parameter strScript ist erforderlich

3. Gebrauchsanweisung

(1) Es hat einen Rückgabewert. Wenn die Parameterzeichenfolge ein Ausdruck ist, wird der Wert des Ausdrucks zurückgegeben. Wenn die Parameterzeichenfolge kein Ausdruck ist und keinen Wert hat, wird „undefiniert“ zurückgegeben.

(2) Wenn die Parameterzeichenfolge als Code ausgeführt wird, hängt sie mit dem Kontext zusammen, in dem die Auswertungsfunktion aufgerufen wird. Das heißt, die darin angezeigten Variablen oder Funktionsaufrufe müssen in dem Kontext verfügbar sein, in dem die Auswertung aufgerufen wird.

4. Beispiel:

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, Bewertung und Umfang

(1) Klassische Codeanalyse

a. Häufig

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

Analyse: Wie erwartet wird der angegebene Wert erhalten. Die Ergebnisse von str in der Testfunktion ohne var- und mit var-Deklaration sind ebenfalls unterschiedlich. Leser können dies selbst überprüfen.

b, eval, anstatt Variablen direkt zu deklarieren

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

Analyse: Im Vergleich zur Schreibmethode in a verwenden wir einfach die eval-Anweisung in der Testfunktion, um den Satz zu ersetzen, der var direkt deklariert, um die Variable zu definieren, und am Ende nur eine Warnung auszugeben. Die Ergebnisse sind sehr unterschiedlich.

(2) eval definiert globalen Code

a. Die Auswertungsfunktion, die mit IE und FF kompatibel ist und globalen Code definiert

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

Für den IE-Browser wird die Funktion execScript verwendet, um Code im globalen Bereich auszuführen.

Für den Firefox-Browser wird die Funktion eval direkt im Bereich des Aufrufers ausgeführt. Wenn window.eval aufgerufen wird, wird sie im globalen Bereich ausgeführt. eval) ist wahr, was seltsam ist ff.

b. Rufen Sie den Testcode von a auf

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: Durch den Code in b haben Sie möglicherweise eine offensichtliche Unannehmlichkeit beim Definieren von globalem Code festgestellt, d. h. für globalen Code gehen die intelligenten Eingabeaufforderungen von js (hier vs und möglicherweise auch andere Tools) vollständig verloren . Aus diesem Grund werden Sie sich definitiv fragen: Wenn im Programm durch Auswertung viel globaler Code definiert wird, ist seine Wartbarkeit dann zu gering? Meiner Meinung nach stimme ich mit der Zusammenfassung im Internet überein und verwende Eval weniger. Schließlich können vorgefertigte Tools keine guten Eingabeaufforderungen liefern und die Sehkraft der Programmierer ist oft nicht so gut.

2. mit

1.

mit Anweisung: Geben Sie ein Standardobjekt für eine oder eine Gruppe von Anweisungen an, das normalerweise verwendet wird, um die Menge an Code zu verkürzen, die in einer bestimmten Situation geschrieben werden muss

. 2. Grammatik: mit (273238ce9338fbb04bee6997e5552b95) fa7ef95fdb8b7324b4f19dcbb8e23063 mit (Objekt)
Aussagen
(1) Parameterobjekt: neues Standardobjekt; (2) Anweisungen: Eine oder mehrere Anweisungen. Das Objekt ist das Standardobjekt der Anweisung.

3. Beispiel:

4. Mit ändert vorübergehend die Bereichskette

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

Analyse: Wenn die Funktion withTest definiert ist, wird die Gültigkeitskette von withTest bestimmt. Wir gehen vorübergehend davon aus, dass die Spitze dieser Gültigkeitskette das Fensterobjekt ist. Wenn withTest ausgeführt wird, generiert die JS-Engine ein Aufrufobjekt (aufrufendes Objekt). ) und fügen Sie es am Ende der Bereichskette hinzu (nach dem Fensterobjekt). Wenn die Anweisung zu with(document) ausgeführt wird, wird ein neuer Bereich generiert (im Wesentlichen ist dieser Bereich derselbe wie der Bereich einer gewöhnlichen Funktion). , mit der Ausnahme, dass der Bereich nach Ausführung der with-Klausel verschwindet) und am Ende der Bereichskette hinzugefügt wird, sodass bei der Suche nach Variablen innerhalb von with dem Bereich with (Dokument) dieser Kette Priorität eingeräumt wird. , suchen Sie dann vom Aufrufobjekt von withTest und suchen Sie schließlich nach window. Nachdem die Anweisung in with ausgeführt wurde, wird die Bereichskette in ihren ursprünglichen Zustand zurückversetzt (der von with(document) generierte Bereich wird aus der Bereichskette verschoben).

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

ps: with wird nicht empfohlen, da es die Bedienung der Bereichskette erfordert (in den Bereich hinein und aus ihm heraus), was zu einer geringen Ausführungseffizienz führt.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.