JavaScript打破作用域的牢籠

JavaScript作為一種松散型語言，有著很多令人瞠目結(jié)舌的特性（往往是一些令人捉摸不透的奇怪特性），本文我們將介紹如何使用JavaScript的一些特性來打破常規(guī)編程語言“作用域的牢籠”。

1.JavaScript聲明提升

很多人應(yīng)該知道，js有變量聲明提升、函數(shù)聲明提升的特性。不管你之前是否了解，看下面的代碼運(yùn)行的結(jié)果是否符合你的預(yù)期：

var a=123;
//可以運(yùn)行
abc();
//報(bào)錯(cuò)：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");
}

實(shí)際上js在運(yùn)行時(shí)會(huì)對(duì)代碼進(jìn)行兩輪掃描。第一輪，初始化變量；第二輪，執(zhí)行代碼。第二輪執(zhí)行代碼很好理解，不過第一輪過程比較模糊。具體來說，第一輪會(huì)做下面三件事：

（1）聲明并初始化函數(shù)參數(shù)

（2）聲明局部變量，包括將匿名函數(shù)賦給一個(gè)局部變量，但并不初始化他們

（3）聲明并初始化函數(shù)

明白了這些理論基礎(chǔ)之后，上面那段代碼在第一輪掃描之后實(shí)際上被js編譯器“翻譯”成了如下代碼：

var a;
a=123;
function abc(){
 //局部變量，將會(huì)取代外部的a
 var a;
 //undefined
 console.log(a);
 var a="hello";
 //hello
 console.log(a);
}
var def;
//可以運(yùn)行
abc();
//報(bào)錯(cuò)：def is not a function
def();
var def=function(){
 console.log("def");
}

現(xiàn)在再來看注釋里展示的程序運(yùn)行時(shí)輸出，是不是覺得順理成章了。這就是js聲明提升在當(dāng)中起到的作用。

知道了js聲明提升的作用機(jī)制之后，我們來看下面這段代碼：

var obj={};
function start(){
 //undefined
 //This is obj.a
 console.log(obj.a);
 //undefined
 //This is a
 console.log(a);
 //成功

上述注釋第一行表示第一次執(zhí)行start()方法時(shí)的輸出，第二行表示第二次執(zhí)行start()方法的輸出。可以看到，由于js聲明提升的存在，兩次執(zhí)行start()方法都沒有報(bào)錯(cuò)。下面來看對(duì)這個(gè)例子進(jìn)行小小的修改：

var obj={};
function start(){
 //undefined
 //This is obj.a
 console.log(obj.a);
 //報(bào)錯(cuò)
 //This is a
 console.log(a);
 //因?yàn)樯弦恍械膱?bào)錯(cuò)導(dǎo)致后續(xù)代碼不執(zhí)行
 //成功

此時(shí)，由于將a變量的聲明推遲到另一個(gè)js文件中，導(dǎo)致第一次執(zhí)行的時(shí)候console.log(a)代碼報(bào)錯(cuò)，從而后續(xù)的js代碼不再執(zhí)行。不過第二次執(zhí)行start()方法仍然正常執(zhí)行。這就是為什么幾乎所有地方都推薦大家使用“js命名空間”來部署不同的js文件。下面我們用一段代碼來總結(jié)聲明提升+命名空間如何巧妙的“打破作用于的牢籠”：

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

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

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

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

//程序起點(diǎn),

這段程序?qū)⒉粫?huì)有任何報(bào)錯(cuò)，我們可以在第一個(gè)js文件內(nèi)訪問任何App命名空間后續(xù)的屬性，只要程序起點(diǎn)在所有必要的賦值工作之后執(zhí)行，就不會(huì)有任何問題。這個(gè)例子成功的展示了如何通過合理的設(shè)計(jì)代碼結(jié)構(gòu)來充分利用js語言的動(dòng)態(tài)特性。

看到這里讀者可能會(huì)覺得這文章有點(diǎn)標(biāo)題黨，上面的技巧只是通過代碼布局來做出的一種“假象”：看上去前面的代碼在訪問不存在的屬性，實(shí)際上真正執(zhí)行時(shí)的順序都是合理正確的。那下面本文將介紹真正的“跨作用于訪問”技巧。

2.js執(zhí)行時(shí)代碼

大家都知道js語言有一個(gè)“eval()”方法，他就是一個(gè)典型的“真正打破作用于牢籠”的方法。看下面這段代碼：

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

看了這段代碼，相信很多人可能會(huì)不禁感嘆js的奇葩：“這也能行？！”。是的。test()方法由于聲明提升的機(jī)制，因此能夠被提前調(diào)用，正常執(zhí)行。test()方法接受一個(gè)code參數(shù)，在test()方法內(nèi)部我們重寫了console.log方法，修改了一下輸出格式，并且在test內(nèi)部定義了一個(gè)私有變量var a=”bird”。在test方法最后我們使用eval來動(dòng)態(tài)執(zhí)行code的代碼，打印結(jié)果非常神奇：瀏覽器使用了我們重寫的console.log方法打印出了test方法內(nèi)部的私有變量a。這是完全的作用域隔離。

類似的方法在js中還有很多，例如：eval(),setTimeout(),setInterval()以及部分原生對(duì)象的構(gòu)造方法。但是有兩點(diǎn)要提醒：

（1）這種方式會(huì)大大降低程序的執(zhí)行效率。大家都知道js本身是解釋性語言，其本身性能已經(jīng)比編譯型語言慢了好多個(gè)級(jí)別。在這基礎(chǔ)之上如果我們?cè)偈褂胑val這樣的方法去“再編譯”一段字符串代碼，程序的性能將會(huì)慢很多。

（2）使用這種方式編程會(huì)劇增代碼的復(fù)雜度，分分鐘你就會(huì)看不懂自己寫的代碼。本文介紹這種方法是希望能讓讀者全面的了解js語法特性從而能更好的修正、排錯(cuò)。本文完全不推薦在生產(chǎn)級(jí)別的代碼中使用第二種方式。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com