首頁 > web前端 > js教程 > 主體

對於js作用域的詳解

不言
發布: 2018-07-14 17:52:19
原創
1803 人瀏覽過

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

#如何透過js將偽數組轉為陣列

以上是對於js作用域的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板