函數作用域和立即執行函數 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

函數作用域和立即執行函數

2021-9-17 前端達人

變量作用域

JavaScript是函數級作用域編程語言：變量只在其定義時所在的function內部有意義。

全局變量

如果不將變量定義在任何函數的內部，此時這個變量就是全局變量，它在任何函數內都可以被訪問和更改。

遮蔽效應

如果函數中也定義了和全局同名的變量，則函數內的變量會將全局的變量“遮蔽”。

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

這個程序的運行結果是什么呢？

形參也是局部變量

這個程序的運行結果是什么呢？

局部函數

先來認識函數的嵌套：一個函數內部也可以定義一個函數。和局部變量類似，定義在一個函數內部的函數是局部函數。

作用域鏈

在函數嵌套中，變量會從內到外逐層尋找它的定義。

不加var將定義全局變量

在初次給變量賦值時，如果沒有加var，則將定義全局變量。

什么是閉包

JavaScript中函數會產生閉包（closure）。閉包是函數本身和該函數聲明時所處的環境狀態的組合。

函數能夠“記憶住”其定義時所處的環境，即使函數不在其定義的環境中被調用，也能訪問定義時所處環境的變量。

觀察閉包現象

在JavaScript中，每次創建函數時都會創建閉包。

但是，閉包特性往往需要將函數“換一個地方”執行，才能被觀察出來。

閉包非常實用

閉包很有用，因為它允許我們將數據與操作該數據的函數關聯起來。這與“面向對象編程”有少許相似之處。

閉包的功能：記憶性、模擬私有變量。

閉包用途1 - 記憶性

當閉包產生時，函數所處環境的狀態會始終保持在內存中，不會在外層函數調用后被自動清除。這就是閉包的記憶性。

閉包的記憶性舉例

創建體溫檢測函數checkTemp(n)，可以檢查體溫n是否正常，函數會返回布爾值。

但是，不同的小區有不同的體溫檢測標準，比如A小區體溫合格線是37.1℃，而B小區體溫合格線是37.3℃，應該怎么編程呢？




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                function createCheckTemp(standardTemp) {
            

        

    

    

        

            

            

        

        

            
                function checkTemp(n) {
            

        

    

    

        

            

            

        

        

            
                if (n <= standardTemp) {
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return checkTemp;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 創建一個checkTemp函數，它以37.1度為標準線
            

        

    

    

        

            

            

        

        

            
                var checkTemp_A = createCheckTemp(37.1);
            

        

    

    

        

            

            

        

        

            
                // 再創建一個checkTemp函數，它以37.3度為標準線
            

        

    

    

        

            

            

        

        

            
                var checkTemp_B = createCheckTemp(37.3);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                checkTemp_A(37.2);
            

        

    

    

        

            

            

        

        

            
                checkTemp_B(37.2);
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </html>

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

在Java、C++等語言中，有私有屬性的概念，但是JavaScript中只能用閉包來模擬。

題目：請定義一個變量a，要求是能保證這個a只能被進行指定操作（如加1、乘2），而不能進行其他操作，應該怎么編程呢？




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                <title>Document</title>
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                // 封裝一個函數，這個函數的功能就是私有化變量
            

        

    

    

        

            

            

        

        

            
                function fun() {
            

        

    

    

        

            

            

        

        

            
                // 定義一個局部變量a
            

        

    

    

        

            

            

        

        

            
                var a = 0;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            
                getA: function () {
            

        

    

    

        

            

            

        

        

            
                return a;
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                add: function () {
            

        

    

    

        

            

            

        

        

            
                a++;
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                pow: function () {
            

        

    

    

        

            

            

        

        

            
                a *= 2;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                var obj = fun();
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                // 想讓變量a進行加1操作
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                obj.add();
            

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                obj.pow();
            

        

    

    

        

            

            

        

        

            
                console.log(obj.getA());
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </html>

使用閉包的注意點

不能濫用閉包，否則會造成網頁的性能問題，嚴重時可能導致內存泄露。

所謂內存泄漏是指程序中己動態分配的內存由于某種原因未釋放或無法釋放。

立即執行函數IIFE

IIFE（Immediately Invoked Function Expression，立即調用函數表達式）是一種特殊的JavaScript函數寫法，一旦被定義，就立即被調用。

形成IIFE的方法

函數不能直接加圓括號被調用。

函數必須轉為“函數表達式”才能被調用。

IIFE的作用1 - 為變量賦值

為變量賦值：當給變量賦值需要一些較為復雜的計算時（如if語句），使用IIFE顯得語法更緊湊。

IIFE的作用2-將全局變量變為局部變量

IIFE可以在一些場合（如for循環中）將全局變量變為局部變量，語法顯得緊湊。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

« Web各大地圖開發 Web API介紹及DOM對象（一） »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合