當javaScript從入門到提高前需要註意的細節:變量部分 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

到瞭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聲明的則肯定是全局變量。

01
<script type="text/javascript">
02
 
03
    var x = 10; //全局
04
    y = 100; //全局
05
 
06
    function fun1() {
07
        var m = 99; //局部
08
        n = 9; //全局
09
    }
10
 
11
    alert(typeof this.x); //number
12
    alert(typeof this.y); //number
13
    alert(typeof this.m); //undefined
14
    alert(typeof this.n); //undefined
15
    fun1();
16
    alert(typeof this.m); //undefined
17
    alert(typeof this.n); //number
18
    
19
 
20
</script>
以上代碼說明,當fun1被執行後,函數內沒有用var聲明的n變量,被註冊為全局變量瞭。

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

01
<script type="text/javascript">
02
 
03
    var x = 10; //全局
04
    y = 100; //全局
05
 
06
    function fun1() {
07
        var m = 99; //局部
08
        n = 9; //全局
09
    }
10
 
11
    alert(typeof window.x); //number
12
    alert(typeof window.y); //number
13
    alert(typeof window.m); //undefined
14
    alert(typeof window.n); //undefined
15
    fun1();
16
    alert(typeof window.m); //undefined
17
    alert(typeof window.n); //number
18
    
19
 
20
</script>
那麼,我們可以明顯的得到一個推理,在全局裡面,window和this是同一個對象指向。

1
<script type="text/javascript">
2
    alert(this == window);
3
    alert(this === window);
4
</script>
那麼下面的函數在其函數狀態和對象狀態時this的指向是不同的,因為javaScript的動態的執行,當其執行到的時候,才去計算上下文情況。

01
<script type="text/javascript">
02
 
03
    function Fo1() {
04
        return this;
05
    }
06
 
07
    alert(Fo1());
08
    alert(new Fo1());
09
    
10
</script>
樣作為變量,使用var聲明的變量是不可以刪除的,沒有使用var聲明的變量是可以刪除的

01
var x = 10; //全局
02
y = 100; //全局
03
 
04
function fun1() {
05
    var m = 99; //局部
06
    n = 9; //全局
07
    delete m;
08
    delete n;
09
    alert(typeof m); //number
10
    alert(typeof n); //undefined
11
}
12
 
13
delete x;
14
delete y;
15
 
16
alert(typeof x); //number
17
alert(typeof y); //undefined
18
fun1();
19
alert(typeof n); //undefined
在javaScript中聲明變量非常的靈活,但這個靈活性,對控制全局和局部要有所註意。

1
function fun1() {
2
    var m = n = 10; //n是全局,m是局部
3
    var x, y = 1, k = 10; //xyk都是局部
4
}
而且,有意思的是,在通常的語言中,我們對變量總是先定義後使用,不過在javaScript中嘛……看以下代碼

1
function fun1() {
2
    alert(typeof x); //undefined
3
    alert(typeof y); //undefined
4
    var x = 10;
5
    alert(typeof x); //number
6
}
7
 
8
fun1();
這樣的結果,對你來說是完全可以接受和預期的,不過……

1
function fun1() {
2
    alert(x); //undefined
3
    alert(y); //提示y沒有定義www.aiwalls.com
4
    var x = 10;
5
    alert(x); //number
6
}
7
 
8
fun1();
上面的現象很奇怪,如果我們當真要用x和y的時候,編譯器卻給予不同的對待,認為x僅僅是沒有定義(認可已經聲明瞭),而y是真正的不存在。這說明在處理 一個范圍的變量的時候,var無論你在哪裡聲明的,總是一開始就進行分配瞭。對於非var定義的變量嘛,就沒有這樣的待遇瞭,必須等執行到才進行分配

1
<pre name="code" class="html">function fun1() {
2
    alert(x); //提示x沒有定義
3
    alert(y); //提示y沒有定義
4
    x = 10;
5
    alert(x); //number
6
}
7
fun1();
更需要註意的是,在函數內部聲明的var變量,並不局限在聲明的代碼語句塊中,看看以下代碼

1
function fun1() {
2
    for (var i = 0; i < 10; i++) {
3
 
4
    }
5
    alert(i); //10
6
}
7
 
8
fun1();
所以呢,我們推薦在一個對象/函數的第一行就把所有的局部變量全部聲明完畢

1
function fun1() {
2
    var value = 1,
3
    arr = [],
4
     obj = {},
5
    date = new Date(),
6
    has = false;
7
}

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

1
function fun1() {
2
    var x = 10
3
    var y = 9
4
    return x + y
5
}
6
 
7
alert(fun1()); //19

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

01
function fun1() {
02
    return
03
    {
04
        Title: "title",
05
        Style: "style",
06
        Value: "Value"
07
    }
08
}
09
 
10
alert(typeof fun1());

因為javaScript會再return後面加一個;

正確的做法是

1
function fun1() {
2
    return {
3
        Title: "title",
4
        Style: "style",
5
        Value: "Value"
6
    };
7
}
8
 
9
alert(typeof fun1());
我不好說,這個原因一定是;不寫引起的,但我想說明的是,你要小心javaScript對隨意代碼的隨意處理:你總是應該讓javaScript編譯器知道你明確的要幹嘛,而不是由他去猜呀猜的。

摘自 晨真

發佈留言