javascript中eval和with用法實例總結_javascript技巧

本文實例講述了javascript中eval和with用法。分享給大家參考，具體如下：

我們都知道javascript的作用域機制，但是with和eval有時會「破壞」我們對於作用域的常規理解。以下參考網路資源和自己理解總結eval和with的用法。

一、eval

1、eval函數：把一個字串當作一個js表達式一樣去執行它.

2、語法：eval(strScript) 註：參數strScript是必填項

3、使用說明

(1)它是有回傳值的，如果參數字串是一個表達式，就會傳回表達式的值。如果參數字串不是表達式，沒有值，那麼回傳「undefined」。
(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、eval和作用域

（1）經典程式碼分析

a、常見

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

分析：如我們預期的那樣，得到指定值。 test函數內的str沒有var和有var聲明，結果也是不一樣的，讀者可自行驗證。

b、eval替代直接宣告變數的寫法

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

分析：對比a中的寫法，我們只是在test函數裡用eval語句替換直接宣告var定義變數那一句最後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，奇怪的ff.

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

分析：透過b中的程式碼，你可能已經發現了eval定義全域程式碼的一個顯而易見的不方便的地方，就是對於全域程式碼，js智慧提示（這裡是vs，可能其他工具也會）完全失去提示作用。由此你一定會問，程式中透過eval這種方式定義了許多全域程式碼，它的可維護性會不會太那個了？我的看法就是贊成網路上的總結，少用eval。畢竟現成的工具都不能很好的提示了，而程式設計師的視力往往又不是那麼好。

二、with

1、with語句:為一個或一組語句指定預設對象，通常用來縮短特定情形下必須寫的代碼量。
2、語法：with (<物件>) <語句>
with (object)
  statements
（1）參數object： 新的預設物件；
（2）statements ： 一個或多個語句，object 是該語句的預設物件。

3、範例：

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會暫時修改作用域鏈

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

解析： 函數withTest在定義的時候，就確定了withTest的作用域鏈，我們暫且認為這條作用域鏈的最頂端是window對象，當withTest被執行的時候，js引擎生成了一個call object （呼叫物件）並將其加入作用域鏈尾部（window物件之後），語句運行到with(document)時，將產生新的作用域（實質上這個作用域和普通function的作用域一樣，只不過它在with子句執行完，該作用域也隨之消失）並且添加到作用域鏈的尾部，所以with之內的變數查找，就會優先從這條鏈的with(document)作用域上查找，然後從withTest的call object中找，最後找window。 with內的語句執行完之後，作用域鏈恢復原狀（with(document)產生的作用域被移出作用域鏈）。

ps：with是不被推薦的，因為需要操作作用域鏈（移進、移出作用域），執行效率低。

希望本文所述對大家JavaScript程式設計有所幫助。