你們真的了解閉包嗎？

bigdevil_s 發(fā)布于2019-08-23 10:56 / 551人閱讀

摘要：前言我們知道所謂的閉包指的就是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域的變量對(duì)象的函數(shù)，但是你們真的了解的閉包嗎就當(dāng)你們很了解了，畢竟是基礎(chǔ)知識(shí)，我就簡(jiǎn)單說(shuō)說(shuō)概念簡(jiǎn)單幾行代碼，先說(shuō)說(shuō)作用域鏈的流程，運(yùn)行到時(shí)，會(huì)將作用域鏈保存到中執(zhí)行到時(shí)會(huì)創(chuàng)建執(zhí)行環(huán)境，并將

前言

我們知道所謂的閉包指的就是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域的變量對(duì)象的函數(shù)，但是你們真的了解JS的閉包嗎？就當(dāng)你們很了解了，畢竟是基礎(chǔ)知識(shí)，我就簡(jiǎn)單說(shuō)說(shuō)

概念

var a = "july";
function test () {
    var b = "mirok";
    return function() {
        var c = "inner"
        console.log(a);
        console.log(b);
    }
}
test()(); // mirok,july
console.log(c); // error: undefined

簡(jiǎn)單幾行代碼，先說(shuō)說(shuō)作用域鏈的流程，運(yùn)行到test()時(shí)，會(huì)將作用域鏈保存到[[Scope]]中,執(zhí)行到test()時(shí)會(huì)創(chuàng)建執(zhí)行環(huán)境，并將復(fù)制[[Scope]]對(duì)象構(gòu)建執(zhí)行函數(shù)的作用域鏈。我們知道作用域鏈尋找規(guī)則是往前找的，而閉包是能夠?qū)⑼獠亢瘮?shù)的活動(dòng)對(duì)象添加到作用域鏈中的，所以test函數(shù)里的閉包就包含了全局的活動(dòng)對(duì)象和test的活動(dòng)對(duì)象，自然就能輸出a和b

注意

閉包需要注意的點(diǎn)是它只取外部函數(shù)變量最后一個(gè)值，例如以下demo:

 function test (){
    var arr = [];
    for (var i=0; i<3; i++) {
        arr[i] = function() {
            return i;
        }
    }
    return arr;
}
for (var i =0; i < test().length; i++) {
    console.log(test()[i]())
}
// 輸出三個(gè)3

也就是說(shuō)閉包里作用鏈中的外部函數(shù)的活動(dòng)對(duì)象一直都是i，因?yàn)樽饔糜蜴溒鋵?shí)是指向活動(dòng)對(duì)象的指針列表，所以當(dāng)test返回時(shí)i是3，閉包里的也自然是都是3

this指向問(wèn)題

我們知道this指向函數(shù)的執(zhí)行環(huán)境，全局中調(diào)用指向window，對(duì)象調(diào)用指向該對(duì)象，但是在對(duì)象中函數(shù)的閉包的this又指向哪呢？先上代碼

var env = "window";
const obj = {
    env: "Obj",
    showEnv: function() {
        return function() {
            console.log(this.env)// 輸出window
        }
    }
}

輸出window因?yàn)楸旧淼膖his在閉包中就已經(jīng)存在，因此不會(huì)去尋找Obj的this，再不通過(guò)call和apply調(diào)用的情況下，匿名函數(shù)的this指向window的

其實(shí)閉包就是這樣一塊東西

function test() {
    var a = "mirok";
    function show () {
        var b = "july";
        console.log(this);
        return a;
    };
    this.fun = show;
}
const obj = new test();
obj.fun(); // mirok

看看Scopes就知道閉包是什么啦~很容易就能理解的