JavaScript學習筆記四——Eval函數

作者: 飛林沙來源: 博客園發布時間: 2010-01-18 10:19 閱讀: 3543 次推薦: 1 原文鏈接 [收藏]

系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

　　在初學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和谷歌瀏覽器上去試試：發現在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>