DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript中eval和with用法實例總結
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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved