Javascript變量作用域詳解

JS作用域規則

  • JS大部分情況下沒有塊級作用域, 除非你使用let

  • 當你使用var的情況下, JS僅僅支持函數作用域

  • 不使用var, let聲明的變量為全局變量

  • 不用let情況下, JS中局部變量只能通過var和函數參數聲明

  • 1. JS大部分情況下沒有塊級作用域, 除非你使用let

    與很多語言不同, JS在ES6之前并沒有塊級作用域:

    function test() { // 一個作用域
        for(var i = 0; i < 10; i++) { // 不是一個作用域
            // count
        }
        console.log(i); // 10
        
        for(let j = 0; j < 10; j++) { // 是一個獨立作用域
            // count
        }
        console.log(j); // j is not defined
    }

    本例中i并不只存在于for循環的區域中而是存在于整個test函數中. 如果我們用let聲明變量i, i則擁有了塊級作用域

    2. 在你使用var的情況下, JS僅僅支持函數作用域

    剛才講了在ES6之前JS沒有塊級作用域, 那有什么作用域呢? 答案是函數作用域.

    function test() {
      var a = 'hello'
    }
    test()
    console.log(a) // a is not defined

    本例中在函數內部聲明的變量a的作用域僅限于函數內部, 所以在函數外部我們不能訪問到.

    3. 不使用var, let聲明的變量為全局變量

    如果我們把上面的例子中的var去掉會發生什么呢?

    function test() {
      a = 'hello'
    }
    test()
    console.log(a) // hello

    4. 不用let情況下, JS中局部變量只能通過var和函數參數聲明

    由上面的分析我們知道, 函數內部聲明的變量的作用域為函數內也就是屬于局部變量.

    //Exp1: 典型錯例
    for (var i = 0; i < 10; i++){  
        setTimeout(function(){
            console.log(i);
        }, 1000);
    } // 10 10 10...
    
    //Exp2: 利用setTimeout函數傳入參數
    for (var i = 0; i < 10; i++){  
        setTimeout(function(i){
            console.log(i);
        }, 1000, i);
    } // 1 2 3 4 ...
    
    //Exp3: 利用bind傳入函數參數
    for (var i = 0; i < 10; i++){  
        setTimeout(function(i){
            console.log(i);
        }.bind(null, i), 1000);
    } // 1 2 3 4 ...
    
    //Exp4: 利用閉包的性質傳入參數
    var cb = function(i) {
      return function() {
        console.log(i)
      }
    }
    for (var i = 0; i < 10; i++){  
        setTimeout(cb(i), 1000);
    } // 1 2 3 4 ...

    后三個例子看似無關聯其實原理是一致的: 把變量當作函數參數傳入函數, 這樣變量就在函數中有了局部作用域而非全局作用域.
    當然, 這其實是JS設計上的缺陷, 在ES6時代我們只需要通過let創建擁有快級作用域的變量就可以輕松解決上述問題了.

    //Exp5: 利用let創建塊級作用域參數
    for (let i = 0; i < 10; i++){  
        setTimeout(function(){
            console.log(i);
        }, 1000);
    } // 1 2 3...

來源:itnose

上一篇: JavaScript學習總結【1】初識JS

下一篇: HTML-告白程序

分享到: 更多
百人二八杠棋牌 排列五排除头 时时彩平刷软件 三肖6码论坛 88期一肖中平特 红马计划软件手机版免费 足彩2串1稳赚方案 重庆时时开奖结果记录现场 二八杠生死门八个口 ag赢钱技巧 重庆时时历史开奖记录 排列三6码组选多少钱 广东11选5计划软件免费版 功夫时时彩计划软件 下载 超神计划在线人工 pk106码倍投金额技巧表