系列文章導(dǎo)航：

JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類型

JavaScript學(xué)習(xí)筆記二——函數(shù)

JavaScript學(xué)習(xí)筆記三——作用域

JavaScript學(xué)習(xí)筆記四——Eval函數(shù)

JavaScript學(xué)習(xí)筆記五——類和對象

JavaScript學(xué)習(xí)筆記六：prototype的提出

Javascript學(xué)習(xí)筆記七——原型鏈的原理

Javascript學(xué)習(xí)筆記八——用JSON做原型

Javascript學(xué)習(xí)筆記九——prototype封裝繼承

Javascript學(xué)習(xí)筆記十——網(wǎng)頁運(yùn)行原理

Javascript學(xué)習(xí)筆記十一——包裝DOM對象

Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件

Javascript學(xué)習(xí)筆記十二——Ajax入門

　　在初學(xué)JS的時(shí)候就知道這個(gè)函數(shù)，卻一直沒有了解過他的用途，也一直都是睜一只眼閉一只眼，這次來深入地了解一下這個(gè)函數(shù)的作用。

　　eval的作用其實(shí)很簡單，就是把一段字符串傳遞給JS解釋器，由Javascript解釋器將這段字符串解釋成Javascript代碼，并且執(zhí)行他。

　　舉個(gè)最簡單的例子：

    <script type="text/Javascript">        eval("alert(1+1)");    script>

　　很簡單，把字符串解釋成JS代碼并執(zhí)行，彈出2。

　　當(dāng)然，上面的例子只是個(gè)玩具，在實(shí)際中沒有人會(huì)傻到這么用。我想大家最基本的使用eval函數(shù)都是應(yīng)該在DOM中，例如我們有div1,div2,div3，那么在document.getElementByID時(shí)我們的ID沒有辦法去得到，那么最簡單的辦法就是在for循環(huán)中，使用eval來拼接這么一段程序。例如這樣：

    <script type="text/Javascript">        for (var loop = 1; loop < 10; loop++) {            eval('document.getElementById("div"+loop).innerHTML="123"');        }    script>

　　最基本的用法說完，相信大家還是對這個(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é)果可以彈出3。接下來再對比這段代碼：

    <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等對象。

　　在IE中，支持這樣一種和eval()非常類似的函數(shù)叫做：execScript()。我們可以來寫段簡單的代碼。

    <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è)很奇妙的事。

　　另外，我們還可以用eval+with實(shí)現(xiàn)一些奇淫技巧。

　　我們在一般意義上可以寫出這樣的代碼：

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);

　　無論怎么樣，你是不是對這樣的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è)簡陋的模板方法模式呢？呵呵。我們也可以把這個(gè)稱為利用eval和with配合改變函數(shù)的上下文。

　　不過話又說回來，Eval在一般的情況中是很少被用到的，我們是完全可以避免來使用它的。

it知識(shí)庫：JavaScript學(xué)習(xí)筆記四——Eval函數(shù)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。