深入認識javascript中的eval函式
http://www.zzbang.cn/html/dev/js/2007/11/09/45/[@more@]發現為本文起一個合適的標題還不是那麼容易,呵呵,所以在此先說明下本文的兩個目的:
(1)介紹javascript中的eval函式的用法
(2)如何在函式內執行全域性程式碼
而在實際的Ajax開發中,有時我們需要從伺服器動態獲取程式碼來執行,以減輕一次載入程式碼過多的問題,或者是一些程式碼是透過Javascript自身生成的,希望用eval函式來使其執行。
但這樣的動態獲取程式碼的工作一般在函式內完成,比如:
(1)介紹javascript中的eval函式的用法
(2)如何在函式內執行全域性程式碼
►先來說eval的用法,內容比較簡單,熟悉的可以跳過。
eval函式接收一個引數s,如果s不是字串,則直接返回s。否則執行s語句。如果s語句執行結果是一個值,則返回此值,否則返回undefined。
需要特別注意的是物件宣告語法“{}”並不能返回一個值,需要用括號括起來才會返回值,簡單示例如下:
eval函式接收一個引數s,如果s不是字串,則直接返回s。否則執行s語句。如果s語句執行結果是一個值,則返回此值,否則返回undefined。
需要特別注意的是物件宣告語法“{}”並不能返回一個值,需要用括號括起來才會返回值,簡單示例如下:
var code1='"a" + 2'; //表示式var code2='{a:2}'; //語句alert(eval(code1)); //->'a2'alert(eval(code2)); //->undefinedalert(eval('(' + code2 + ')')); //->[object Object]
可以看到,對於物件宣告語句來說,僅僅是執行,並不能返回值。為了返回常用的“{}”這樣的物件宣告語句,必須用括號括住,以將其轉換為表示式,才能返回其值。這也是使用JSON來進行Ajax開發的基本原理之一。在例子中可以清楚的看到,第二個alert語句輸出的是undefined,而第三個加了括號後輸出的是語句表示的物件。
►現在來說本文的重點,如何在函式內執行全域性程式碼。為了說明這個問題,先看一個例子:
var s='global'; //定義一個全域性變數function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global
eval('var s="local"');
}
demo1();
alert(s); //->global
很好理解,上面的demo1函式等價於:function demo1(){var s='local';},其中定義了一個區域性變數s。
所以最後的輸出是global並不是什麼奇怪的事情,畢竟大家都能很清楚的區分區域性變數和全域性變數。
仔細體會一下,可以發現eval函式的特點,它總是在呼叫它的上下文變數空間(也稱為:包,closure)內執行,無論是變數定義還是函式定義都是如此,所以如下的程式碼會產生函式未定義的錯誤:
所以最後的輸出是global並不是什麼奇怪的事情,畢竟大家都能很清楚的區分區域性變數和全域性變數。
仔細體會一下,可以發現eval函式的特點,它總是在呼叫它的上下文變數空間(也稱為:包,closure)內執行,無論是變數定義還是函式定義都是如此,所以如下的程式碼會產生函式未定義的錯誤:
var s='function test(){return 1;}'; //一個函式定義語句function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
這是因為test函式在區域性空間定義,demo2函式內可以訪問到,外面就訪問不到了。
而在實際的Ajax開發中,有時我們需要從伺服器動態獲取程式碼來執行,以減輕一次載入程式碼過多的問題,或者是一些程式碼是透過Javascript自身生成的,希望用eval函式來使其執行。
但這樣的動態獲取程式碼的工作一般在函式內完成,比如:
function loadCode(){
var code=getCode();
eval(code);
}
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);
}
}
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'
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'
可見,在demo3函式內重新定義了全域性變數s="local"。
需要注意的是X2.Eval並不返回值,如果要進行表示式的求值,還是用系統的eval函式。X2.Eval設計為僅做全域性程式碼定義用。
需要注意的是X2.Eval並不返回值,如果要進行表示式的求值,還是用系統的eval函式。X2.Eval設計為僅做全域性程式碼定義用。
其實看到這裡,或許有人感覺問題也太容易解決了點,呵呵,但發現這個辦法倒是需要些運氣和技巧的:
(1)對於IE瀏覽器,預設已經提供了這樣的函式:execScript,用於在全域性空間執行程式碼,只是知道的人還不多。
(2)對於Firefox瀏覽器,直接呼叫eval函式,則在呼叫者的空間執行;如果呼叫 window.eval則在全域性空間執行。這個知道的人估計就更少了。畢竟alert(eval==window.eval)返回true!
(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.
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孰是孰非也就很難說了,大家知道解決辦法就好。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/92289/viewspace-988442/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- java如何實現javascript中的eval函式JavaScript函式
- 深入認識 http_build_query 函式HTTPUI函式
- 深入理解 JavaScript 中的函式JavaScript函式
- 【進階3-2期】JavaScript深入之重新認識箭頭函式的thisJavaScript函式
- Python中eval函式的表示式如何使用Python函式
- 淺談eval函式函式
- strcat函式的基礎認識函式
- javascript中的函式JavaScript函式
- eval()函式用法詳解函式
- Python-eval()函式Python函式
- python函式每日一講 - eval函式Python函式
- Javascript函式的基本知識JavaScript函式
- 深入探討JavaScript函式物件JavaScript函式物件
- JavaScript Function 函式深入總結JavaScriptFunction函式
- Python中eval函式是什麼?如何使用?Python函式
- python內建函式-eval()函式與exec()函式的區別Python函式
- Golang字串函式認識(二)Golang字串函式
- Golang字串函式認識(一)Golang字串函式
- javascript中的原生函式JavaScript函式
- javascript中的trim函式JavaScript函式
- javascript系列--認識並理解建構函式,原型和原型鏈JavaScript函式原型
- 再探JS---eval函式JS函式
- 深入理解 JavaScript 回撥函式JavaScript函式
- JavaScript eval()JavaScript
- JavaScript中的compose函式和pipe函式JavaScript函式
- 我所認識的JavaScript正規表示式JavaScript
- 深入理解javascript系列(十六):深入高階函式JavaScript函式
- 對高階函式的簡單認識函式
- 對於HOOK函式的一點認識Hook函式
- JavaScript中的函式繼承JavaScript函式繼承
- javascript函式中with的介紹JavaScript函式
- js eval()函式的用法簡單介紹JS函式
- e語言 類似eval函式作用的函式
- JavaScript中回撥函式知識點,都在這了!JavaScript函式
- 【認識JavaScript】JavaScript
- 深入理解javascript系列(十四):純函式JavaScript函式
- TypeScript 中函式的理解?與 JavaScript 函式的區別?TypeScript函式JavaScript