溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Javascript閉包使用場景的原理分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
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外部讀取它的內部變量了。
原生的setTimeout傳遞的第一個函數不能帶參數，通過閉包可以實現傳參效果。
function f1(a) {
function f2() {
console.log(a);
}
return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1定義行為，然后把它關聯到某個用戶事件上（點擊或者按鍵）。代碼通常會作為一個回調（事件觸發時調用的函數）綁定到事件。
比如下面這段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-12">12</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="size-20">20</a>
<a href="#" 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>當點擊數字時，字體也會變成相應的大小。
在事件被觸發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) // 進入該分支說明當前并沒有在計時，那么就開始一個計時
}
}
}如下面代碼：用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+' '是一個字符串類型的數據
感謝各位的閱讀！關于“Javascript閉包使用場景的原理分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
