閉包的使用場景


一、閉包

  由於在Javascript語言中,只有函數內部的子函數才能讀取局部變量,閉包就是能夠讀取其他函數內部變量的函數。所以,在本質上,閉包就是將函數內部和函數外部連接起來的一座橋梁。

  比如下面的代碼:

function f1() {
    var n = 999;
    function f2() {
    console.log(n);
    }
    return f2;
}
var result = f1();
result();//999

  函數f2就被包括在函數f1內部,這時f1內部的所有局部變量,對f2都是可見的。但是反過來就不行,f2內部的局部變量,對f1就是不可見的。

  這就是Javascript語言特有的"鏈式作用域"結構(chain scope),子對象會一級一級地向上尋找所有父對象的變量。所以,父對象的所有變量,對子對象都是可見的,反之則不成立。

  既然f2可以讀取f1中的局部變量,那么只要把f2作為返回值,就可以在f1外部讀取它的內部變量了。

二、閉包的使用場景

1.setTimeout

  原生的setTimeout傳遞的第一個函數不能帶參數,通過閉包可以實現傳參效果。

function f1(a) {
    function f2() {
        console.log(a);
    }
    return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

2.回調

  定義行為,然后把它關聯到某個用戶事件上(點擊或者按鍵)。代碼通常會作為一個回調(事件觸發時調用的函數)綁定到事件。

  比如下面這段代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-20">20</a>
    <a href="#" id="size-30">30</a>

    <script type="text/javascript">
        function changeSize(size){
            return function(){
                document.body.style.fontSize = size + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(20);
        var size16 = changeSize(30);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-20').onclick = size14;
        document.getElementById('size-30').onclick = size16;

    </script>
</body>
</html>

  當點擊數字時,字體也會變成相應的大小。

3.函數防抖

   在事件被觸發n秒后再執行回調,如果在這n秒內又被觸發,則重新計時。

   實現的關鍵就在於setTimeOut這個函數,由於還需要一個變量來保存計時,考慮維護全局純凈,可以借助閉包來實現

   如下代碼所示:

/*
* fn [function] 需要防抖的函數
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
    let timer = null
//借助閉包 return function() { if(timer){ clearTimeout(timer) //進入該分支語句,說明當前正在一個計時過程中,並且又觸發了相同事件。所以要取消當前的計時,重新開始計時 timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) // 進入該分支說明當前並沒有在計時,那么就開始一個計時 } } }

 4.封裝私有變量

  如下面代碼:用js創建一個計數器

  方法1:

function f1() {
var sum = 0;
var obj = {
inc:function () {
sum++;
return sum;
}
};
return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3

  在返回的對象中,實現了一個閉包,該閉包攜帶了局部變量x,並且,從外部代碼根本無法訪問到變量x。

  方法2:

function f1() {
    var sum = 0;
    function f2() {
        sum++;
        return f2;
    }
    f2.valueOf = function () {
        return sum;
    };
    f2.toString = function () {
        return sum+'';
    };
    return f2;
}
//執行函數f1,返回的是函數f2
console.log(+f1());//0
console.log(+f1()())//1
console.log(+f1()()())//2
   所有js數據類型都擁有valueOf和toString這兩個方法,null除外
valueOf()方法:返回指定對象的原始值。
toString()方法:返回對象的字符串表示。
在數值運算中,優先調用了valueOf,字符串運算中,優先調用toString
sum+' '是一個字符串類型的數據

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM