var、let、const 三者宣告出來的變數作用域差別為何?

💡先講結論
var 的作用域範圍在函式內 ( 函式作用域 ),let、const 則屬於區塊作用域,且目前主流的宣告方式皆採用 let、const。

等等,什麼是函式作用域?什麼是區塊作用域?

函式作用域

函式作用域的意思就是,變數的生命週期在一個函式內,然後樣子看來起來像這樣

function fn(){
    var myName = '小白';
    // myName 變數的作用域僅存在此函式中
    console.log(myName);
}

fn();//印出小白
console.log(myName);// Uncaught ReferenceError: myName is not defined

區塊作用域

區塊作用域則有下列幾種類型

  • 函式:function fn() { …… } 區塊作用域是函式作用域的一種
  • for 迴圈:for( xxx){ …… }
  • 判斷式:if( expression ){ …… }
  • 純粹的區塊:{}
    基本上看到{}都可以認定為一個區塊

好像還看不太出來差別?我們來用以下例子區分

  1. for 迴圈

     for( var i=0 ; i<10; i++ ){}
     console.log(i);// 印出 10,抓得到 i 這個值!!
    
     for( let j=0 ; j<10; j++ ){}
     console.log(j);// 印出 Uncaught ReferenceError: j is not defined
    
  2. if 判斷式

     if( ..... ){
         var myName = '小白';
     }
     console.log(myName);// 印出小白
    
     if( ..... ){
         let yourName = '小葵';
     }
     console.log(yourName);// 印出 Uncaught ReferenceError: yourName is not defined
    
  3. 純粹的區塊

     {
         var myName = '小白';
     }
     console.log(myName);// 印出小白
    
     {
         let yourName = '小葵';
     }
     console.log(yourName);// 印出 Uncaught ReferenceError: yourName is not defined
    

從上述三個例子中可以發現,區塊作用域的優點會比函式作用域的優點要來得多,因為 var 所宣告的變數,除了在函式中宣告的不會變成全域變數外,其餘都會變成全域變數,這在幾百行幾千行中是非常難以除錯的,因此 let、const 宣告詞才會成為主流。

#javascript #變數與作用域







你可能感興趣的文章

[Week 2] JavaScript - 判斷式、迴圈

[Week 2] JavaScript - 判斷式、迴圈

How to build CICD with Jenkins as code based on container

How to build CICD with Jenkins as code based on container

[Week8] - 前端串 API

[Week8] - 前端串 API






留言討論