javascript同名屬性優(yōu)先級

sanyang 發(fā)布于2019-08-21 12:28 / 1369人閱讀

摘要：賦值優(yōu)先于函數(shù)聲明第二個輸出可以看出我是變量又把覆蓋掉了。優(yōu)先級高于預(yù)定義變量。不是，說明沒有被聲明覆蓋聲明不賦值優(yōu)先級高于函數(shù)外部作用域的其他所有聲明。

我們先來看看下面的例子：


alert(a);//輸出：function a(){ alert("我是函數(shù)") }

function a(){ alert("我是函數(shù)") }//
var a = "我是變量";

alert(a);   //輸出："我是變量"

這代碼等效于：


function a(){alert("我是函數(shù)")} 
var a;    //hoisting
alert(a);    //輸出：function a(){ alert("我是函數(shù)") }
a = "我是變量";//賦值
alert(a);   //輸出："我是變量"

這短短的代碼里面其實(shí)說明了兩個問題：

function聲明的優(yōu)先級高于var聲明：第一個alert輸出可以看出var a;被function a(){}覆蓋掉了。

賦值優(yōu)先于函數(shù)聲明：第二個alert輸出可以看出a="我是變量"又把function a(){}覆蓋掉了。

把一個變量添加到作用域中除有很多方法，如下：

javascript語言預(yù)定義的，比如說this,arguments

formal parameter(也就是中文說的形參吧)

var聲明并賦值，比如說var a = 10;

var聲明不賦值，比如說var a;

function聲明，比如說function a(){};

我們來看看他們之間的優(yōu)先級：

1.var聲明并賦值優(yōu)先級高于function聲明
這個上面已經(jīng)說了。

2.function聲明優(yōu)先級高于formal parameter

function fnTest(a){
    alert(a);
    function a(){return "我優(yōu)先"}
}
fnTest(100);//:function a(){return "我優(yōu)先"}。可以看出function聲明覆蓋了`formal parameter`。

3.formal parameter優(yōu)先級高于預(yù)定義變量

function fnTest(arguments){
    alert(arguments);
}
fnTest(100);//:100。說明`formal parameter`優(yōu)先級比預(yù)定義的arguments高

對比以下：

function fnTest(a){
    alert(arguments);
}
fnTest(100);//:[Object Arguments] {0:100,length:1}。當(dāng)沒有沖突時輸出便是預(yù)定義的arguments

4.formal parameter優(yōu)先級高于var聲明不賦值

function fnTest(a){
    alert(a);
    var a;
}
fnTest(100);//:100。很明顯，不多說

5.預(yù)定義變量優(yōu)先級高于 var聲明不賦值

function fnTest(){
    alert(arguments);
    var arguments;
}
fnTest();//:[Object Arguments]。不是undefined，說明arguments沒有被var聲明覆蓋

6.var聲明不賦值優(yōu)先級高于函數(shù)外部作用域的其他所有聲明

function fnTest(){
    alert(fnTest);
    var fnTest;
}
fnTest();//:undefined。

對比如下：

function fnTest(){    //
    alert(fnTest);    //    
}    //
fnTest();    //輸出function fnTest(){alert(fnTest);}

這也正好印證了作用域鏈查找變量的方式：在局部作用域里查找（若找到則返回，不必往下繼續(xù)查找） ==> 在上一級作用域里查找... ==> 直到全局作用域（若找不到則返回typeError）

最后看看下面的綜合例子：

function fnTest(arguments){//
    alert(arguments);//function arguments(){return "hello world"}
    var arguments = 99;//
    function arguments(){return "hello world"};
    alert(arguments);//99
}
fnTest(100);