javascript eval函數

javascript eval函數
2009-04-21 23:41

首先來個最簡單的理解

 

eval可以將字符串生成語句執行,和SQL的exec()類似。

eval的使用場合是什麼呢?有時候我們預先不知道要執行什麼語句,只有當條件和參數給時才知道執行什麼語句,這時候eval就派上用場了。舉個例子:

我們要做一個function(),功能是輸入網頁中兩個個對象的名稱,然後程序就將這兩個對象的值聯接起來輸出。
function output(a,b)
{
var tmpa,tmpb;
tmpa=document.all.a.value;
tmpb=document.all.b.value;
document.write(tmpa+tmpb);
}
output('input1','input2');

這樣你執行的時候就會提示錯誤“document.all.a不是對象”以及“document.all.b不是對象”。原來javascript把a和b當成對象名稱了,怎樣能讓javascript把a裏面的值作爲對象名稱呢?這時候就要用eval了,把代碼改成這樣:
function output(a,b)
{
var tmpa,tmpb;
tmpa=eval("document.all."+a+".value");
tmpb=eval("document.all."+b+".value");
document.write(tmpa+tmpb);
}
output('input1','input2');
這樣javascript就會先取出a,b的值,然後和前面的document.all.以及後面的.value組合運行,於是就可以
順利取出input1和input2的值.

 

 

看完上面的基本理解eval是什麼含義了吧

然後看下面的理解

稍微晉級一點點,用到了DOM中替換圖片的例子

在Javascript中Eval函數的使用?

 

【eval()函數】

來源:http://blog.csdn.net/ianc/archive/2006/05/29/761094.aspx

JavaScript有許多小竅門來使編程更加容易。
其中之一就是eval()函數,這個函數可以把一個字符串當作一個JavaScript表達式一樣去執行它。
舉個小例子:

var the_unevaled_answer = "2 + 3";
var the_evaled_answer = eval("2 + 3");
alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);

如果你運行這段eval程序, 你將會看到在JavaScript裏字符串"2 + 3"實際上被執行了。
所以當你把the_evaled_answer的值設成 eval("2 + 3")時, JavaScript將會明白並把2和3的和返回給the_evaled_answer。
這個看起來似乎有點傻,其實可以做出很有趣的事。比如使用eval你可以根據用戶的輸入直接創建函數。
這可以使程序根據時間或用戶輸入的不同而使程序本身發生變化,通過舉一反三,你可以獲得驚人的效果。
在實際中,eval很少被用到,但也許你見過有人使用eval來獲取難以索引的對象。

文檔對象模型(DOM)的問題之一是:有時你要獲取你要求的對象簡直就是痛苦。
例如,這裏有一個函數詢問用戶要變換哪個圖象:變換哪個圖象你可以用下面這個函數:

function swapOne()
{
var the_image = prompt("change parrot or cheese","");
var the_image_object;

if (the_image == "parrot")
{
the_image_object = window.document.parrot;
}
else
{
the_image_object = window.document.cheese;
}

the_image_object.src = "ant.gif";
}

連同這些image標記:

[img src="/stuff3a/parrot.gif" name="parrot"]
[img src="/stuff3a/cheese.gif" name="cheese"]

請注意象這樣的幾行語句:

the_image_object = window.document.parrot;

它把一個圖象對象敷給了一個變量。雖然看起來有點兒奇怪,它在語法上卻毫無問題。
但當你有100個而不是兩個圖象時怎麼辦?你只好寫上一大堆的 if-then-else語句,要是能象這樣就好了:


function swapTwo()
{
var the_image = prompt("change parrot or cheese","");
window.document.the_image.src = "ant.gif";
}

不幸的是, JavaScript將會尋找名字叫 the_image而不是你所希望的"cheese"或者"parrot"的圖象,
於是你得到了錯誤信息:”沒聽說過一個名爲the_image的對象”。

還好,eval能夠幫你得到你想要的對象。

function simpleSwap()
{
var the_image = prompt("change parrot or cheese","");
var the_image_name = "window.document." + the_image;
var the_image_object = eval(the_image_name);
the_image_object.src = "ant.gif";
}


如果用戶在提示框裏填入"parrot",在第二行裏創建了一個字符串即window.document.parrot. 然後包含了eval的第三
行意思是: "給我對象window.document.parrot" - 也就是你要的那個圖象對象。一旦你獲取了這個圖象對象,你可以把
它的src屬性設爲ant.gif. 有點害怕?用不着。其實這相當有用,人們也經常使用它。

我們常常在Javascript中間到Eval這個函數,
有些人覺得這個函數很奇怪,可以把一些字符串變的功能很強大
在我們需要將普通的字符串轉變成具體的對象的時候,就會用到這個函數

eval 函數對作爲數字表達式的一個字符串進行求值,其語法爲:

eval(expr)

此處 expr 是一個被求值的字符串參數。如果該字符串是一個表達式,eval 求該表達式的值;如果該參數代表一個或多個 JavaScript 語句,那麼 eval 執行這些語句。eval 函數可以用來把一個日期從一種格式(總是字符串)轉換爲數值表達式或數字。

==============================
Eval 函數
功能:先解釋Javascript代碼,然後在執行它
用法:Eval(codeString)
codeString是包含有Javascript語句的字符串,在eval之後使用Javascript引擎編譯。

註釋:

例子:eval(id + "_icon.src="/imgs/collapse_up.gif'");
id是之前設定的參數,而在雙引號中的字符串則是需要編譯的

引用:
--------------------------------------------------------------------------------
function tophide(id) //id indicates menu
{
if (top.topframeset.rows == "31,*")
{
top.topframeset.rows = "86,*";
eval(id + "_icon.src="/imgs/collapse_up.gif'");
eval(id + "_icon.alt='Collapse The Head'");
head.style.display = "block"
}
else
{
top.topframeset.rows = "31,*";
eval(id + "_icon.src="/imgs/collapse_down.gif'");
eval(id + "_icon.alt='Expand The Head'");
head.style.display = "none"
}
}

如果還是不明白深入認識javascript中的eval函數

來源:http://www.x2blog.cn/supnate/#sid.1735/page.1/

發現爲本文起一個合適的標題還不是那麼容易,呵呵,所以在此先說明下本文的兩個目的:
(1)介紹javascript中的eval函數的用法
(2)如何在函數內執行全局代碼

►先來說eval的用法,內容比較簡單,熟悉的可以跳過。
eval函數接收一個參數s,如果s不是字符串,則直接返回s。否則執行s語句。如果s語句執行結果是一個值,則返回此值,否則返回undefined。
需要特別注意的是對象聲明語法“{}”並不能返回一個值,需要用括號括起來纔會返回值,簡單示例如下:

var code1='"a" + 2'; //表達式
var code2='{a:2}'; //語句
alert(eval(code1)); //->'a2'
alert(eval(code2)); //->undefined
alert(eval('(' + code2 + ')')); //->[object Object]

可以看到,對於對象聲明語句來說,僅僅是執行,並不能返回值。爲了返回常用的“{}”這樣的對象聲明語句,必須用括號括住,以將其轉換爲表達式,才能返回其值。這也是使用JSON來進行Ajax開發的基本原理之一。在例子中可以清楚的看到,第二個alert語句輸出的是undefined,而第三個加了括號後輸出的是語句表示的對象。

►現在來說本文的重點,如何在函數內執行全局代碼。爲了說明這個問題,先看一個例子:

var s='global'; //定義一個全局變量
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global

很好理解,上面的demo1函數等價於:function demo1(){var s='local';},其中定義了一個局部變量s。
所以最後的輸出是global並不是什麼奇怪的事情,畢竟大家都能很清楚的區分局部變量和全局變量。
仔細體會一下,可以發現eval函數的特點,它總是在調用它的上下文變量空間(也稱爲:包,closure)內執行,無論是變量定義還是函數定義都是如此,所以如下的代碼會產生函數未定義的錯誤:

var s='function test(){return 1;}'; //一個函數定義語句
function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined

這是因爲test函數在局部空間定義,demo2函數內可以訪問到,外面就訪問不到了。


而在實際的Ajax開發中,有時我們需要從服務器動態獲取代碼來執行,以減輕一次載入代碼過多的問題,或者是一些代碼是通過Javascript自身生成的,希望用eval函數來使其執行。
但這樣的動態獲取代碼的工作一般在函數內完成,比如:

function loadCode(){
var code=getCode();
eval(code);
}

可見eval不可能在全局空間內執行,這就給開發帶來了不少問題,也看到過很多人爲此鬱悶。

不過現在偶終於找到了解決辦法,嘿嘿,可以同時兼容IE和Firefox,方法如下:

var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
//ie
execScript(code);
}else{
//not ie
window.eval(code);
}
}

現在如果要想在函數內定義全局代碼,就可以通過調用X2.Eval(code)方法,一個例子如下:

var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'

可見,在demo3函數內重新定義了全局變量s="local"。
需要注意的是X2.Eval並不返回值,如果要進行表達式的求值,還是用系統的eval函數。X2.Eval設計爲僅做全局代碼定義用。

其實看到這裏,或許有人感覺問題也太容易解決了點,呵呵,但發現這個辦法倒是需要些運氣和技巧的:
(1)對於IE瀏覽器,默認已經提供了這樣的函數:execScript,用於在全局空間執行代碼,只是知道的人還不多。
(2)對於Firefox瀏覽器,直接調用eval函數,則在調用者的空間執行;如果調用window.eval則在全局空間執行。這個知道的人估計就更少了。畢竟alert(eval==window.eval)返回true!

Firefox的eval函數的特點的確是很令人奇怪的,但從javascript規範中倒也能找到其來源:

If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.

意思大概就是說eval函數的執行是和調用者相關的,但並沒有說其執行上下文的問題。所以IE和Firefox孰是孰非也就很難說了,大家知道解決辦法就好

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章