javascript eval函數(shù)深入認(rèn)識(shí)
更新時(shí)間:2009年02月21日 03:49:40 作者:
發(fā)現(xiàn)為本文起一個(gè)合適的標(biāo)題還不是那么容易,呵呵,所以在此先說明下本文的兩個(gè)目的
(1)介紹javascript中的eval函數(shù)的用法
(2)如何在函數(shù)內(nèi)執(zhí)行全局代碼
►先來說eval的用法,內(nèi)容比較簡(jiǎn)單,熟悉的可以跳過。
eval函數(shù)接收一個(gè)參數(shù)s,如果s不是字符串,則直接返回s。否則執(zhí)行s語(yǔ)句。如果s語(yǔ)句執(zhí)行結(jié)果是一個(gè)值,則返回此值,否則返回undefined。
需要特別注意的是對(duì)象聲明語(yǔ)法“{}”并不能返回一個(gè)值,需要用括號(hào)括起來才會(huì)返回值,簡(jiǎn)單示例如下:
var code1='"a" + 2'; //表達(dá)式
var code2='{a:2}'; //語(yǔ)句
alert(eval(code1)); //->'a2'
alert(eval(code2)); //->undefined
alert(eval('(' + code2 + ')')); //->[object Object]
可以看到,對(duì)于對(duì)象聲明語(yǔ)句來說,僅僅是執(zhí)行,并不能返回值。為了返回常用的“{}”這樣的對(duì)象聲明語(yǔ)句,必須用括號(hào)括住,以將其轉(zhuǎn)換為表達(dá)式,才能返回其值。這也是使用JSON來進(jìn)行Ajax開發(fā)的基本原理之一。在例子中可以清楚的看到,第二個(gè)alert語(yǔ)句輸出的是undefined,而第三個(gè)加了括號(hào)后輸出的是語(yǔ)句表示的對(duì)象。
►現(xiàn)在來說本文的重點(diǎn),如何在函數(shù)內(nèi)執(zhí)行全局代碼。為了說明這個(gè)問題,先看一個(gè)例子:
var s='global'; //定義一個(gè)全局變量
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global
很好理解,上面的demo1函數(shù)等價(jià)于:function demo1(){var s='local';},其中定義了一個(gè)局部變量s。
所以最后的輸出是global并不是什么奇怪的事情,畢竟大家都能很清楚的區(qū)分局部變量和全局變量。
仔細(xì)體會(huì)一下,可以發(fā)現(xiàn)eval函數(shù)的特點(diǎn),它總是在調(diào)用它的上下文變量空間(也稱為:包,closure)內(nèi)執(zhí)行,無論是變量定義還是函數(shù)定義都是如此,所以如下的代碼會(huì)產(chǎn)生函數(shù)未定義的錯(cuò)誤:
var s='function test(){return 1;}'; //一個(gè)函數(shù)定義語(yǔ)句
function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
這是因?yàn)閠est函數(shù)在局部空間定義,demo2函數(shù)內(nèi)可以訪問到,外面就訪問不到了。
而在實(shí)際的Ajax開發(fā)中,有時(shí)我們需要從服務(wù)器動(dòng)態(tài)獲取代碼來執(zhí)行,以減輕一次載入代碼過多的問題,或者是一些代碼是通過Javascript自身生成的,希望用eval函數(shù)來使其執(zhí)行。
但這樣的動(dòng)態(tài)獲取代碼的工作一般在函數(shù)內(nèi)完成,比如:
function loadCode(){
var code=getCode();
eval(code);
}
可見eval不可能在全局空間內(nèi)執(zhí)行,這就給開發(fā)帶來了不少問題,也看到過很多人為此郁悶。
不過現(xiàn)在偶終于找到了解決辦法,嘿嘿,可以同時(shí)兼容IE和Firefox,方法如下:
var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
//ie
execScript(code);
}else{
//not ie
window.eval(code);
}
}
現(xiàn)在如果要想在函數(shù)內(nèi)定義全局代碼,就可以通過調(diào)用X2.Eval(code)方法,一個(gè)例子如下:
var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'
可見,在demo3函數(shù)內(nèi)重新定義了全局變量s="local"。
需要注意的是X2.Eval并不返回值,如果要進(jìn)行表達(dá)式的求值,還是用系統(tǒng)的eval函數(shù)。X2.Eval設(shè)計(jì)為僅做全局代碼定義用。
其實(shí)看到這里,或許有人感覺問題也太容易解決了點(diǎn),呵呵,但發(fā)現(xiàn)這個(gè)辦法倒是需要些運(yùn)氣和技巧的:
(1)對(duì)于IE瀏覽器,默認(rèn)已經(jīng)提供了這樣的函數(shù):execScript,用于在全局空間執(zhí)行代碼,只是知道的人還不多。
(2)對(duì)于Firefox瀏覽器,直接調(diào)用eval函數(shù),則在調(diào)用者的空間執(zhí)行;如果調(diào)用 window.eval則在全局空間執(zhí)行。這個(gè)知道的人估計(jì)就更少了。畢竟alert(eval==window.eval)返回true!
Firefox的eval函數(shù)的特點(diǎn)的確是很令人奇怪的,但從javascript規(guī)范中倒也能找到其來源:
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函數(shù)的執(zhí)行是和調(diào)用者相關(guān)的,但并沒有說其執(zhí)行上下文的問題。所以IE和Firefox孰是孰非也就很難說了,大家知道解決辦法就好。
(2)如何在函數(shù)內(nèi)執(zhí)行全局代碼
►先來說eval的用法,內(nèi)容比較簡(jiǎn)單,熟悉的可以跳過。
eval函數(shù)接收一個(gè)參數(shù)s,如果s不是字符串,則直接返回s。否則執(zhí)行s語(yǔ)句。如果s語(yǔ)句執(zhí)行結(jié)果是一個(gè)值,則返回此值,否則返回undefined。
需要特別注意的是對(duì)象聲明語(yǔ)法“{}”并不能返回一個(gè)值,需要用括號(hào)括起來才會(huì)返回值,簡(jiǎn)單示例如下:
var code1='"a" + 2'; //表達(dá)式
var code2='{a:2}'; //語(yǔ)句
alert(eval(code1)); //->'a2'
alert(eval(code2)); //->undefined
alert(eval('(' + code2 + ')')); //->[object Object]
可以看到,對(duì)于對(duì)象聲明語(yǔ)句來說,僅僅是執(zhí)行,并不能返回值。為了返回常用的“{}”這樣的對(duì)象聲明語(yǔ)句,必須用括號(hào)括住,以將其轉(zhuǎn)換為表達(dá)式,才能返回其值。這也是使用JSON來進(jìn)行Ajax開發(fā)的基本原理之一。在例子中可以清楚的看到,第二個(gè)alert語(yǔ)句輸出的是undefined,而第三個(gè)加了括號(hào)后輸出的是語(yǔ)句表示的對(duì)象。
►現(xiàn)在來說本文的重點(diǎn),如何在函數(shù)內(nèi)執(zhí)行全局代碼。為了說明這個(gè)問題,先看一個(gè)例子:
var s='global'; //定義一個(gè)全局變量
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global
很好理解,上面的demo1函數(shù)等價(jià)于:function demo1(){var s='local';},其中定義了一個(gè)局部變量s。
所以最后的輸出是global并不是什么奇怪的事情,畢竟大家都能很清楚的區(qū)分局部變量和全局變量。
仔細(xì)體會(huì)一下,可以發(fā)現(xiàn)eval函數(shù)的特點(diǎn),它總是在調(diào)用它的上下文變量空間(也稱為:包,closure)內(nèi)執(zhí)行,無論是變量定義還是函數(shù)定義都是如此,所以如下的代碼會(huì)產(chǎn)生函數(shù)未定義的錯(cuò)誤:
var s='function test(){return 1;}'; //一個(gè)函數(shù)定義語(yǔ)句
function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
這是因?yàn)閠est函數(shù)在局部空間定義,demo2函數(shù)內(nèi)可以訪問到,外面就訪問不到了。
而在實(shí)際的Ajax開發(fā)中,有時(shí)我們需要從服務(wù)器動(dòng)態(tài)獲取代碼來執(zhí)行,以減輕一次載入代碼過多的問題,或者是一些代碼是通過Javascript自身生成的,希望用eval函數(shù)來使其執(zhí)行。
但這樣的動(dòng)態(tài)獲取代碼的工作一般在函數(shù)內(nèi)完成,比如:
function loadCode(){
var code=getCode();
eval(code);
}
可見eval不可能在全局空間內(nèi)執(zhí)行,這就給開發(fā)帶來了不少問題,也看到過很多人為此郁悶。
不過現(xiàn)在偶終于找到了解決辦法,嘿嘿,可以同時(shí)兼容IE和Firefox,方法如下:
var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
//ie
execScript(code);
}else{
//not ie
window.eval(code);
}
}
現(xiàn)在如果要想在函數(shù)內(nèi)定義全局代碼,就可以通過調(diào)用X2.Eval(code)方法,一個(gè)例子如下:
var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'
可見,在demo3函數(shù)內(nèi)重新定義了全局變量s="local"。
需要注意的是X2.Eval并不返回值,如果要進(jìn)行表達(dá)式的求值,還是用系統(tǒng)的eval函數(shù)。X2.Eval設(shè)計(jì)為僅做全局代碼定義用。
其實(shí)看到這里,或許有人感覺問題也太容易解決了點(diǎn),呵呵,但發(fā)現(xiàn)這個(gè)辦法倒是需要些運(yùn)氣和技巧的:
(1)對(duì)于IE瀏覽器,默認(rèn)已經(jīng)提供了這樣的函數(shù):execScript,用于在全局空間執(zhí)行代碼,只是知道的人還不多。
(2)對(duì)于Firefox瀏覽器,直接調(diào)用eval函數(shù),則在調(diào)用者的空間執(zhí)行;如果調(diào)用 window.eval則在全局空間執(zhí)行。這個(gè)知道的人估計(jì)就更少了。畢竟alert(eval==window.eval)返回true!
Firefox的eval函數(shù)的特點(diǎn)的確是很令人奇怪的,但從javascript規(guī)范中倒也能找到其來源:
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函數(shù)的執(zhí)行是和調(diào)用者相關(guān)的,但并沒有說其執(zhí)行上下文的問題。所以IE和Firefox孰是孰非也就很難說了,大家知道解決辦法就好。
相關(guān)文章
JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序?qū)嵗v解
事件監(jiān)聽是Web開發(fā)中非常重要的一個(gè)概念,掌握了它的用法,可以讓我們實(shí)現(xiàn)更加豐富和動(dòng)態(tài)的交互效果,這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序的相關(guān)資料,需要的朋友可以參考下2024-01-01
小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
靜態(tài)頁(yè)面html中跳轉(zhuǎn)傳值的JS處理技巧
這篇文章主要介紹了靜態(tài)頁(yè)面html中跳轉(zhuǎn)傳值的JS處理技巧,結(jié)合實(shí)例形式分析了HTML頁(yè)面跳轉(zhuǎn)通過URL傳遞參數(shù)的方法與javascript處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別
本篇文章主要介紹了詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
JavaScript html5 canvas實(shí)現(xiàn)圖片上畫超鏈接
這篇文章主要為大家詳細(xì)介紹了JavaScript html5 canvas實(shí)現(xiàn)圖片上畫超鏈接,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
學(xué)習(xí)JavaScript設(shè)計(jì)模式之單例模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的單例模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
使用JavaScript解決網(wǎng)頁(yè)圖片拉伸問題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁(yè)圖片拉伸問題,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11
Javascript insertAfter() 實(shí)現(xiàn)函數(shù)代碼
DOM沒有提供insertAfter()方法,我們可以自己擴(kuò)展下。2011-10-10

