js閉包淺析

背景知識

在講閉包之前,下面幾個概念需要先搞搞清楚:

  • 執(zhí)行環(huán)境

最外圍的執(zhí)行環(huán)境就是全局執(zhí)行環(huán)境,在瀏覽器中執(zhí)行環(huán)境就是window對象。每個函數(shù)都有自己的執(zhí)行環(huán)境。

  • 變量對象

每個執(zhí)行環(huán)境都有與之關(guān)聯(lián)的變量對象,它保存了環(huán)境中定義的所有變量和函數(shù)。如果執(zhí)行環(huán)境是函數(shù)的話,變量對象中還包含arguments對象。

  • 作用域鏈

當代碼在一個環(huán)境中執(zhí)行的時候,會創(chuàng)建變量對象的一個作用域鏈,作用域的前端就是當前執(zhí)行環(huán)境的變量對象。下一個變量對象來自于外部環(huán)境,作用域中的最后一個變量對象始終是全局執(zhí)行環(huán)境中的變量對象。作用域鏈本質(zhì)是一個指向變量對象的指針列表。

下面這段代碼最終會輸出blue,一開始處在全局執(zhí)行環(huán)境中,這個環(huán)境中的變量對象包含變量colorchangeColor 函數(shù),接著執(zhí)行環(huán)境變成changeColor 的環(huán)境,其變量對象包含變量anotherColor ,函數(shù)swapColorarguments 對象,然后執(zhí)行環(huán)境變成swapColor 的環(huán)境,其變量對象只有arguments對象。在swapColor 函數(shù)中可以訪問anotherColorcolor 是因為它的作用域鏈中包含了changeColor 的變量對象和全局執(zhí)行環(huán)境的變量對象。

var color = 'red';

function changeColor () {
    var anotherColor = 'blue';
    function swapColor () {
        color = anotherColor;
    }
    swapColor();
}

changeColor();

console.log(color); // blue

閉包的基本概念

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)。下面這個匿名函數(shù)就是一個閉包,這個函數(shù)在全局執(zhí)行環(huán)境中被調(diào)用了,但是它仍然可以訪問變量name ,因為函數(shù)的作用域鏈中包含了函數(shù)changeColor 的變量對象。

function changeColor () {
    var name = 'Troye Sivan';
    return function () {
        console.log(name);
    };
}
var fn = changeColor();
fn();

下面來看一段代碼:

function changeColor () {
    var result = [];
    for (var i = 0; i < 5; i++) {
        result[i] = function () {
            console.log(i);
        }
    }  
    return result;
}

這個函數(shù)返回一個函數(shù)數(shù)組,大家都知道每個函數(shù)都會返回5,因為每個函數(shù)都是一個閉包,可以通過作用域鏈訪問到i ,但是上面提到了作用域鏈的本質(zhì)是保存指向變量對象的指針列表,因此他們引用的都是同一個變量i ,當函數(shù)changeColor 返回時i 的值是5,所以最后都輸出了5。

本人前端菜鳥一只,如有不對之處,還請各位看官多多指點~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容