JavaScript 閉包的使用場(chǎng)景
一、閉包
由于在Javascript語(yǔ)言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。
比如下面的代碼：
function f1() { var n = 999; function f2() { console.log(n); } return f2;}var result = f1();result();//999
函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時(shí)f1內(nèi)部的所有局部變量，對(duì)f2都是可見(jiàn)的。但是反過(guò)來(lái)就不行，f2內(nèi)部的局部變量，對(duì)f1就是不可見(jiàn)的。
這就是Javascript語(yǔ)言特有的'鏈?zhǔn)阶饔糜?結(jié)構(gòu)（chain scope），子對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變量。所以，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見(jiàn)的，反之則不成立。
既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，就可以在f1外部讀取它的內(nèi)部變量了。
二、閉包的使用場(chǎng)景
1.setTimeout
原生的setTimeout傳遞的第一個(gè)函數(shù)不能帶參數(shù)，通過(guò)閉包可以實(shí)現(xiàn)傳參效果。
function f1(a) { function f2() { console.log(a); } return f2;}var fun = f1(1);setTimeout(fun,1000);//一秒之后打印出1
2.回調(diào)
定義行為，然后把它關(guān)聯(lián)到某個(gè)用戶事件上（點(diǎn)擊或者按鍵）。代碼通常會(huì)作為一個(gè)回調(diào)（事件觸發(fā)時(shí)調(diào)用的函數(shù)）綁定到事件。
比如下面這段代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>測(cè)試</title></head><body> <a href='http://www.baoyu77737.com/bcjs/16505.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='size-12'>12</a> <a href='http://www.baoyu77737.com/bcjs/16505.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' id='size-20'>20</a> <a href='http://www.baoyu77737.com/bcjs/16505.html#' rel='external nofollow' rel='external nofollow' rel='external nofollow' 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>
當(dāng)點(diǎn)擊數(shù)字時(shí)，字體也會(huì)變成相應(yīng)的大小。
3.函數(shù)防抖
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。
實(shí)現(xiàn)的關(guān)鍵就在于setTimeOut這個(gè)函數(shù)，由于還需要一個(gè)變量來(lái)保存計(jì)時(shí)，考慮維護(hù)全局純凈，可以借助閉包來(lái)實(shí)現(xiàn)。
如下代碼所示：
/** fn [function] 需要防抖的函數(shù)* delay [number] 毫秒，防抖期限值*/function debounce(fn,delay){ let timer = null //借助閉包 return function() { if(timer){ clearTimeout(timer) //進(jìn)入該分支語(yǔ)句，說(shuō)明當(dāng)前正在一個(gè)計(jì)時(shí)過(guò)程中，并且又觸發(fā)了相同事件。所以要取消當(dāng)前的計(jì)時(shí)，重新開(kāi)始計(jì)時(shí) timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) // 進(jìn)入該分支說(shuō)明當(dāng)前并沒(méi)有在計(jì)時(shí)，那么就開(kāi)始一個(gè)計(jì)時(shí) } }}
4.封裝私有變量
如下面代碼：用js創(chuàng)建一個(gè)計(jì)數(shù)器
方法1:
function f1() { var sum = 0; var obj = { inc:function () { sum++; return sum; }}; return obj;}let result = f1();console.log(result.inc());//1console.log(result.inc());//2console.log(result.inc());//3
在返回的對(duì)象中，實(shí)現(xiàn)了一個(gè)閉包，該閉包攜帶了局部變量x，并且，從外部代碼根本無(wú)法訪問(wèn)到變量x。
方法2:
function f1() { var sum = 0; function f2() { sum++; return f2; } f2.valueOf = function () { return sum; }; f2.toString = function () { return sum+’’; }; return f2;}//執(zhí)行函數(shù)f1，返回的是函數(shù)f2console.log(+f1());//0console.log(+f1()())//1console.log(+f1()()())//2
所有js數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法，null除外valueOf()方法：返回指定對(duì)象的原始值。toString()方法：返回對(duì)象的字符串表示。在數(shù)值運(yùn)算中，優(yōu)先調(diào)用了valueOf，字符串運(yùn)算中，優(yōu)先調(diào)用toStringsum+’ ’是一個(gè)字符串類型的數(shù)據(jù)
以上就是JavaScript 閉包的使用場(chǎng)景的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 閉包的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Docker究竟是什么 為什么這么流行 它的優(yōu)點(diǎn)和缺陷有哪些？2. docker 查看容器的掛載目錄操作3. 詳解Java執(zhí)行g(shù)roovy腳本的兩種方式4. Springboot自定義banner及驗(yàn)證過(guò)程5. 最新Android & iOS設(shè)計(jì)尺寸規(guī)范6. 用Spring JMS使異步消息變得簡(jiǎn)單7. PHP安全之以CGI 模式安裝時(shí)可能遇到的攻擊及解決辦法8. ajax實(shí)現(xiàn)頁(yè)面的局部加載9. 用JavaScript實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)時(shí)鐘10. idea設(shè)置提示不區(qū)分大小寫的方法
網(wǎng)公網(wǎng)安備