JavaScript中作用域和閉包是什么

這篇文章給大家分享的是有關JavaScript中作用域和閉包是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

JavaScript作用域和閉包

在javascript中，如果對作用域和閉包弄不清楚，寫代碼就會出很多問題，今天對作用域和閉包做一個總結。

作用域

作用域主要分為全局作用域和局部作用域，其中局部作用域分為函數作用域和塊級作用域。

全局作用域

如果你在大括號（{}）或者函數的外面定義了一個變量，那么它就是一個全局的變量，它的作用域就是全局作用域。

let a = 1function fun1 () {
	console.log(a) // 結果：1
	function fun2 () {
		console.log(a) // 結果：1
	}
	fun2()}fun1()console.log(a) // 結果：1

變量a就是定義在最外層，它就能在全局任意地方被使用。
值得注意的是，在同一級作用域中，使用let或const聲明變量的時候第二個同名會報錯，而使用var聲明變量的時候，會覆蓋前面的變量；

局部作用域

如果你在函數或者大括號（{}）內定義的變量，就是局部作用域的變量，它能夠在該級作用域級任意下級作用域中使用。

function fun1() {
    let a = 100
    console.log(a) // 結果: 100
    function fun2 () {
		console.log(a) // 結果：100
	}
	fun2()}fun1()console.log(a) // 結果: a is not defined

a只能在fun1函數內部包括內部函數中使用，一旦出了fun1的范圍就無法使用該變量了。

自由變量的查找

一個變量在當前作用域沒有定義卻被使用了，就是自由變量。它的執行規則是怎樣的呢？
自由變量的查找是向上級作用域，一層一層以此尋找，直至找到為止。如果全局作用域都沒有找到，則報錯xx is not defined。

let a = 100function fun1 () {
    let a1 = 2

    function fun2 () {
        let a2 = 3
        let a = 0

        function fun3 () {
            let a3 = 4
            a++
            console.log(a + a1 + a2 + a3) // 結果: 10
        }

        fun3()
    }

    fun2()}fun1()console.log(a) // 結果: 100

正如上述代碼所示，在fun3函數內，a和a1、 a2都沒有定義，但被使用了，在執行的時候，它會往上級作用域中查找，從而找到它們的值。值得注意的一點的是，在全局作用域和fun2的函數中我們都定義了a，但是在fun3中使用的fun2中定義的值，外面的使用的全局作用域的值，也就是說，它往上級查找的時候，只要查找到就會停止查找，會就近使用。作用域間也不會互相干擾。（它們里面存在的變量提升和函數提升可以查看我的另一篇博客有專門的總結）

閉包

閉包是作用域應用的特殊情況，主要有兩種表現：（1）函數作為參數被傳遞。（2）函數作為返回值被返回。

/**
 * 函數作為返回值
 */function create () {
    const a1 = 100
    return function () {
        console.log(a1)
    }}const fn = create()const a1 = 200fn() // 結果: 100/**
 * 函數作為參數
 */function print (fn) {
    const a2 = 300
    fn()}const a2 = 400function fn1 () {
    console.log(a2)}print(fn1) // 結果: 400

上面代碼演示了函數的兩種表現，值得注意的是：在閉包中，自由變量的查找，是在函數定義的地方，向上級作用域查找，不是在執行的地方！

閉包的實際應用場景

（1）隱藏數據, 如做一個簡單的cache工具
（2）函數防抖與節流

感謝各位的閱讀！關于“JavaScript中作用域和閉包是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！