eval的作用其實很簡單,就是把一段字串傳遞給JS解釋器,由Javascript解釋器將這段字串解釋成Javascript程式碼,並且執行他。
舉個最簡單的例子:
複製代碼代碼如下:
<script type="text/javascript">
eval("alert(1+1)");
script>
很簡單,把字串解釋成JS程式碼並執行,彈出2。
當然,上面的例子只是個玩具,實際上沒有人會傻到這麼用。我想大家最基本的使用eval函數都是應該在DOM中,例如我們有div1,div2,div3,那麼在document.getElementByID時我們的ID沒有辦法去得到,那麼最簡單的辦法就是在for循環中,使用eval來拼接這麼一段程式。例如這樣:
複製代碼代碼如下:
<script type="text/javascript">
for (var loop = 1; loop < 10; loop++) {
eval('document.getElementById("div"+loop).innerHTML="123"');
}
script>
最基本的用法說完,相信大家還是對這個函數意猶未盡,如果這個函數只有這麼點用法,那就太無聊了。那我們就一點點來剖下eval()函數。
我們就先從eval的作用域說起,先看這樣一段函數:
複製代碼代碼如下:
<script type="text/javascript">
eval("var i=3");
alert(i);
script>
程式碼很簡單,結果可以彈出3。接下來再對比這段程式碼:
複製代碼代碼如下:
<script type="text/javascript">
var test = function () {
eval("var i=3");
alert(i);
}
test();
alert(i);
script>
結果是先彈出3,然後是undefined。
那麼說明:eval()函數動態執行的程式碼並不會建立新的作用域,其程式碼就是在目前的作用域執行的。因此也就是說,eval()函數也完全可以使用目前作用域的this,argument等物件。
在IE中,支援這樣一種和eval()非常類似的函數叫做:execScript()。我們可以來寫段簡單的程式碼。
複製代碼代碼如下:
<script type="text/javascript">
var test = function () {
execScript("var i=3");
alert(i);
}
test();
alert(i);
script>
結果彈出了2個3,這也看出了execScript函數的特點,首先他和eval相類似,都能將字串解釋成JS程式碼並且執行,但是他的作用域不是當前作用域,而是全域作用域。當我們把上面的程式碼放到Firefox和Google瀏覽器上去試試看:發現在Firefox上execScript上程式碼是無效的,那麼也說明一個問題,execScript程式碼的瀏覽器相容性是有問題的。
那麼就引申出這樣一個問題,我們如何能把這兩個函數的「優點」給匯總到一起呢,也就是說,全域+瀏覽器相容性。上網搜了下,自己給總結了一下,大概是這樣:
複製代碼代碼如下:
<script type="text/javascript">
var StrongEval = function (code) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
execScript(code);
}
if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
window.eval(code);
}
else {
execScript(code);
}
};
var Test = function () {
StrongEval("var i=3");
}
Test();
alert(i);
script>
這樣就可以完美地相容FF和IE了,其本質程式碼就在於在FF中eval和window.eval並不等效,這是個很奇妙的事。
另外,我們也可以用eval+with實現一些奇淫技巧。
我們在一般意義上可以寫出這樣的程式碼:
複製代碼代碼如下:
var obj = function () {
this.a = 1;
this.b = 2;
this.c = 5;
this.fun = function () {
this.c = this.a + this.b;
}
};
var o = new obj();
o.fun();
alert(oc);
或者是這樣:
複製代碼代碼如下:
var obj = {
a: 1,
b: 2,
c: 5,
fun: function () {
this.c = this.a + this.b;
}
}
再或者是這樣:
複製代碼代碼如下:
var obj = function () {
this.a = 1;
this.b = 2;
this.c = 5;
};
obj.prototype.fun = function () {
this.c = this.a + this.b;
}
var o = new obj();
o.fun();
alert(oc);
無論怎麼樣,你是不是對這樣的this感覺厭煩了呢?那就讓我們採取個很另類的辦法吧,讓至少在感官上可能會舒服一點。
複製代碼代碼如下:
<script type="text/javascript">
var funtemp = function () {
c = a + b;
}
var obj = {
a: 1,
b: 2,
c: 5
};
var fun;
with (obj) {
eval("fun = " + funtemp);
}
fun();
alert(obj.c);
script>
這很勉強,那麼好,我們不討論什麼看著舒服不舒服。我們來討論這樣一種情況。
複製代碼代碼如下:
<script>
var DBCommon = function () {
alert("1."); CreateConnection();
alert("2."); OpenConnection();
alert("3."); CreateCommand();
alert("4."); ExcuteCommand();
alert("5."); CloseConnection();
}
var SQLServerCommon = {
CreateConnection: function () { alert("建立SQL Server連線"); },
OpenConnection: function () { alert("開啟SQL Server連線"); },
CreateCommand: function () { alert("建立¨SQL Server指令"); },
ExcuteCommand: function () { alert("執行DSQL Server指令"); },
CloseConnection: function () { alert("關閉SQL Server連線"); }
};
var OracleCommon = {
CreateConnection: function () { alert("建立¢Oracle連線"); },
OpenConnection: function () { alert("開啟aOracle連線"); },
CreateCommand: function () { alert("建立¨Oracle指令"); },
ExcuteCommand: function () { alert("執行DOracle指令"); },
CloseConnection: function () { alert("關閉?Oracle連線"); }
};
with (SQLServerCommon) {
eval("forSQLServer=" + DBCommon);
}
with (OracleCommon) {
eval("forOracle=" + DBCommon);
}
forSQLServer();
forOracle();
script>
我們又是否可以把這個看成是簡陋的模板方法模式呢?呵呵。我們也可以把這個稱為利用eval和with配合改變函數的上下文。
不過話又說回來,Eval在一般的情況中是很少被用到的,我們是完全可以避免來使用它的。