|
系列文章導(dǎo)航:
JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類型
JavaScript學(xué)習(xí)筆記二——函數(shù)
JavaScript學(xué)習(xí)筆記三——作用域
JavaScript學(xué)習(xí)筆記四——Eval函數(shù)
JavaScript學(xué)習(xí)筆記五——類和對(duì)象
JavaScript學(xué)習(xí)筆記六:prototype的提出
Javascript學(xué)習(xí)筆記七——原型鏈的原理
Javascript學(xué)習(xí)筆記八——用JSON做原型
Javascript學(xué)習(xí)筆記九——prototype封裝繼承
Javascript學(xué)習(xí)筆記十——網(wǎng)頁(yè)運(yùn)行原理
Javascript學(xué)習(xí)筆記十一——包裝DOM對(duì)象
Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件
Javascript學(xué)習(xí)筆記十二——Ajax入門(mén)
在初學(xué)JS的時(shí)候就知道這個(gè)函數(shù),卻一直沒(méi)有了解過(guò)他的用途,也一直都是睜一只眼閉一只眼,這次來(lái)深入地了解一下這個(gè)函數(shù)的作用。
eval的作用其實(shí)很簡(jiǎn)單,就是把一段字符串傳遞給JS解釋器,由Javascript解釋器將這段字符串解釋成Javascript代碼,并且執(zhí)行他。
舉個(gè)最簡(jiǎn)單的例子:
<script type="text/Javascript"> eval("alert(1+1)"); script>
很簡(jiǎn)單,把字符串解釋成JS代碼并執(zhí)行,彈出2。
當(dāng)然,上面的例子只是個(gè)玩具,在實(shí)際中沒(méi)有人會(huì)傻到這么用。我想大家最基本的使用eval函數(shù)都是應(yīng)該在DOM中,例如我們有div1,div2,div3,那么在document.getElementByID時(shí)我們的ID沒(méi)有辦法去得到,那么最簡(jiǎn)單的辦法就是在for循環(huán)中,使用eval來(lái)拼接這么一段程序。例如這樣:
<script type="text/Javascript"> for (var loop = 1; loop < 10; loop++) { eval('document.getElementById("div"+loop).innerHTML="123"'); } script>
最基本的用法說(shuō)完,相信大家還是對(duì)這個(gè)函數(shù)意猶未盡,如果這個(gè)函數(shù)只有這么點(diǎn)用法,那就太無(wú)聊了。那我們就一點(diǎn)點(diǎn)來(lái)剖下一下eval()函數(shù)。
我們就先從eval的作用域說(shuō)起,先看這樣一段函數(shù):
<script type="text/Javascript"> eval("var i=3"); alert(i); script>
代碼很簡(jiǎn)單,結(jié)果可以彈出3。接下來(lái)再對(duì)比這段代碼:
<script type="text/Javascript"> var test = function () { eval("var i=3"); alert(i); } test(); alert(i); script>
結(jié)果是首先彈出3,然后是undefined。
那么說(shuō)明:eval()函數(shù)動(dòng)態(tài)執(zhí)行的代碼并不會(huì)創(chuàng)建新的作用域,其代碼就是在當(dāng)前的作用域執(zhí)行的。因此也就是說(shuō),eval()函數(shù)也完全可以使用當(dāng)前作用域的this,argument等對(duì)象。
在IE中,支持這樣一種和eval()非常類似的函數(shù)叫做:execScript()。我們可以來(lái)寫(xiě)段簡(jiǎn)單的代碼。
<script type="text/Javascript"> var test = function () { execScript("var i=3"); alert(i); } test(); alert(i); script>
結(jié)果彈出了2個(gè)3,這也就看出了execScript函數(shù)的特點(diǎn),首先他和eval相類似,都能將字符串解釋成JS代碼并且執(zhí)行,但是他的作用域不是當(dāng)前作用域,而是全局作用域。當(dāng)我們把上面的代碼放到Firefox和谷歌瀏覽器上去試試:發(fā)現(xiàn)在Firefox上execScript上代碼是無(wú)效的,那么也說(shuō)明一個(gè)問(wèn)題,execScript代碼的瀏覽器兼容性是有問(wèn)題的。
那么就引申出這樣一個(gè)問(wèn)題,我們?nèi)绾文馨堰@兩個(gè)函數(shù)的“優(yōu)點(diǎn)”給匯總到一起呢,也就是說(shuō),全局+瀏覽器兼容性。上網(wǎng)搜了下,自己給匯總了一下,大概是這樣:
<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了,其本質(zhì)代碼就在于在FF中eval和window.eval并不等效,這是個(gè)很奇妙的事。
另外,我們還可以用eval+with實(shí)現(xiàn)一些奇淫技巧。
我們?cè)谝话阋饬x上可以寫(xiě)出這樣的代碼:
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(o.c);
或者是這樣:
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(o.c);
無(wú)論怎么樣,你是不是對(duì)這樣的this感覺(jué)厭煩了呢?那就讓我們采取個(gè)很另類的辦法吧,讓至少在感官上可能會(huì)舒服一點(diǎn)。
<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>
這個(gè)很勉強(qiáng),那么好,我們不討論什么看著舒服不舒服。我們來(lái)討論這樣一種情況。
<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("打開(kāi)SQL Server連接"); }, CreateCommand: function () { alert("創(chuàng)建¨SQL Server命令"); }, ExcuteCommand: function () { alert("執(zhí)行DSQL Server命令"); }, CloseConnection: function () { alert("關(guān)閉SQL Server連接"); } }; var OracleCommon = { CreateConnection: function () { alert("建立¢Oracle連接"); }, OpenConnection: function () { alert("打開(kāi)aOracle連接"); }, CreateCommand: function () { alert("創(chuàng)建¨Oracle命令"); }, ExcuteCommand: function () { alert("執(zhí)行DOracle命令"); }, CloseConnection: function () { alert("關(guān)閉?Oracle連接"); } }; with (SQLServerCommon) { eval("forSQLServer=" + DBCommon); } with (OracleCommon) { eval("forOracle=" + DBCommon); } forSQLServer(); forOracle(); script>
我們又是否可以把這個(gè)看成是一個(gè)簡(jiǎn)陋的模板方法模式呢?呵呵。我們也可以把這個(gè)稱為利用eval和with配合改變函數(shù)的上下文。
不過(guò)話又說(shuō)回來(lái),Eval在一般的情況中是很少被用到的,我們是完全可以避免來(lái)使用它的。
it知識(shí)庫(kù):JavaScript學(xué)習(xí)筆記四——Eval函數(shù),轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。