javascript eval(func())使用示例
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í)際中沒有人會(huì)傻到這么用。我想大家最基本的使用eval函數(shù)都是應(yīng)該在DOM中,例如我們有div1,div2,div3,那么在document.getElementByID時(shí)我們的ID沒有辦法去得到,那么最簡(jiǎn)單的辦法就是在for循環(huán)中,使用eval來拼接這么一段程序。例如這樣:
<script type="text/javascript">
for (var loop = 1; loop < 10; loop++) {
eval('document.getElementById("div"+loop).innerHTML="123"');
}
script>
最基本的用法說完,相信大家還是對(duì)這個(gè)函數(shù)意猶未盡,如果這個(gè)函數(shù)只有這么點(diǎn)用法,那就太無聊了。那我們就一點(diǎn)點(diǎn)來剖下一下eval()函數(shù)。
我們就先從eval的作用域說起,先看這樣一段函數(shù):
<script type="text/javascript">
eval("var i=3");
alert(i);
script>
代碼很簡(jiǎn)單,結(jié)果可以彈出3。接下來再對(duì)比這段代碼:
<script type="text/javascript">
var test = function () {
eval("var i=3");
alert(i);
}
test();
alert(i);
script>
結(jié)果是首先彈出3,然后是undefined。
那么說明:eval()函數(shù)動(dòng)態(tài)執(zhí)行的代碼并不會(huì)創(chuàng)建新的作用域,其代碼就是在當(dāng)前的作用域執(zhí)行的。因此也就是說,eval()函數(shù)也完全可以使用當(dāng)前作用域的this,argument等對(duì)象。
在IE中,支持這樣一種和eval()非常類似的函數(shù)叫做:execScript()。我們可以來寫段簡(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上代碼是無效的,那么也說明一個(gè)問題,execScript代碼的瀏覽器兼容性是有問題的。
那么就引申出這樣一個(gè)問題,我們?nèi)绾文馨堰@兩個(gè)函數(shù)的“優(yōu)點(diǎn)”給匯總到一起呢,也就是說,全局+瀏覽器兼容性。上網(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è)很奇妙的事。
我們?cè)谝话阋饬x上可以寫出這樣的代碼:
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);
無論怎么樣,你是不是對(duì)這樣的this感覺厭煩了呢?那就讓我們采取個(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),那么好,我們不討論什么看著舒服不舒服。我們來討論這樣一種情況。
<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("創(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("打開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ù)的上下文。
不過話又說回來,Eval在一般的情況中是很少被用到的,我們是完全可以避免來使用它的。
相關(guān)文章
ECMAScript6函數(shù)默認(rèn)參數(shù)
這篇文章主要介紹了ECMAScript6函數(shù)默認(rèn)參數(shù)的相關(guān)資料,需要的朋友可以參考下2015-06-06
JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法,可實(shí)現(xiàn)點(diǎn)擊頂部數(shù)據(jù)項(xiàng)標(biāo)題實(shí)現(xiàn)對(duì)應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05
BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio
這篇文章主要介紹了BootStrap表單控件之復(fù)選框checkbox和單選擇按鈕radio的相關(guān)資料,需要的朋友可以參考下2017-05-05
javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法
這篇文章主要介紹了javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05
JS隨拖拽速度設(shè)置傾斜角度的實(shí)現(xiàn)代碼
這篇文章主要給大家介紹了JS如何隨拖拽速度設(shè)置傾斜角度,文中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動(dòng)手嘗試一下2023-09-09
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
JS調(diào)用打印方法設(shè)置頁眉頁腳的實(shí)例
一個(gè)網(wǎng)頁打印相關(guān)功能的擴(kuò)展演示特效,在實(shí)現(xiàn)了打印功能外,還實(shí)現(xiàn)了打印預(yù)覽、打印前的頁眉頁腳設(shè)置,直接打印等功能,以前對(duì)JS打印前設(shè)置頁腳見的不多,所以這一個(gè)也算是挺有價(jià)值的,希望閑暇時(shí)參閱2013-05-05
JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決
這篇文章主要為大家介紹了JS的鼠標(biāo)監(jiān)聽mouseup鼠標(biāo)抬起失效原因及解決示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
純js實(shí)現(xiàn)無縫滾動(dòng)功能代碼實(shí)例
這篇文章主要介紹了純js實(shí)現(xiàn)無縫滾動(dòng)功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02

