首頁 > 文章 > web前端 > 對於js作用域的詳解

對於js作用域的詳解

不言原創: 2018-07-14 17:52:191805瀏覽

這篇文章主要介紹了關於對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作用域的詳解

相關文章