這篇文章主要介紹了關於對js作用域的詳解,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
1.ES5中的作用域
for(var i =0;i<10;i++){ } console.log(i)
js這段程式碼,你覺得會輸出什麼?答案是10,熟悉java的同學一定有點詔異,為什麼會這樣呢?因為js還是不同與java的,在ES5中,只有全域作用域和函數作用域,並沒有區塊作用域,當然我們可以實現區塊作用域的功能。看下面程式碼:
(function(){ for(var i =0;i<10;i++){ } })() console.log(i)
這種寫法叫做立即呼叫函數表達式(IIFE),不了解自行百度,這其實就創建了一個局部作用域,該作用域聲明的變數只有在該區塊內有效,外部存取不了。這種寫法的好處就是可以做到不污染全域變數。
這裡還想再提一點,就是在ES5中,變數的宣告問題,在ES5中並不是嚴格,你可以直接採用a=10,來宣告一個全域變數。如下:
a=10; console.log(a)
輸出10,這裡你可以不宣告變數就去使用它,其實js幫你做了一件事。它會執行如下程式碼:
var a=undefined; a=10; console.log(a)
你可以試驗一下,在函數中也可以做到不用宣告變數直接使用,個人覺得這種靈活的做法不是很好。不過在ES6中,已經不推薦不宣告變數就去使用的做法了。
那我們接下來來一點進階的東西,就是變數提升。 (ES5中的概念,ES6中新的用法不會出現變數提升),看程式碼:
a=10; (function(){ console.log(a) var a=1; })();
你猜輸出什麼? undefined,你答對了嗎?迷糊不要緊,我們來看什麼是變數提升,很簡單,其實就是將變數的宣告提升到函數的最上面。其實上面的程式碼最後js在解釋的時候會變成這個樣子:
var a=undefined; a=10; (function(){ var a=undefined; console.log(a) a=1; })();
理解了變數提升是什麼意思了吧,其實就是將宣告提到了最前面,所以輸出的是undefined;
2.ES6中的作用域
#由於ES5中存在很多問題,所以在ES6中,用let替換了var的聲明,不過為了兼容ES5你還是可以使用以前的var。不過還是建議使用let。
let為js增加了新的作用域就是區塊作用域。看程式碼:
for(let i=0;i<10;i++){ } console.log(a)
輸出 a is not defined這裡,我們就完全可以使用java等語法來理解變數的宣告了,而且使用let宣告的變量,在宣告是不可以使用的。
a=3
let a =10;
alert(a)
將會輸出a is not defined,為什麼呢?阮一峰的ES6上這樣說,只要塊級作用域內存在let指令,它所宣告的變數就「綁定」(binding)這個區域,不再受外部的影響。 ES6明確規定,如果
區塊中存在let和const命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。當然他解釋為什麼的時候提到了暫時性死區。
.總結(題外話)
因為ES6出現的時間不是很長,所以我們還是會遇到很多ES5的寫法和用法,所以了解JS es5 和es6都很重要,不管是做前端還是後端,都會或多或少接觸js,既然接觸了,我
們就要對它有深入的了解才行,不能僅僅停留在寫function上面,另外前端已經不像以前的了,我還是很看好js的發展的。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
以上是對於js作用域的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!