閉包原理及題型

閉包

函數被調用之後,會創建一個執行環境及作用域鏈.函數被執行完之後就會被釋放掉.
閉包函數執行之後會保留當前活動變數在內部函數作用域鏈中,所以內部函數可以訪問外部變數.

// 閉包
function test() {
    let b = "b";
    return () => b;
}
let t = test()
console.log(t())  // 訪問內部變數

示例一

列印出的結果是多少?

function test() {
    var n = 4;
    function add() {
        n++;
        console.log(n);
    }
    return { n: n, add: add };
}
var result = test(); // 返加一個對象 
var result2 = test();  // 同上
result.add();  // 調用閉包函數,訪問內部變數. 輸出 5
result.add(); //  輸出 6
console.log(result.n); // 4
result2.add(); // 5

示例二

列印出的結果是什麼?

function test() {
    var arr = [];
    for (var i = 0; i < 10; i++) {
        arr[i] = function() {
            console.log(i); // 輸出 10
        };
    }
    return arr;
}
var myArr = test();
for (var j = 0; j < 10; j++) {
    myArr[j]();
}

var聲明的變數只有函數作用域與全局作用域,這迴圈中創建的i變數,會變數提升在函數頂部,所以函數列印i變數的值是10

示例三

列印出的結果是什麼?

function test() {
    var arr = [];
    for (let i = 0; i < 10; i++) { // let
        arr[i] = function() {
            console.log(i);
        };
    }
    return arr;
}
let myArr = test();
for (let j = 0; j < 10; j++) {
    myArr[j](); // 輸出 0 到 9
}

let 聲明的變數具有塊級作用域,每輪迴圈i變數,其時都是一個新的i變數,所以myArr數組中存儲了不同的數字

示例四

列印結果是多少?

for (var i = 0; i < 10; i++) {
    (j => {
        setTimeout(function() {
            console.log(j);// 0 ~ 9
        }, 1000);
    })(i); // 立即執行函數 傳參
}

這隻是創建並執行了10個函數,每個函數都傳遞了個i變數給參數給j,j存儲了變數值,然後做為列印輸出了,所以結果為0~9

個人博客地址 : https://www.zhuamimi.cn
文章地址 : https://www.zhuamimi.cn/archives/208