函數(shù)作用域和立即執(zhí)行函數(shù)

2021-9-17    前端達(dá)人

變量作用域

  • JavaScript是函數(shù)級(jí)作用域編程語(yǔ)言：變量只在其定義時(shí)所在的function內(nèi)部有意義。

全局變量

  • 如果不將變量定義在任何函數(shù)的內(nèi)部，此時(shí)這個(gè)變量就是全局變量，它在任何函數(shù)內(nèi)都可以被訪問(wèn)和更改。

遮蔽效應(yīng)

  • 如果函數(shù)中也定義了和全局同名的變量，則函數(shù)內(nèi)的變量會(huì)將全局的變量“遮蔽”。

注意考慮變量聲明提升的情況

  • 這個(gè)程序的運(yùn)行結(jié)果是什么呢？

形參也是局部變量

  • 這個(gè)程序的運(yùn)行結(jié)果是什么呢？

局部函數(shù)

  • 先來(lái)認(rèn)識(shí)函數(shù)的嵌套：一個(gè)函數(shù)內(nèi)部也可以定義一個(gè)函數(shù)。和局部變量類似，定義在一個(gè)函數(shù)內(nèi)部的函數(shù)是局部函數(shù)。

作用域鏈

  • 在函數(shù)嵌套中，變量會(huì)從內(nèi)到外逐層尋找它的定義。

不加var將定義全局變量

  • 在初次給變量賦值時(shí)，如果沒(méi)有加var，則將定義全局變量。

什么是閉包

  • JavaScript中函數(shù)會(huì)產(chǎn)生閉包（closure）。閉包是函數(shù)本身和該函數(shù)聲明時(shí)所處的環(huán)境狀態(tài)的組合。

  •  函數(shù)能夠“記憶住”其定義時(shí)所處的環(huán)境，即使函數(shù)不在其定義的環(huán)境中被調(diào)用，也能訪問(wèn)定義時(shí)所處環(huán)境的變量。

觀察閉包現(xiàn)象

  • 在JavaScript中，每次創(chuàng)建函數(shù)時(shí)都會(huì)創(chuàng)建閉包。
  • 但是，閉包特性往往需要將函數(shù)“換一個(gè)地方”執(zhí)行，才能被觀察出來(lái)。

閉包非常實(shí)用

  • 閉包很有用，因?yàn)樗试S我們將數(shù)據(jù)與操作該數(shù)據(jù)的函數(shù)關(guān)聯(lián)起來(lái)。這與“面向?qū)ο缶幊獭庇猩僭S相似之處。
  • 閉包的功能：記憶性、模擬私有變量。

閉包用途1 - 記憶性 

  • 當(dāng)閉包產(chǎn)生時(shí)，函數(shù)所處環(huán)境的狀態(tài)會(huì)始終保持在內(nèi)存中，不會(huì)在外層函數(shù)調(diào)用后被自動(dòng)清除。這就是閉包的記憶性。

閉包的記憶性舉例

  • 創(chuàng)建體溫檢測(cè)函數(shù)checkTemp(n)，可以檢查體溫n是否正常，函數(shù)會(huì)返回布爾值。
  • 但是，不同的小區(qū)有不同的體溫檢測(cè)標(biāo)準(zhǔn)，比如A小區(qū)體溫合格線是37.1℃，而B小區(qū)體溫合格線是37.3℃，應(yīng)該怎么編程呢？ 


    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!DOCTYPE html>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <html lang="en">
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <head>
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <meta charset="UTF-8">
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <title>Document</title>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                </head>
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                <body>
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script>
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                function createCheckTemp(standardTemp) {
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                function checkTemp(n) {
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                if (n <= standardTemp) {
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log('你的體溫正常');
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                } else {
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log('你的體溫偏高');
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                return checkTemp;
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 創(chuàng)建一個(gè)checkTemp函數(shù)，它以37.1度為標(biāo)準(zhǔn)線
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                var checkTemp_A = createCheckTemp(37.1);
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 再創(chuàng)建一個(gè)checkTemp函數(shù)，它以37.3度為標(biāo)準(zhǔn)線
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                var checkTemp_B = createCheckTemp(37.3);
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                checkTemp_A(37.2);
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    
                checkTemp_B(37.2);
            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                </body>
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                </html>
            
    

        
    

    
    34.

閉包用途2 - 模擬私有變量

  • 在Java、C++等語(yǔ)言中，有私有屬性的概念，但是JavaScript中只能用閉包來(lái)模擬。

  • 題目：請(qǐng)定義一個(gè)變量a，要求是能保證這個(gè)a只能被進(jìn)行指定操作（如加1、乘2），而不能進(jìn)行其他操作，應(yīng)該怎么編程呢？ 


    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!DOCTYPE html>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <html lang="en">
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <head>
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <meta charset="UTF-8">
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <title>Document</title>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                </head>
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                <body>
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script>
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 封裝一個(gè)函數(shù)，這個(gè)函數(shù)的功能就是私有化變量
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                function fun() {
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 定義一個(gè)局部變量a
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                var a = 0;
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                getA: function () {
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                return a;
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                add: function () {
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                a++;
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                pow: function () {
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                a *= 2;
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                };
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                var obj = fun();
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 如果想在fun函數(shù)外面使用變量a，唯一的方法就是調(diào)用getA()方法
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log(obj.getA());
            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 想讓變量a進(jìn)行加1操作
            
    

        
    

    
    34. 

    
  34. 

        
    

            
    

            
    

        
    

        
    

            
    
                obj.add();
            
    

        
    

    
    35. 

    
  35. 

        
    

            
    

            
    

        
    

        
    

            
    
                obj.add();
            
    

        
    

    
    36. 

    
  36. 

        
    

            
    

            
    

        
    

        
    

            
    
                obj.add();
            
    

        
    

    
    37. 

    
  37. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log(obj.getA());
            
    

        
    

    
    38. 

    
  38. 

        
    

            
    

            
    

        
    

        
    

            
    
                obj.pow();
            
    

        
    

    
    39. 

    
  39. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log(obj.getA());
            
    

        
    

    
    40. 

    
  40. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    41. 

    
  41. 

        
    

            
    

            
    

        
    

        
    

            
    
                </body>
            
    

        
    

    
    42. 

    
  42. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    43. 

    
  43. 

        
    

            
    

            
    

        
    

        
    

            
    
                </html>
            
    

        
    

    
    44.

使用閉包的注意點(diǎn)

  • 不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題，嚴(yán)重時(shí)可能導(dǎo)致內(nèi)存泄露。
  • 所謂內(nèi)存泄漏是指程序中己動(dòng)態(tài)分配的內(nèi)存由于某種原因未釋放或無(wú)法釋放。

立即執(zhí)行函數(shù)IIFE

  • IIFE（Immediately Invoked Function Expression，立即調(diào)用函數(shù)表達(dá)式）是一種特殊的JavaScript函數(shù)寫法，一旦被定義，就立即被調(diào)用。

形成IIFE的方法

  • 函數(shù)不能直接加圓括號(hào)被調(diào)用。

  • 函數(shù)必須轉(zhuǎn)為“函數(shù)表達(dá)式”才能被調(diào)用。

IIFE的作用1 - 為變量賦值

  • 為變量賦值：當(dāng)給變量賦值需要一些較為復(fù)雜的計(jì)算時(shí)（如if語(yǔ)句），使用IIFE顯得語(yǔ)法更緊湊。

IIFE的作用2-將全局變量變?yōu)榫植孔兞?

  • IIFE可以在一些場(chǎng)合（如for循環(huán)中）將全局變量變?yōu)榫植孔兞浚Z(yǔ)法顯得緊湊。








藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔