JavaScript作用域的使用

這次帶給大家JavaScript作用域的使用，使用JavaScript作用域的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是作用域？

作用域規定變數在什麼地方可用。

函數層級作用域

1.函數外宣告的變數為全域變量，函數內可以直接存取全域變數：

var global_var = 10; //全局变量function a(){
    alert(global_var); //全局变量在函数内可访问}a(); //10

2.JavaScript變數的作用域是函數級的，只有函數可以產生新的作用域，而非區塊級：

function a(){ //函数
    if(true){ //块
        var x = 1;
    }
    if(false){
        var y = 2;
    }
    alert(x); //1
    alert(y); //undefined}a();

變數x雖然在區塊語句(if)中宣告並賦值，但它的作用域是函數a，所以在函數a的任何位置它都可訪問。

有趣的是y變數的宣告和賦值雖然在false區塊語句裡，卻還是會印出undefined而不是報錯，因為JavaScript會把所有變數宣告提前到函數開頭，稱為變數提升：

function a(){
    alert(x);
    var x = 1;
    alert(x);}a(); //undefined 1//以上代码经过JavaScript变量提升后实际上是这个样子的：function a(){
    var x;
    alert(x);
    x = 1;
    alert(x);}

要注意的是，在函數內宣告變數一定要使用var，否則是宣告了一個全域變數：

function test(){
    a = 1;}test();alert(a); //1

3.巢狀函數可以存取外圍函數的變數

function a(){
    var x = 1;
    
    function b(){
        alert(x);
        var y = 2;
        
        function c(){
            alert(x);
            alert(y);
        }
        c();
    }
    b();}a(); // 1 1 2

要注意的是，巢狀函數裡如果有同名變量，那麼訪問到的是巢狀函數裡的變數

function a(){
    var x = 1;
    
    function b(){
        var x = 2;
        alert(x);
    }
    b();
    alert(x);}a(); //2 1

如何做到區塊級作用域

透過上面的例子我們了解到JavaScript變數作用域是函數級的，但有時候我們想用臨時變數怎麼辦呢？

透過IIFE(立即執行函數表達式)來實現：

function a(){
    if(true){
        (function(){ //IIFE开始
            var x = 1;
            alert(x); //1
        }()); //IIFE结束
        //alert(x); //这儿访问不到
    }
    //alert(x); //这儿访问不到}a();

這樣做的好處是不會造成變數污染，用完就沒了，大家商量好，過了今晚就不再聯絡。

作用域鏈

每當JavaScript解釋器進入一個函數，它都會看一下附近有哪些局部變量，把它們保存到該函數的variables物件中，並建立一個scope屬性來指向外部的variables物件

1.  var x=1;2.  function a() {3.     var y = 2;4.     function b() {5.         var z = 3;6.         alert(x+y+z);7.     }8.     b();9.  }10. a();

#結合上面的程式碼，看看JavaScript引擎是如何處理作用域的：

1. JavaScript把所有全域物件(變數x和函數a)放到global variables物件中

   global variables: x, a()

2. 發現a是個函數，它需要一個scope屬性來指向外部的variables(全域)，同時把變數保存起來

   a.scope -> global variables

   a.variables: y, b()

3. 來到第4行，發現b是函數，它需要一個scope屬性來指向它所在的作用域(a)

   b.scope -> a.variables

   b.variables: z

#找出變數的時候，先看看variables物件有沒有，沒有就根據scope找上一級的variables，就這樣一層一層往上找，直到找到為止。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

正規表示式怎麼在字串中提取數字

#React中有哪些類別定義元件

#

以上是JavaScript作用域的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！