JS閉包用法的範例程式碼分享
- 黄舟原創
- 2017-03-27 14:37:311632瀏覽
這篇文章主要介紹了JS閉包用法,結合具體實例形式分析了javascript閉包的原理、執行步驟與相關操作技巧,需要的朋友可以參考下
本文實例講述了JS閉包用法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 第一，函数作为返回值
function fn(){
var max = 10;
return function bar(x){
if(x > max) {
console.log(x);
}
};
}
var f1 = fn();
f1(15);
</script>
<script type="text/javascript">
// 第二，函数作为参数被传递
var max = 10;
fn = function(x){
if(x > max){
console.log(x);//15
}
};
(function(f){
var max = 100;
f(15);
})(fn);
</script>
<script>
function fn(){
var max = 10;
return function bar(x){
if(if > max){
console.log(x);
}
};
}
var f1 = fn();
max = 100;
f1(15);
</script>
</body>
</html>第一步，程式碼執行前產生全域上下文環境，並在執行時對其中的變數進行賦值。此時全域上下文環境是活動狀態。
全域上下文環境:max是undefined
第二步，執行var f1 = fn();程式碼時，呼叫fn()，產生fn()執行上下文環境，壓棧，並設定為活動狀態。
fn()上下文環境：max是10
第三步，執行完var f1 = fn();，fn()呼叫完成。照理說應該要銷毀fn()的執行上下文環境，但這裡不能這麼做。
注意，重點來了：因為執行fn()時，傳回的是一個函數。函數的特別之處在於可以創建一個獨立的作用域。
而正巧合的是，傳回的這個函數體中，還有一個自由變數max要引用fn作用域下的fn()上下文環境中的max。
因此，這個max不能被銷毀，銷毀了之後bar函數中的max就找不到值了。因此，這裡的fn()上下文環境不能被銷毀，仍存在與執行上下文堆疊中。
執行到max = 100;時，全域上下文環境將變成活動狀態，但是fn()上下文環境仍會在執行上下文堆疊中。
另外，執行完max = 100;，全域情境環境中的max被賦值為100。
全域上下文環境:max是100 fn()上下文環境：max是10
#第四步，執行到f1(15);，執行f1(15 )，即執行bar(15)，建立bar(15)情境環境，並將其設定為活動狀態。
執行bar(15)時，max是自由變量，需要向創建bar函數的作用域中查找，找到了max的值為10。
這裡的重點就在於，建立bar函數是在執行fn()時所建立的。 fn()早就執行結束了，但是fn()執行上下文環境還存在與堆疊中，因此bar(15)時，max可以查找到。如果fn()上下文環境銷毀了，那麼max就找不到了。
使用閉包會增加內容開銷，現在很明顯了吧！
第五步，執行完f1(15);就是情境環境的銷毀過程，這裡就不再贅述了。
閉包和作用域、上下文環境有著密不可分的關係，真的是「想說愛你不容易」！
另外，閉包在jQuery中的應用非常多，無論你是想了解一個經典的框架/類別庫，還是想自己開發一個外掛或類別庫，像是閉包、原型這些基本的理論，是一定要知道的。否則，到時候出了BUG你都不知道為什麼，因為這些BUG可能完全在你的知識範圍之外。
以上是JS閉包用法的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！