1. 程式人生 > >淺析const、let與var

淺析const、let與var

常用 ren 這樣的 不同 ons 語句 uncaught for語句 語法

  以前無論聲明變量還是常量,總是使用var一勺端,知道接觸了es6之後,發現原來變量、常量的聲明其實是很講究的。

  這裏簡單來談談var、const與let。

  1、var。var聲明的變量沒有塊級作用域,而且存在變量名提升的情況。這裏舉例說明。

<script>
    var num = 123;
    function foo(){
        console.log(num);  // undefined
        var num = 46;
        console.log(num) // 46
    }
    foo()
</script>                

  為什麽第一個輸出值會是undefined,而不是123呢?因為這裏存在著變量名的提升,其實上述語句相當於:

<script>
    var num = 123;
    function foo(){
        var num;
    console.log(num);  // undefined
    num = 46;
    console.log(num) // 46
    }
    foo()
</script>    

  上面主要體現了var存在著變量名的提升,那麽它沒有塊級作用域又是怎麽體現的呢?最常見的是在條件語句裏面,如if語句、for語句。這裏以if語句為例。

<script>
    var num = 123;
    if(true){
        console.log(num) // 123
       var num = 456;
        console.log(num)  // 456
    }
    console.log(num)  // 456
</script>    

  這裏為什麽第一個輸出值不是undefined,第三個輸出值不是123呢?原因是這樣的,因為var不存在塊級作用域,且變量名會提升,所以上述代碼其實相當於:

<script>
    var
num; num = 123 if(true){   console.log(num) // 123   num = 456;   console.log(num) // 456 } console.log(num) // 456 </script>

  所以在我看來,var其實是有利有弊的,利就是不用去管什麽常量與變量的,直接使用var就行,弊就是不存在塊級作用域且變量名會提升,這會在無形之中給我們帶來許多意想不到的問題

  2、const(es6中用來定義常量的一個關鍵字(當然了,其他語言裏也存在著const,這裏僅指在js中)。常用來聲明常量,且常量不可修改,必須初始化,存在著塊級作用域。

  (1)、不存在名稱提升問題。以代碼說事兒。

<script>
    function foo(){
    console.log(num); 
    const num = 456;
    console.log(num)
    }
    foo()
</script>

  運行上述代碼會發現會報錯 Uncaught ReferenceError: num is not defined 。這裏說明,使用const來定義的常量名並沒有提升。

  

  (2)、聲明時必須初始化。假如用const聲明的常量並沒有初始化呢?會有問題嗎?直接上代碼

<script>
    const num;
    console.log(num)
</script>

  這裏運行後發現會報錯。 Uncaught SyntaxError: Missing initializer in const declaration 意思是:語法錯誤,在const聲明中沒有初始化。

  同樣的代碼,只是const聲明初始化,結果會不會有變化呢?答案是不言而喻的了。

  

  (3)、存在著塊級作用域。什麽叫塊級作用域呢?上代碼: 

<script>
    const num = 456
    if(true){
        const num = 789;
        console.log(num); // 789
    }
    console.log(num) // 456
</script>

  可見在if語句內聲明的常量在if語句外並不能訪問到,這裏與var不同。這裏是以if語句為例的,當然在for語句亦或是函數內都是這樣的,存在著塊級作用域

  

  3、let(es6中用來定義變量的一個關鍵字)。let定義的變量存在著塊級作用域,在函數內定義的變量,對函數外部無影響。

  (1)、在函數內部定義的變量,對函數外部無影響,即存在著塊級作用域。  

<script>
    let num = 789;
    function foo(){
        let num = 46;
    console.log(num) // 46
    }
    foo()
    console.log(num) // 789
</script>    

  (2)、不存在著變量名的提升。

<script>
    function foo(){
    console.log(num); // Uncaught ReferenceError: num is not defined
    let num = 46;
    console.log(num)
    }
    foo()
</script>

  運行後發現會報錯,可見使用let聲明的變量,並不像var那樣存在著變量名的提升問題。

淺析const、let與var