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);
 //成功

上述注釋第一行表示第一次執行start()方法時的輸出，第二行表示第二次執行start()方法的輸出。可以看到，由于js聲明提升的存在，兩次執行start()方法都沒有報錯。下面來看對這個例子進行小小的修改：

var obj={};
function start(){
 //undefined
 //This is obj.a
 console.log(obj.a);
 //報錯
 //This is a
 console.log(a);
 //因為上一行的報錯導致后續代碼不執行
 //成功

此時，由于將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
 };
})();

//程序起點,

這段程序將不會有任何報錯，我們可以在第一個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語法特性從而能更好的修正、排錯。本文完全不推薦在生產級別的代碼中使用第二種方式。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com