JavaScript塊級作用域宣告函式
函式宣告是JavaScript中最基本的操作。
但在何處宣告函式並不是隨心所欲的,並且在不同的ES版本規定有所不同。
ES3規定函式可以在全域性作用域中宣告,函式作用域中宣告,也可以在塊級作用域中宣告(ES2015之前沒有塊級作用域這個概念,這裡姑且這麼稱呼),再後來ES5規定,函式只能在全域性作用域與函式作用域中宣告,不能在塊級作用域中宣告。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼執行程式碼if(true){ function func(){ console.log("螞蟻部落"); } }
上述程式碼按照ES5規範是錯誤的,但是實際執行並沒有任何問題。
因為如果瀏覽器完全按照ES5規則解析JavaScript程式碼,相信很多線上正在執行的老程式碼會問題。
所以根據現實狀況,支援ES5規範的瀏覽器依然可以在塊級作用域中宣告函式。
版本發展到ES2015之後,出現塊級作用域,也明確規定函式可以在塊級作用域中宣告。
程式碼例項如下:
[JavaScript] 純文字檢視 複製程式碼function func() { console.log("螞蟻部落一"); } (function () { if (false) { function func() { console.log("螞蟻部落二"); } } func(); }());
下面分別在不同的環境對上述程式碼進行分析:
(1).ES3瀏覽器環境中:
列印結果是"螞蟻部落二",儘管if語句的條件是false,但是由於函式宣告提升現象,它會提升到匿名函式作用域的頂端,所以上面的程式碼相當於如下程式碼:
[JavaScript] 純文字檢視 複製程式碼function func() { console.log("螞蟻部落一"); } (function () { function func() { console.log("螞蟻部落二"); } if (false) {} func(); }());
(2).ES5瀏覽器環境中:
ES5規範規定在塊級作用域中定義函式不合法。
但是為了相容之前的老舊程式碼,各個瀏覽器依然支援在塊級作用域中宣告函式。
行為與ES3瀏覽器環境中完全一樣,不再累贅。
(3).ES2015瀏覽器環境中:
ES2015明確規定函式可以在塊級作用域中宣告,並且它的使用範圍也被侷限於所在的作用域。
按照理論,上述程式碼的列印結果是"螞蟻部部落一",但是實際上會報錯。
在谷歌控制檯截圖如下:
也許是出於多方面的考慮,比如相容老舊程式碼,當前支援ES2015的瀏覽器處理方式比較奇怪。
(1).塊級作用域中宣告函式,類似於使用var宣告一個同名變數,它會將變數宣告提升到函式或者全域性作用域的頂部,並賦初值為undefined(如同使用var宣告一個變數)。
(2).在塊級作用域內的函式宣告會被提升到當前塊級作用域的頂部,這一步遵守ES2015規則。
於是前面的程式碼等同於如下程式碼:
[JavaScript] 純文字檢視 複製程式碼function func() { console.log("螞蟻部落一"); } (function () { var func=undefined; if (false) { function func() { console.log("螞蟻部落二"); } } func(); }());
很明顯上述程式碼會報錯,因為呼叫func函式中的func是undefined。
考慮到當前的瀏覽器支援問題,所以要儘可能避免在塊級作用域中宣告函式。
相關文章
- JavaScript 之有趣的函式(函式宣告、呼叫、預解析、作用域)JavaScript函式
- JavaScript 塊級作用域JavaScript
- 塊級作用域替代“匿名立即執行函式表示式(匿名IIFE)”函式
- [JavaScript基礎] 函式,初識作用域JavaScript函式
- 函式(三)作用域之變數作用域、函式巢狀中區域性函式作用域、預設值引數作用域函式變數巢狀
- JavaScript函式宣告和函式表示式區別JavaScript函式
- js中宣告提升、作用域(鏈)、`this`關鍵字和箭頭函式JS函式
- JavaScript 變數與函式宣告前置JavaScript變數函式
- javascript 的函式宣告與表示式對比JavaScript函式
- ES6之塊級作用域
- python函式作用域簡介Python函式
- 瞭解 JavaScript 函數語言程式設計 - 宣告式函式JavaScript函數程式設計函式
- 第 8 節:函式-函式型別與作用域函式型別
- JavaScript 作用域 與 作用域鏈JavaScript
- Python 函式和變數作用域Python函式變數
- Python中以函式為作用域Python函式
- javascript變數物件函式呼叫棧作用域閉包等細解!JavaScript變數物件函式
- javaScript 作用域JavaScript
- JavaScript作用域JavaScript
- JavaScript函式柯里化的作用JavaScript函式
- javascript之作用域與作用域鏈JavaScript
- 《前端實戰總結》之變數提升,函式宣告提升及變數作用域詳解前端變數函式
- javaScript高階級函式JavaScript函式
- 1.5.2 Python函式巢狀及作用域Python函式巢狀
- JS 總結之函式、作用域鏈JS函式
- 06函式宣告函式
- ES6語法(一)塊級作用域、字串字串
- 前端筆記之JavaScript(四)關於函式、作用域、閉包那點事前端筆記JavaScript函式
- 暫時性死區以及函式作用域函式
- 深入理解JavaScript作用域和作用域鏈JavaScript
- EventEmitter:從命令式 JavaScript class 到宣告函式式的華麗轉身MITJavaScript函式
- 重讀《深入理解ES6》 —— 塊級作用域
- JavaScript之作用域鏈JavaScript
- 學習JavaScript作用域JavaScript
- JavaScript深度理解——作用域JavaScript
- javascript 詞法作用域JavaScript
- 淺談JavaScript作用域JavaScript
- 圖解javascript作用域圖解JavaScript