通過分析這段代碼的進化歷程，或許能夠加深您對JavaScript的作用域的理解

goji 發布于2019-08-19 18:13 / 2983人閱讀

摘要：前言這里我們不討論作用域鏈的問題，這些問題您可以看下我之前寫的東西，通過這一段代碼，讓我們重新認識。這回我們主要來分享一下，中作用域的創建方式。立即執行函數是個不錯的選擇，但具名的立即執行函數可以讓代碼本身更具有可讀性，是個最佳實踐。

前言

這里我們不討論作用域鏈的問題，這些問題您可以看下我之前寫的東西，通過這一段代碼，讓我們重新認識JavaScript。
這回我們主要來分享一下，JavaScript中作用域的創建方式。

代碼

通過理解代碼來記住知識點是最快的，面試官問道類似的問題的時候，舉個代碼的例子就大家都懂了，勝過任何含糊的概念描述，所以我們來看一下這個代碼的例子吧。

rank-01

請思考輸出結果，for循環的{}能創建一個作用域嗎？

for (var i = 0; i < 2; i++) {
    console.log("in for:"+i);
}
console.log("out for:"+i);

rank-02

請思考代碼運行結果，function應該能創建作用域吧？

function forscope(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
};
forscope();
console.log("out for:"+i);

rank-03

為什么這樣寫會更好呢？

(function(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
})();
console.log("out for:"+i);

rank-04-a

老外說，這樣子寫才是最佳實踐，您看出來門道了嗎？

(function forscope(){
    for (var i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
})();
console.log("out for:"+i);

rank-04-b

這樣寫太鬼了吧？

try{
    undefined();
}catch(i){
    for (i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
}
console.log("out for:"+i);

rank-es6-01

現在能體會到es6中let存在的意義了吧？

for (let i = 0; i < 2; i++) {
    console.log("in for:"+i);
}
console.log("out for:"+i);

rank-es6-02

據說這才是最佳實踐！

{
    let i;
    for (i = 0; i < 2; i++) {
        console.log("in for:"+i);
    }
}
console.log("out for:"+i);

總結

function，try catch均可以創建作用域，可以使用它們來更好地保護代碼細節，一般還是用function，try catch一般是代碼轉換器會用的。

立即執行函數(function(){...})();是個不錯的選擇，但具名的立即執行函數可以讓代碼本身更具有可讀性，是個最佳實踐(function forscope(){...})();。

es6中let可以隱式地和最近的{}一起創建一個作用域，但顯示地創建能夠方便之后代碼塊的移動，是個最佳實踐。

其他

參考書

《你不知道的JavaScript（上卷）》第一部分，亞馬遜電子書9.9元，強力推薦

網站

在線es6編輯器，https://babeljs.io/repl/

GPU云服務器云服務器 javascript的作用或許文檔的數據 jsp獲取作用域的值數據分析的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79341.html

理解JavaScript的核心知識點：作用域

摘要：也毫不例外，但在中作用域的特性與其他高級語言稍有不同，這是很多學習者久久難以理清的一個核心知識點。主要使用的是函數作用域。關于作用域：About Scope 作用域是程序設計里的基礎特性，是作用域使得程序運行時可以使用變量存儲值、記錄和改變程序的狀態。JavaScript 也毫不例外，但在 JavaScript 中作用域的特性與其他高級語言稍有不同，這是很多學習者久久難以理清的一個核...

HelKyle 2019-08-26 13:31 評論0 收藏0
javascript作用域和閉包之我見

摘要：查詢是在作用域鏈中，一級級的往上查找該變量的引用。作用域和作用域鏈作用域的概念，應該兩張圖幾句話就能解釋吧。這個建筑代表程序中的嵌套作用域鏈。一層嵌一層的作用域形成了作用域鏈，變量在作用域鏈中的函數內得到了自己的定義。 javascript作用域和閉包之我見看了《你不知道的JavaScript(上卷)》的第一部分——作用域和閉包，感受頗深，遂寫一篇讀書筆記加深印象。路過的大牛歡迎指點...

SoapEye 2019-08-20 14:51 評論0 收藏0
javascript 閉包 ---- js進化之路

摘要：閉包利用的，其實就是作用域嵌套情況下，內部作用域可以訪問外部作用域這一特性。之所以要將閉包和垃圾回收策略聯系在一起，是因為這涉及到閉包的一些重要特性，如變量暫時存儲和內存泄漏。因為匿名函數回調的閉包實際引用的是變量，而非變量的值。本文旨在總結在js學習過程中，對閉包的思考，理解，以及一些反思，如有不足，還請大家指教閉包---closure 閉包是js中比較特殊的一個概念，其特殊之處...

HtmlCssJs 2019-08-21 18:46 評論0 收藏0
你應該要知道的作用域和閉包

摘要：寫在前面對于一個前端開發者，應該沒有不知道作用域的。欺騙詞法作用域有兩個機制可以欺騙詞法作用域和。關于你不知道的的第一部分作用域和閉包已經結束了，但是，更新不會就此止住未完待續這是《你不知道的JavaScript》的第一部分。本系列持續更新中，Github 地址請查閱這里。寫在前面對于一個前端開發者，應該沒有不知道作用域的。它是一個既簡單有復雜的概念，簡單到每行代碼都有它的影子...

JouyPub 2019-08-22 17:02 評論0 收藏0
閉包有話說

摘要：請用一句話描述什么是閉包，并寫出代碼進行說明。閉包的使用場景使用閉包可以在中模擬塊級作用域閉包可以用于在對象中創建私有變量。引言剛學習前端的時候，看到閉包這個詞，總是一臉懵逼，面試的時候，問到這個問題，也是回答的含含糊糊，總感覺有層隔膜，覺得這個概念很神奇，如果能掌握，必將功力大漲。其實，閉包沒有這么神秘，它無處不在。一個簡短的的問題首先，來看一個問題。請用一句話描述什么是閉...

techstay 2019-08-20 14:08 評論0 收藏0