標籤:info idt 範圍鏈 code 中比 void uncaught img 分享
JavaScript的範圍一直以來是前端開發中比較難以理解的知識點,對於JavaScript的範圍主要記住幾句話
一、JavaScript中無塊級範圍
在Java或C#中存在塊級範圍,即:大括弧也是一個範圍。
public static void main (){ if(1==1){ String name = "seven"; } System.out.println(name);}// 報錯Java
Java中
public static void Main(){ if(1==1){ string name = "seven"; } Console.WriteLine(name);}// 報錯C#
C#中
在JavaScript語言中無塊級範圍
function Main(){ if(1==1){ var name = ‘seven‘; } console.log(name);}// 輸出: seven
二、JavaScript中採用函數範圍
在JavaScript中每個函數作為一個範圍,在外部無法訪問內部範圍中的變數。
function Main(){ var innerValue = ‘seven‘;} Main(); console.log(innerValue); // 報錯:Uncaught ReferenceError: innerValue is not defined
三、JavaScript中的範圍鏈
由於JavaScript中的每個函數作為一個範圍,如果出現函數嵌套函數,則就會出現範圍鏈。
xo = ‘alex‘; function Func(){ var xo = "seven"; function inner(){ var xo = ‘alvin‘; console.log(xo); } inner();}Func();
如上述代碼則出現三個範圍組成的範圍鏈,如果出現範圍鏈後,那麼尋找變數時候就會出現順序,對於上述執行個體:
當執行console.log(xo)時,其尋找順序為根據範圍鏈從內到外的優先順序尋找,如果內層沒有就逐步向上找,直到沒找到拋出異常。
四、JavaScript中的範圍鏈執行前已建立
JavaScript的範圍在被執行之前已經建立,日後再去執行時只需要按照範圍鏈去尋找即可。
樣本一:
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();】時,會根據已經存在的範圍鏈去尋找變數。
樣本二:
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”。
樣本三:
xo = ‘alex‘;<br>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中如果不建立變數,直接去使用,則報錯:
console.log(xxoo);// 報錯:Uncaught ReferenceError: xxoo is not defined
JavaScript中如果建立值而不賦值,則該值為 undefined,如:
var xxoo;console.log(xxoo);// 輸出:undefined
在函數內如果這麼寫:
function Foo(){ console.log(xo); var xo = ‘seven‘;} Foo();// 輸出:undefined
上述代碼,不報錯而是輸出 undefined,其原因是:JavaScript的函數在被執行之前,會將其中的變數全部聲明,而不賦值。所以,相當於上述執行個體中,函數在“先行編譯”時,已經執行了var xo;所以上述代碼中輸出的是undefined。
【html、CSS、javascript-7】JavaScript範圍