Javascript中的循環(huán)變量聲明，到底應(yīng)該放在哪兒？
不放走任何一個(gè)細(xì)節(jié)。相信很多Javascript開(kāi)發(fā)者都在聲明循環(huán)變量時(shí)猶 豫過(guò)var i到底應(yīng)該放在哪里：放在不同的位置會(huì)對(duì)程序的運(yùn)行產(chǎn)生怎樣的影響？哪一種方式符合Javascript的語(yǔ)言規(guī)范？哪一種方式和ecma標(biāo)準(zhǔn)未來(lái)的發(fā)展 方向匹配？本文將對(duì)四種常見(jiàn)的聲明循環(huán)變量的書(shū)寫(xiě)方式進(jìn)行簡(jiǎn)單的分析和比較。
習(xí)慣1：不聲明直接使用
- function loop(arr) {
- for (i = 0; i < arr.length; i++) {
- // do something
- }
- }
非常危險(xiǎn)的使用習(xí)慣，一般情況下循環(huán)變量將成為window對(duì)象上的一個(gè)屬性被全局使用，極有可能影響程序的正常邏輯實(shí)現(xiàn)，想想都蛋疼，大家都懂的，就不在這里贅述了。
需要著重提一下的是，在strict模式下，未聲明變量而直接賦值的使用方式會(huì)直接拋出異常，早就該這么做啦！引用一下ecma-262標(biāo)準(zhǔn)附錄C中的一段話：
"Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object. When a simple assignment occurs within strict mode code, its LeftHandSide must not evaluate to an unresolvable Reference. If it does a ReferenceError exception is thrown (6.2.3.2)."
換言之，如果再使用未經(jīng)聲明的變量的話，ReferenceError異常會(huì)被拋出。
習(xí)慣2：放在for循環(huán)初始語(yǔ)句塊中并反復(fù)聲明
- function loop(arr) {
- for (var i = 0; i < arr.length; i++ ){
- // do someting
- }
- // console.log(i);
- for (var i = 0; i < arr.length; i++ ){
- // do something else
- }
- }
這種方式看似最安全規(guī)范，很多從C和Java轉(zhuǎn)到前端開(kāi)發(fā)的同學(xué)都偏愛(ài)這樣的寫(xiě)法，事實(shí)上，這也許是由于對(duì)Javascript中一個(gè)重要概念有所 誤解造成的——變量作用域。不同于C和Java，Javascript并不具備真正的塊級(jí)作用域，也就是說(shuō)，在第一個(gè)循環(huán)結(jié)束之 后，console.log(i)并不會(huì)打印undefined或者拋出ReferenceError異常，而是會(huì)正常打印出arr.length。
當(dāng) 然，這樣的寫(xiě)法雖然除了美觀以外意義不大，但是長(zhǎng)久以來(lái)兼容性良好且沒(méi)有違反任何規(guī)范——ecma標(biāo)準(zhǔn)中并沒(méi)有禁止在某一個(gè)作用域內(nèi)對(duì)于同一變量的重復(fù)聲 明。不僅如此，其實(shí)這里還有一個(gè)另外好消息，在ECMAScript 6中，一個(gè)新的，為支持真正的塊級(jí)作用域而生的關(guān)鍵字出現(xiàn)了——let。這里放一個(gè)傳送門(mén)，有興趣的同學(xué)可以自行了解：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
習(xí)慣3：在函數(shù)頂部和其他變量一起集中定義
- function loop(arr) {
- var var1;
- var var2;
- var i;
- for (i = 0; i < arr.length; i++) {
- // do something
- }
- }
這種c89-like式的變量定義方式在Javascript中幾乎無(wú)可挑剔，既不會(huì)造成Javascript支持塊級(jí)作用域的誤解，又不會(huì)污染全 局scope，還不違反任何標(biāo)準(zhǔn)和規(guī)范，主要缺點(diǎn)就是循環(huán)變量的聲明和循環(huán)體可能會(huì)隔開(kāi)比較遠(yuǎn)。在不借助更多代碼的前提下，除了等待各大主流瀏覽器廠商實(shí) 現(xiàn)ECMAScript 6中的let關(guān)鍵字以外，這個(gè)問(wèn)題似乎找不到更好的解決方案。
習(xí)慣4：將循環(huán)代碼封裝到IIFE中
- function loop(arr) {
- (function () {
- for (var i = 0; i < arr.length; i++) {
- // do something
- }
- })();
- }
最后一種習(xí)慣是前端程序員們熟悉的IIFE（Immediately-Invoked Function Expression），即立即執(zhí)行函數(shù)。此種方法的主要缺點(diǎn)是書(shū)寫(xiě)相對(duì)麻煩，且有多余的性能損耗（很小），但在兼容性、對(duì)各標(biāo)準(zhǔn)規(guī)范的遵循上表現(xiàn)良好。 如果不嫌麻煩，開(kāi)發(fā)者可以采取這種方式。
以上就是對(duì)Javascript中四種常見(jiàn)循環(huán)變量定義書(shū)寫(xiě)習(xí)慣的簡(jiǎn)單介紹和分析，各有利弊，讀者可以結(jié)合自己的需求擇優(yōu)使用。應(yīng)該說(shuō)，在 ECMAScript 6之前并沒(méi)有一種定義循環(huán)變量的完美解決方案。好在ECMAScript標(biāo)準(zhǔn)委員會(huì)也及時(shí)發(fā)現(xiàn)了這個(gè)問(wèn)題，讓我們一起期待let關(guān)鍵字吧。
