當javaScript從入門到提高前需要注意的細節：變量部分

到了HTML5的時代，對javaScript的要求不是降低了，而是更提高了。javaScript語言的入門非常簡單，如果你有java、C#等C風格的結構化語言的基礎，那javaScript你最多半天就可以寫點什么了。但是javaScript是一種動態語言，這個特性決定了他在很多方面和java、C#等語言有極大的不同。很多人說只要會java、C#就可以在短時間內搞定javaScript，估計一般都是吹牛來的，用javaScript寫點簡單的應用沒有問題，如果要完全比較好的掌握，那需要真正的理解javaScript的動態這個特性。
當你快速的了解的javaScript入門編程后，在提高開發能力之前，需要的是確保掌握javaScript的編程細節或者說特殊性。
而且和css在不同的瀏覽器中有兼容性問題一樣，javaScript在不同的瀏覽器和版本中也同樣有不同的變化。

我認為javaScript入門之后，向中級（基于面向對象的編程）發展之前，有兩個問題會對開發者有影響：類型的動態和語法的靈活性。而這兩點的集合，是另很多入門級的javaScript人員造成各種詭異問題的核心。我這篇文章不討論關于語法的基礎，關于核心對象的方法，也不關心dom的處理，這些內容在網上的任何javaScript教程中都有，我們討論一個些基于代碼級別但容易寫錯的地方，為你將來的高質量的javaScript奠定些好的基礎。

我以下的內容是在IE7/8、Chrome14、FireFox10下進行測試。同時聲明一個事情，下面的內容的次序比較隨意，比javaScript還隨意，不是作為一步步的教程給零基礎看的。需要你至少有些javaScript的代碼經驗了。
?

關于變量部分

在javaScript中變量使用var聲明的變量是當前作用域的變量，不使用var聲明的則肯定是全局變量。

<script?type="text/javascript"> ?
?
????var?x?=?10;?//全局 ?
????y?=?100;?//全局 ?
?
????function?fun1()?{ ?
????????var?m?=?99;?//局部 ?
????????n?=?9;?//全局 ?
????} ?
?
????alert(typeof?this.x);?//number ?
????alert(typeof?this.y);?//number ?
????alert(typeof?this.m);?//undefined ?
????alert(typeof?this.n);?//undefined ?
????fun1(); ?
????alert(typeof?this.m);?//undefined ?
????alert(typeof?this.n);?//number ?
???? ?
?
</script>?

以上代碼說明，當fun1被執行后，函數內沒有用var聲明的n變量，被注冊為全局變量了。

下面的代碼得到同樣的執行效果

<script?type="text/javascript"> ?
?
????var?x?=?10;?//全局 ?
????y?=?100;?//全局 ?
?
????function?fun1()?{ ?
????????var?m?=?99;?//局部 ?
????????n?=?9;?//全局 ?
????} ?
?
????alert(typeof?window.x);?//number ?
????alert(typeof?window.y);?//number ?
????alert(typeof?window.m);?//undefined ?
????alert(typeof?window.n);?//undefined ?
????fun1(); ?
????alert(typeof?window.m);?//undefined ?
????alert(typeof?window.n);?//number ?
???? ?
?
</script>?

那么，我們可以明顯的得到一個推理，在全局里面，window和this是同一個對象指向。

<script?type="text/javascript"> ?
????alert(this?==?window); ?
????alert(this?===?window); ?
</script>?

那么下面的函數在其函數狀態和對象狀態時this的指向是不同的，因為javaScript的動態的執行，當其執行到的時候，才去計算上下文情況。

<script?type="text/javascript"> ?
?
????function?Fo1()?{ ?
????????return?this; ?
????} ?
?
????alert(Fo1()); ?
????alert(new?Fo1()); ?
???? ?
</script>?

同樣作為變量，使用var聲明的變量是不可以刪除的，沒有使用var聲明的變量是可以刪除的

var?x?=?10;?//全局 ?
y?=?100;?//全局 ?
?
function?fun1()?{ ?
????var?m?=?99;?//局部 ?
????n?=?9;?//全局 ?
????delete?m; ?
????delete?n; ?
????alert(typeof?m);?//number ?
????alert(typeof?n);?//undefined ?
} ?
?
delete?x; ?
delete?y; ?
?
alert(typeof?x);?//number ?
alert(typeof?y);?//undefined ?
fun1(); ?
alert(typeof?n);?//undefined?

在javaScript中聲明變量非常的靈活，但這個靈活性，對控制全局和局部要有所注意。

function?fun1()?{ ?
????var?m?=?n?=?10;?//n是全局，m是局部 ?
????var?x,?y?=?1,?k?=?10;?//xyk都是局部 ?
}?

而且，有意思的是，在通常的語言中，我們對變量總是先定義后使用，不過在javaScript中嘛……看以下代碼

function?fun1()?{ ?
????alert(typeof?x);?//undefined ?
????alert(typeof?y);?//undefined ?
????var?x?=?10; ?
????alert(typeof?x);?//number ?
} ?
?
fun1();?

這樣的結果，對你來說是完全可以接受和預期的，不過……

function?fun1()?{ ?
????alert(x);?//undefined ?
????alert(y);?//提示y沒有定義 ?
????var?x?=?10; ?
????alert(x);?//number ?
} ?
?
fun1();?

上面的現象很奇怪，如果我們當真要用x和y的時候，編譯器卻給予不同的對待，認為x僅僅是沒有定義（認可已經聲明了），而y是真正的不存在。這說明在處理一個范圍的變量的時候，var無論你在哪里聲明的，總是一開始就進行分配了。對于非var定義的變量嘛，就沒有這樣的待遇了，必須等執行到才進行分配

<pre?name="code"?class="html">function?fun1()?{ ?
????alert(x);?//提示x沒有定義 ?
????alert(y);?//提示y沒有定義 ?
????x?=?10; ?
????alert(x);?//number ?
} ?
fun1();?

更需要注意的是，在函數內部聲明的var變量，并不局限在聲明的代碼語句塊中，看看以下代碼

function?fun1()?{ ?
????for?(var?i?=?0;?i?<?10;?i++)?{ ?
?
????} ?
????alert(i);?//10 ?
} ?
?
fun1();?

所以呢，我們推薦在一個對象/函數的第一行就把所有的局部變量全部聲明完畢

function?fun1()?{ ?
????var?value?=?1, ?
????arr?=?[], ?
?????obj?=?{}, ?
????date?=?new?Date(), ?
????has?=?false; ?
}?

注意變量之間用逗號隔離,這樣的好處是明顯的，自己去考慮吧。
javaScript的語法很靈活，語句后面可以不加;來表示結束，這個時候編譯器會講硬回車作為語句的結束符合

function?fun1()?{ ?
????var?x?=?10 ?
????var?y?=?9 ?
????return?x?+?y ?
} ?
?
alert(fun1());?//19?

以上的代碼寫法我不知道有什么特別的好處，如果是炫耀你知道可以不用;來結束語句，那就到此為止吧。因為下面的代碼會得到一個錯誤

function?fun1()?{ ?
????return? ?
????{ ?
????????Title:?"title", ?
????????Style:?"style", ?
????????Value:?"Value"?
????} ?
} ?
?
alert(typeof?fun1());??

因為javaScript會再return后面加一個;
?

正確的做法是

function?fun1()?{ ?
????return?{ ?
????????Title:?"title", ?
????????Style:?"style", ?
????????Value:?"Value"?
????}; ?
} ?
?
alert(typeof?fun1());??

我不好說，這個原因一定是；不寫引起的，但我想說明的是，你要小心javaScript對隨意代碼的隨意處理：你總是應該讓javaScript編譯器知道你明確的要干嘛，而不是由他去猜呀猜的。

本文轉自shyleoking 51CTO博客，原文鏈接:http://blog.51cto.com/shyleoking/803091

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/393157.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/393157.shtml
英文地址，請注明出處：http://en.pswp.cn/news/393157.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！