首頁 > web前端 > js教程 > 介紹JavaScript作用域與閉包

介紹JavaScript作用域與閉包

coldplay.xixi
發布: 2021-01-29 18:03:39
轉載
2056 人瀏覽過

介紹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

#(影片)
######

以上是介紹JavaScript作用域與閉包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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