Javascript未必全了解的標(biāo)識(shí)符順序

一、局部變量先使用后聲明，不影響外部同名變量
Js代碼
1.var x = 1; // --> 外部變量x   
2.function fn(){   
3.    alert(x);  // --> undefined 局部變量x先使用   
4.    var x = 2; // 后聲明且賦值   
5.}   
6.fn();   
7.alert(x); // --> 1  
var x = 1; // --> 外部變量x
function fn(){
    alert(x);  // --> undefined 局部變量x先使用
    var x = 2; // 后聲明且賦值
}
fn();
alert(x); // --> 1

第一點(diǎn)，函數(shù)fn內(nèi)第一句輸出x，x是在第二句才定義的。這在js中是允許的，這里的允許是指不會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤程序可以運(yùn)行。
但在其它語(yǔ)言如C，Java中卻是不允許的。變量必選先聲明后使用，如：

Java代碼
1.public class Test {   
2.    public static void main(String[] args) {   
3.        System.out.println(x); // 先使用   
4.        int x = 10; // 后聲明   
5.    }   
6.}  
public class Test {
    public static void main(String[] args) {
        System.out.println(x); // 先使用
        int x = 10; // 后聲明
    }
}

Java中編譯器會(huì)提示錯(cuò)誤，程序無(wú)法運(yùn)行。

第二點(diǎn)，函數(shù)fn內(nèi)的局部變量x不會(huì)影響到外部的變量x。即fn內(nèi)alert輸出不是1，而是undefined。

順便提下，這段代碼經(jīng)常出現(xiàn)在前端面試題中。


　　二、形參優(yōu)先級(jí)高于函數(shù)名
Js代碼
1.function fn(fn){   
2.    alert(fn);   
3.}   
4.fn('hello'); // --> "hello"  
function fn(fn){
    alert(fn);
}
fn('hello'); // --> "hello"

可以看到函數(shù)名和形參同名都是fn，輸出的是字符串"hello"，卻不是函數(shù)fn的函數(shù)體(fn.toString())。



　　三、形參優(yōu)先級(jí)高于arguments
Js代碼
1.function fn(arguments){   
2.    alert(arguments);   
3.}   
4.fn('hello'); // --> "hello"  
function fn(arguments){
    alert(arguments);
}
fn('hello'); // --> "hello"

arguments對(duì)象可以直接在函數(shù)內(nèi)使用，是語(yǔ)言本身提供的標(biāo)識(shí)符。
這里剛好將形參聲明成與其同名。輸出可以看到是"hello"而非"[object Object]"，即形參arguments覆蓋了語(yǔ)言本身提供的真正的arguments。



　　四、形參優(yōu)先級(jí)高于只聲明卻未賦值的局部變量
Js代碼
1.function fn(a){   
2.    var a;   
3.    alert(a);   
4.}   
5.fn('hello'); // --> "hello"  
function fn(a){
    var a;
    alert(a);
}
fn('hello'); // --> "hello"

函數(shù)fn形參為a，函數(shù)內(nèi)第一句僅聲明局部變量a，卻并未賦值。從輸出結(jié)果是"hello"而非undefined可以看出形參a優(yōu)先級(jí)高于僅聲明卻未賦值的局部變量a。


　　五、聲明且賦值的局部變量?jī)?yōu)先級(jí)高于形參
Js代碼
1.function fn(a){   
2.    var a = 1;   
3.    alert(a);   
4.}   
5.fn('hello'); // --> "1"  
function fn(a){
    var a = 1;
    alert(a);
}
fn('hello'); // --> "1"

函數(shù)fn形參為a，函數(shù)內(nèi)第一句僅聲明局部變量a，賦值為1。從輸出結(jié)果是"1"而非"hello"可以看出聲明且賦值的局部變量a優(yōu)先級(jí)高于形參a。





　　六、了解了以上幾點(diǎn)，再看一個(gè)有趣的代碼
Js代碼
1.function fn(a){   
2.    var a = a;   
3.    alert(a);   
4.}   
5.fn('hello');  
function fn(a){
    var a = a;
    alert(a);
}
fn('hello');

暫不運(yùn)行，猜測(cè)下結(jié)果。如果按照第五點(diǎn)：聲明且賦值的局部變量?jī)?yōu)先級(jí)高于形參。那么a將是undefined。但實(shí)際上a是"hello"，即右a是形參a，左a才是局部變量a。


　　這里的兩個(gè)a互不干擾，誰(shuí)也沒(méi)覆蓋誰(shuí)。這與剛剛說(shuō)的賦值的局部變量?jī)?yōu)先級(jí)高于形參又矛盾了。但引擎這樣做的確是我們想要的，因?yàn)椴⒉幌Ｍ鹶ar a = a后a是undefined。


圖片: