Javascript學習筆記4——Eval函數

在初學JS的時候就知道這個函數，卻一直沒有瞭解過他的用途，也一直都是睜一隻眼閉一隻眼，這次來深入地瞭解一下這個函數的作用。

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(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感覺厭煩了呢？那就讓我們採取個很另類的辦法吧，讓至少在感官上可能會舒服一點。

    <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在一般的情況中是很少被用到的，我們是完全可以避免來使用它的。