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

來源:互聯網
上載者:User
到了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); //numberalert(typeof y); //undefinedfun1();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定義的變數嘛,就沒有這樣的待遇了,必須等執行到才進行分配

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編譯器知道你明確的要幹嘛,而不是由他去猜呀猜的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.