來來來，一起五句話搞定JavaScript作用域

chelen_jak發表於2016-07-19
JavaScript
原文出處：http://3060674.blog.51cto.com/3050674/1812390

JavaScript的作用域一直以來是前端開發中比較難以理解的知識點，對於JavaScript的作用域主要記住幾句話，走遍天下都不怕...

一、“JavaScript中無塊級作用域”

在Java或C#中存在塊級作用域，即：大括號也是一個作用域。

1
2
3
4
5
6
public static void main ()
{    if(1==1){
        String name = "seven";
    }
    System.out.println(name);
}// 報錯
1
2
3
4
5
6
public static void Main()
{    if(1==1){
        string name = "seven";
    }
    Console.WriteLine(name);
}// 報錯

在JavaScript語言中無塊級作用域

1
2
3
4
5
6
7
function Main(){
    if(1==1){
        var name = 'seven';
    }
    console.log(name);
}
// 輸出： seven

二、JavaScript採用函式作用域

在JavaScript中每個函式作為一個作用域，在外部無法訪問內部作用域中的變數。

1
2
3
4
5
6
7
8
9
function Main(){
    var innerValue = 'seven';
}
  
Main();
  
console.log(innerValue);
  
// 報錯：Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域鏈

由於JavaScript中的每個函式作為一個作用域，如果出現函式巢狀函式，則就會出現作用域鏈。

1
2
3
4
5
6
7
8
9
10
11
xo = 'alex';
   
function Func(){
    var xo = "seven";
    function inner(){
        var xo = 'alvin';
        console.log(xo);
    }
    inner();
}
Func();


如上述程式碼則出現三個作用域組成的作用域鏈，如果出現作用域鏈後，那麼尋找變數時候就會出現順序，對於上述例項：

當執行console.log(xo)時，其尋找順序為根據作用域鏈從內到外的優先順序尋找，如果內層沒有就逐步向上找，直到沒找到丟擲異常。

425762-20160707114743577-37359182.png


四、JavaScript的作用域鏈執行前已建立

JavaScript的作用域在被執行之前已經建立，日後再去執行時只需要按照作用域鏈去尋找即可。

示例一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
xo = 'alex';
  
function Func(){
    var xo = "seven";
    function inner(){
  
        console.log(xo);
    }
    return inner;
}
  
var ret = Func();
ret();
// 輸出結果： seven

上述程式碼，在函式被呼叫之前作用域鏈已經存在：

  • 全域性作用域 -> Func函式作用域 -> inner函式作用域

當執行【ret();】時，由於其代指的是inner函式，此函式的作用域鏈在執行之前已經被定義為：全域性作用域 -> Func函式作用域 -> inner函式作用域，所以，在執行【ret();】時，會根據已經存在的作用域鏈去尋找變數。


示例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
xo = 'alex';
  
function Func(){
    var xo = "eirc";
    function inner(){
  
        console.log(xo);
    }
    xo = 'seven';
    return inner;
}
  
var ret = Func();
ret();
// 輸出結果： seven

上述程式碼和示例一的目的相同，也是強調在函式被呼叫之前作用域鏈已經存在：

  • 全域性作用域 -> Func函式作用域 -> inner函式作用域

不同的時，在執行【var ret = Func();】時，Func作用域中的xo變數的值已經由 “eric” 被重置為 “seven”，所以之後再執行【ret();】時，就只能找到“seven”。


示例三：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
xo = 'alex';
function Bar(){
    console.log(xo);
}
  
function Func(){
    var xo = "seven";
      
    return Bar;
}
  
var ret = Func();
ret();
// 輸出結果： alex

上述程式碼，在函式被執行之前已經建立了兩條作用域鏈：

  • 全域性作用域 -> Bar函式作用域

  • 全域性作用域 -> Func函式作用域

當執行【ret();】時，ret代指的Bar函式，而Bar函式的作用域鏈已經存在：全域性作用域 -> Bar函式作用域，所以，執行時會根據已經存在的作用域鏈去尋找。


五、宣告提前

在JavaScript中如果不建立變數，直接去使用，則報錯：

1
2
console.log(xxoo);
// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果建立值而不賦值，則該值為 undefined，如：

1
2
3
var xxoo;
console.log(xxoo);
// 輸出：undefined

在函式內如果這麼寫：

1
2
3
4
5
6
7
function Foo(){
    console.log(xo);
    var xo = 'seven';
}
  
Foo();
// 輸出：undefined

上述程式碼，不報錯而是輸出 undefined，其原因是：JavaScript的函式在被執行之前，會將其中的變數全部宣告，而不賦值。所以，相當於上述例項中，函式在“預編譯”時，已經執行了var xo；所以上述程式碼中輸出的是undefined。


相關文章