閉包的使用場景

時間 2019-11-11

標籤閉包使用場景简体版

原文原文鏈接

1、閉包javascript

　　因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，閉包就是可以讀取其餘函數內部變量的函數。因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。html

　　好比下面的代碼：java

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外部讀取它的內部變量了。測試

2、閉包的使用場景字體

1.setTimeoutspa

　　原生的setTimeout傳遞的第一個函數不能帶參數，經過閉包能夠實現傳參效果。code

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

2.回調htm

　　定義行爲，而後把它關聯到某個用戶事件上（點擊或者按鍵）。代碼一般會做爲一個回調（事件觸發時調用的函數）綁定到事件。

　　好比下面這段代碼：

<!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+' '是一個字符串類型的數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。