javascript_javascriptスキルにおけるevalとwithの使用例まとめ-jsチュートリアル-php.cn

この記事の例では、JavaScript での eval と with の使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

JavaScript のスコープメカニズムは誰もが知っていますが、with と eval はスコープについての従来の理解を「破壊」することがあります。 eval と with の使用法について、オンラインリソースと自分自身の理解を参考にまとめてみましょう。

1. 評価

1. eval 関数: 文字列を JS 式として処理して実行します。 2. 構文: eval(strScript) 注: パラメーター strScript は必須です

3. 使用説明書

(1) 戻り値を持ちます。パラメータ文字列が式の場合、その式の値が返されます。パラメータ文字列が式ではなく、値がない場合は、「未定義」が返されます。

(2) パラメータ文字列がコードとして実行される場合、パラメータ文字列は eval 関数が呼び出されるコンテキストに関連します。つまり、パラメータ文字列に表示される変数または関数呼び出しは、eval が呼び出されるコンテキストで使用可能でなければなりません。

4. 例:

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、評価とスコープ

(1) 古典的なコード分析

a.共通

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

ログイン後にコピー

分析: 予想通り、指定した値が得られました。テスト関数の str の結果も var なしと var 宣言で異なります。読者は自分で検証できます。

b、変数を直接宣言する代わりに eval

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

ログイン後にコピー

分析: aの書き方と比較すると、テスト関数内でvarを直接宣言する文をeval文で置き換えて変数を定義し、最後にalertを出すだけで結果は大きく異なります。

(2) eval はグローバルコードを定義します

a. IE および FF と互換性があり、グローバルコードを定義する eval 関数

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

ログイン後にコピー

IE ブラウザの場合、関数 execScript はグローバル空間でコードを実行するために使用されます。

Firefox ブラウザの場合、eval 関数が直接呼び出された場合は呼び出し元のスペースで実行されますが、window.eval が呼び出された場合はグローバルスペースで実行されますが、戻り値はalert(eval==window. eval) は true ですが、これは奇妙なことです。

のテストコードを呼び出します。

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函数声明的全局函数)

ログイン後にコピー

分析: b のコードを通して、グローバルコードを定義する eval の明らかな不便さを発見したかもしれません。つまり、グローバルコードの場合、JS スマートプロンプト (ここでは vs や他のツールも同様) のプロンプト機能が完全に失われます。。このことから、eval を介してプログラム内に多くのグローバルコードが定義されている場合、その保守性は低すぎるのではないかと疑問に思うでしょう。私の意見は、インターネット上の要約に同意し、eval の使用を減らすということです。結局のところ、既製のツールでは適切なプロンプトを提供することはできませんし、プログラマーの視力もそれほど優れていないことがよくあります。

with ステートメント: 1 つまたは複数のステートメントのデフォルトオブジェクトを指定します。通常、特定の状況で記述しなければならないコードの量を短縮するために使用されます

。 2. 文法: with (