一文詳解JavaScript作用域丨乾貨
JavaScript的作用域一直以來是前端開發中比較難以理解的知識點,對於JavaScript的作用域主要記住幾句話,走遍天下都不怕...
一、“JavaScript中無塊級作用域”
在Java或C#中存在塊級作用域,即:大括號也是一個作用域。
publicstaticvoidmain (){ if(1==1){Stringname ="seven"; } System.out.println(name);} // 報錯
publicstaticvoidMain(){ if(1==1){stringname ="seven"; } Console.WriteLine(name);} // 報錯
在JavaScript語言中無塊級作用域
functionMain(){ if(1==1){varname ='seven'; } console.log(name);} // 輸出: seven
二、JavaScript採用函式作用域
在JavaScript中每個函式作為一個作用域,在外部無法訪問內部作用域中的變數。
functionMain(){ varinnerValue ='seven'; } Main(); console.log(innerValue); // 報錯:Uncaught ReferenceError: innerValue is not defined
三、JavaScript的作用域鏈
由於JavaScript中的每個函式作為一個作用域,如果出現函式巢狀函式,則就會出現作用域鏈。
xo ='alex'; functionFunc(){ varxo ="seven"; functioninner(){ varxo ='alvin'; console.log(xo); } inner(); }Func();
如上述程式碼則出現三個作用域組成的作用域鏈,如果出現作用域鏈後,那麼尋找變數時候就會出現順序,對於上述例項:
當執行console.log(xo)時,其尋找順序為根據作用域鏈從內到外的優先順序尋找,如果內層沒有就逐步向上找,直到沒找到丟擲異常。
四、JavaScript的作用域鏈執行前已建立
JavaScript的作用域在被執行之前已經建立,日後再去執行時只需要按照作用域鏈去尋找即可。
示例一:
xo ='alex'; functionFunc(){ varxo ="seven"; functioninner(){ console.log(xo); } returninner;} varret = Func(); ret(); // 輸出結果: seven
上述程式碼,在函式被呼叫之前作用域鏈已經存在:
全域性作用域 -> Func函式作用域 -> inner函式作用域
當執行【ret();】時,由於其代指的是inner函式,此函式的作用域鏈在執行之前已經被定義為:全域性作用域 -> Func函式作用域 -> inner函式作用域,所以,在執行【ret();】時,會根據已經存在的作用域鏈去尋找變數。
示例二:
xo ='alex'; functionFunc(){ varxo ="eirc"; functioninner(){ console.log(xo); } xo ='seven';returninner; }varret = Func(); ret(); // 輸出結果: seven
上述程式碼和示例一的目的相同,也是強調在函式被呼叫之前作用域鏈已經存在:
全域性作用域 -> Func函式作用域 -> inner函式作用域
不同的時,在執行【var ret = Func();】時,Func作用域中的xo變數的值已經由 “eric” 被重置為 “seven”,所以之後再執行【ret();】時,就只能找到“seven”。
示例三:
xo ='alex'; functionBar(){ console.log(xo); }functionFunc(){ varxo ="seven"; returnBar;} varret = Func(); ret(); // 輸出結果: alex
上述程式碼,在函式被執行之前已經建立了兩條作用域鏈:
全域性作用域 -> Bar函式作用域
全域性作用域 -> Func函式作用域
當執行【ret();】時,ret代指的Bar函式,而Bar函式的作用域鏈已經存在:全域性作用域 -> Bar函式作用域,所以,執行時會根據已經存在的作用域鏈去尋找。
五、宣告提前
在JavaScript中如果不建立變數,直接去使用,則報錯:
console.log(xxoo); //報錯:Uncaught ReferenceError: xxooisnotdefined
JavaScript中如果建立值而不賦值,則該值為 undefined,如:
varxxoo;console.log(xxoo); // 輸出:undefined
在函式內如果這麼寫:
functionFoo(){ console.log(xo); varxo ='seven';} Foo(); // 輸出:undefined
上述程式碼,不報錯而是輸出 undefined,其原因是:JavaScript的函式在被執行之前,會將其中的變數全部宣告,而不賦值。所以,相當於上述例項中,函式在“預編譯”時,已經執行了var xo;所以上述程式碼中輸出的是undefined。
寫在最後:歡迎留言討論,加關注,持續更新!