JavaScript打破作用域的牢籠

JavaScript作為一種鬆散型語言，有著許多令人瞠目結舌的特性（往往是一些令人捉摸不透的奇怪特性），本文我們將介紹如何使用JavaScript的一些特性來打破常規程式語言「作用域的牢籠」。

1.JavaScript宣告提升

很多人應該知道，js有變數宣告提升、函數宣告提升的特性。不管你之前是否了解，看下面的程式碼運行的結果是否符合你的預期：

var a=123;
//可以运行
abc();
//报错：def is not a function
def();
function abc(){
    //undefined
    console.log(a);
    var a="hello";
    //hello
    console.log(a);
}
var def=function(){
    console.log("def");
}

登入後複製

實際上js在運行時會對程式碼進行兩輪掃描。第一輪，初始化變數；第二輪，執行程式碼。第二輪執行程式碼很好理解，不過第一輪過程比較模糊。具體來說，第一輪會做下面三件事：

（1）宣告並初始化函數參數

（2）宣告局部變量，包括將匿名函數賦給一個局部變量，但不要初始化他們

（3）宣告並初始化函數

明白了這些理論基礎之後，上面那段程式碼在第一輪掃描之後實際上被js編譯器「翻譯」成瞭如下程式碼：

var a;
a=123;
function abc(){
    //局部变量，将会取代外部的a
    var a;
    //undefined
    console.log(a);
    var a="hello";
    //hello
    console.log(a);
}
var def;
//可以运行
abc();
//报错：def is not a function
def();
var def=function(){
    console.log("def");
}

登入後複製

現在再來看註解裡展示的程式執行時輸出，是不是覺得順理成章了。這就是js聲明提昇在當中扮演的角色。

知道了js宣告提升的作用機制之後，我們來看下面這段程式碼：

var obj={};
function start(){
    //undefined
    //This is obj.a
    console.log(obj.a);
    //undefined
    //This is a
    console.log(a);
    //成功输出
    //成功输出
    console.log("页面执行完成");
}

start();
var a="This is a";
obj.a="This is obj.a";
start();

登入後複製

上述註解第一行表示第一次執行start()方法時的輸出，第二行表示第二次執行start()方法的輸出。可以看到，由於js宣告提升的存在，兩次執行start()方法都沒有報錯。以下來看這個範例的小修改：

var obj={};
function start(){
    //undefined
    //This is obj.a
    console.log(obj.a);
    //报错
    //This is a
    console.log(a);
    //因为上一行的报错导致后续代码不执行
    //成功输出
    console.log("页面执行完成");
}

start();
/*---------------另一个js文件----------------*/
var a="This is a";
obj.a="This is obj.a";
start();

登入後複製

此時，由於a變數的宣告延遲到另一個js檔案中，導致第一次執行的時候console.log(a)程式碼報錯，從而後續的js程式碼不再執行。不過第二次執行start()方法仍然正常執行。這就是為什麼幾乎所有地方都推薦大家使用「js命名空間」來部署不同的js檔案。下面我們用一段程式碼來總結聲明提升+命名空間如何巧妙的「打破作用於的牢籠」：

/*-----------------第一个js文件----------------*/
var App={};
App.first=(function(){
    function a(){
        App.second.b();
    }

    return {
        a:a
    };
})();

/*-----------------另一个js文件----------------*/
App.second=(function(){
    function b(){
        console.log("This is second.b");
    }

    return {
        b:b
    };
})();

//程序起点,输出This is second.b
App.first.a();

登入後複製

這段程式將不會有任何報錯，我們可以在第一個js檔案內訪問任何App命名空間後續的屬性，只要程式起點在所有必要的賦值工作之後執行，就不會有任何問題。這個範例成功的展示如何透過合理的設計程式碼結構來充分利用js語言的動態特性。

看到這裡讀者可能會覺得這篇文章有點標題黨，上面的技巧只是透過程式碼佈局來做出的一種「假象」：看上去前面的程式碼在存取不存在的屬性，實際上真正執行時的順序都是合理正確的。那下面本文將介紹真正的「跨作用於訪問」技巧。

2.js執行時程式碼

大家都知道js語言有一個「eval()」方法，他就是一個典型的「真正打破作用在牢籠」的方法。看下面這段程式碼：

(function(){
    var code="console.log(a)";
    //This is a bird
    test(code);

    function test(code){
        console.log=function(arg){
            console.info("This is a "+arg);
        };
        var a="bird";
        eval(code);
    }
})();

登入後複製

看了這段程式碼，相信很多人可能會不禁感嘆js的奇葩：「這也能行？！」。是的。 test()方法由於宣告提升的機制，因此能夠被事先調用，正常執行。 test()方法接受一個code參數，在test()方法內部我們重寫了console.log方法，修改了一下輸出格式，並且在test內部定義了一個私有變數var a=”bird」。在test方法最後我們使用eval來動態執行code的程式碼，列印結果非常神奇：瀏覽器使用了我們重寫的console.log方法列印出了test方法內部的私有變數a。這是完全的作用域隔離。

類似的方法在js中還有很多，例如：eval(),setTimeout(),setInterval()以及部分原生物件的建構方法。但有兩點要提醒：

（1）這種方式會大幅降低程式的執行效率。大家都知道js本身是解釋性語言，本身表現已經比編譯型語言慢了好多個層次。在這基礎之上如果我們再使用eval這樣的方法去「再編譯」一段字串程式碼，程式的效能將會慢很多。

（2）使用這種方式程式設計會劇增程式碼的複雜度，分分鐘就會看不懂自己寫的程式碼。本文介紹這種方法是希望能讓讀者全面的了解js語法特性從而能更好的修正、排錯。本文完全不建議在生產等級的程式碼中使用第二種方式。

以上就是JavaScript打破作用域的牢籠的內容，更多相關內容請關注PHP中文網（www.php.cn）！