国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【重溫基礎】19.閉包

nanfeiyan / 2473人閱讀

摘要:系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷本章節復習的是中的關于閉包,這個小哥哥呀,看看。這里隨著閉包函數的結束,執行環境銷毀,變量回收。

本文是 重溫基礎 系列文章的第十九篇。
今日感受:將混亂的事情找出之間的聯系,也是種能力。

系列目錄:

【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理)

【重溫基礎】1-14篇

【重溫基礎】15.JS對象介紹

【重溫基礎】16.JSON對象介紹

【重溫基礎】17.WebAPI介紹

【重溫基礎】18.相等性判斷

本章節復習的是JS中的關于閉包,這個小哥哥呀,看看。

前置知識:
聲明函數兩種方法:

函數聲明,存在函數聲明提升,因此可以在函數聲明之前調用(不會報錯)。

fun();  // ok
function fun(){};

函數表達式,不存在函數聲明提升,若定義前調用,會報錯(函數還不存在)。

fun();  // error
var fun = function (){};
1.概念 2.1 詞法作用域

這里先要了解一個概念,詞法作用域:它是靜態的作用域,是書寫變量和塊作用域的作用域**。

function f (){
    var a = "leo";
    function g(){console.log(a)};
    g();
}
f(); // "leo"

由于函數g的作用域中沒有a這個變量,但是它可以訪問父作用域,并使用父作用域下的變量a,最后輸出"leo"

詞法作用域中使用的域,是變量在代碼中聲明的位置所決定的。嵌套的函數可以訪問在其外部聲明的變量。

2.2 閉包

接下來介紹下閉包概念,閉包是指有權訪問另一個函數作用域中的變量的函數。

閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量。

創建閉包的常見方式:在一個函數內創建另一個函數。如:

function f (){
    var a = "leo";
    var g = function (){
        console.log(a);
    };
    return g;// 這里g就是一個閉包函數,可以訪問到g作用域的變量a
}
var fun = f();
fun(); // "leo"

通過概念可以看出,閉包有以下三個特征:

函數嵌套函數

函數內部可以引用函數外部的參數和變量

參數和變量不會被垃圾回收機制回收

注:關于內存回收機制,可以查看阮一峰老師的《JavaScript 內存泄漏教程》。

另外,使用閉包有以下好處:

將一個變量長期保存在內存中

避免全局變量的污染

function f (){
    var a = 1; 
    return function(){
        a++;
        console.log(a);
    }
}
var fun = f();
fun(); // 2
fun(); // 3

因為垃圾回收機制沒有回收,所以每次調用fun()都會返回新的值。

私有化成員,使得外部不能訪問

function f (){
    var a = 1;
    function f1 (){
        a++;
        console.log(a);
    };
    function f2 (){
        a++;
        console.log(a);
    };
    return {g1:f1, g2:f2};
};
var fun = f();
fun.g1(); // 2
fun.g2(); // 3
2.易錯點 2.1 引用的變量發生變化
function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(){
            console.log(i);
        }
    }
    return a;
}
var fun = f();
fun[0]();  // 10
fun[1]();  // 10
// ...
fun[10]();  // 10

原本照我們的想法,fun方法中每個元素上的方法執行的結果應該是1,2,3,...,10,而實際上,每個返回都是10,因為每個閉包函數引用的變量if執行環境下的變量i,循環結束后,i已經變成10,所以都會返回10。
解決辦法可以這樣:

function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(index){
            return function(){
                console.log(index);
                // 此時的index,是父函數作用域的index,
                // 數組的10個函數對象,每個對象的執行環境下的index都不同
            }
        }(i);
    };
    return a;
};
var fun = f();
fun[0]();  // 0
fun[1]();  // 1
// ...
fun[10]();  // 10
2.2 this指向問題
var obj = {
    name : "leo", 
    f : function(){
        return function(){
            console.log(this.name);
        }
    }
}
obj.f()();  // undefined

由于里面的閉包函數是在window作用域下執行,因此this指向window

2.3 內存泄漏

當我們在閉包內引用父作用域的變量,會使得變量無法被回收。

function f (){
    var a = document.getElementById("leo");
    a.onclick = function(){console.log(a.id)};
}

這樣做的話,變量a會一直存在無法釋放,類似的變量越來越多的話,很容易引起內存泄漏。我們可以這么解決:

function f (){
    var a = document.getElementById("leo");
    var id = a.id;
    a.onclick = function(){};
    a = null;  //主動釋放變量a
}

通過把變量賦值成null來主動釋放掉。

3.案例 3.1 經典案例——定時器和閉包

代碼如下:

for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

不出所料,返回的不是我們想要的0,1,2,3,...,9,而是10個10。
這是因為js是單進程,所以在執行for循環的時候定時器setTimeout被安排到任務隊列中排隊等候執行,而在等待過程中,for循環已經在執行,等到setTimeout要執行的時候,for循環已經執行完成,i的值就是10,所以就打印了10個10。
解決方法 :

1.使用ES6新增的let。

for循環中的var替換成let

2.使用閉包

for(var i = 0; i<10 ; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i*100);
    })(i);
}
3.2 使用閉包解決遞歸調用問題
function f(num){
    return num >1 ? num*f(num-1) : 1;
}

var fun = f;
f = null;
fun(4)   // 報錯 ,因為最好是return num* arguments.callee(num-1),arguments.callee指向當前執行函數,但是在嚴格模式下不能使用該屬性也會報錯,所以借助閉包來實現

這里可以使用return num >1 ? num* arguments.callee(num-1) : 1;,因為arguments.callee指向當前執行函數,但是在嚴格模式下不能使用,也會報錯,所以這里需要使用閉包來實現。

function fun = (function f(num){
    return num >1 ? num*f(num-1) : 1;
})

這樣做,實際上起作用的是閉包函數f,而不是外面的fun。

3.3 使用閉包模仿塊級作用域

ES6之前,使用var聲明變量會有變量提升問題:

for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i);  // 變量提升 返回10

為了避免這個問題,我們這樣使用閉包(匿名自執行函數):

(function(){
    for(var i = 0 ; i<10; i++){console.log(i)};
})()
console.log(i);  // undefined

我們創建了一個匿名的函數,并立即執行它,由于外部無法引用它內部的變量,因此在函數執行完后會立刻釋放資源,關鍵是不污染全局對象。這里i隨著閉包函數的結束,執行環境銷毀,變量回收。
但是現在,我們用的更多的是ES6規范的letconst來聲明。

參考文章

MDN 閉包

《JavaScript高級程序設計》

本部分內容到這結束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787...
JS小冊 js.pingan8787.com

歡迎關注微信公眾號【前端自習課】每天早晨,與您一起學習一篇優秀的前端技術博文 .

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

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

相關文章

  • 重溫基礎】22.內存管理

    摘要:內存泄露內存泄露概念在計算機科學中,內存泄漏指由于疏忽或錯誤造成程序未能釋放已經不再使用的內存。判斷內存泄漏,以字段為準。 本文是 重溫基礎 系列文章的第二十二篇。 今日感受:優化學習方法。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1-14篇 【重溫基礎】15.JS對象介紹 【重溫基礎】16.JSON對象介紹 【重溫基礎】1...

    Pandaaa 評論0 收藏0
  • 重溫基礎】4.函數

    摘要:本文是重溫基礎系列文章的第四篇。系列目錄復習資料資料整理個人整理重溫基礎語法和數據類型重溫基礎流程控制和錯誤處理重溫基礎循環和迭代本章節復習的是中的基礎組件之一,函數,用來復用特定執行邏輯。箭頭函數不能使用命令,即不能用作函數。 本文是 重溫基礎 系列文章的第四篇。今日感受:常懷感恩之心,對人對己。 系列目錄: 【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基...

    maxmin 評論0 收藏0
  • 重溫基礎】21.高階函數

    摘要:歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節復習的是中的高階函數,可以提高我們的開發效率。 本文是 重溫基礎 系列文章的第二十一篇。 今日感受:想家。 本人自己整理的【Cute-JavaScript】資料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基礎...

    wua_wua2012 評論0 收藏0
  • 重溫基礎】20.事件

    摘要:本文是重溫基礎系列文章的第二十篇。事件捕獲為截獲事件提供機會,然后實際的目標接收到事件,最后事件冒泡,對事件作出響應。事件處理事件處理,即響應某個事件。包括導致事件的元素事件類型等其他信息。 本文是 重溫基礎 系列文章的第二十篇。 這是第三個基礎系列的第一篇,歡迎持續關注呀! 重溫基礎 系列的【初級】和【中級】的文章,已經統一整理到我的【Cute-JavaScript】的Java...

    Blackjun 評論0 收藏0
  • Javascript重溫OOP之作用域與閉包

    摘要:的變量作用域是基于其特有的作用域鏈的。需要注意的是,用創建的函數,其作用域指向全局作用域。所以,有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。 作用域 定義 在編程語言中,作用域控制著變量與參數的可見性及生命周期,它能減少名稱沖突,而且提供了自動內存管理 --javascript 語言精粹 我理解的是,一個變量、函數或者成員可以在代碼中訪問到的范圍。 js的變量作...

    JessYanCoding 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<