本文實(shí)例講述了JS閉包用法。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript">// 第一，函數(shù)作為返回值 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">// 第二，函數(shù)作為參數(shù)被傳遞 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>第一步，代碼執(zhí)行前生成全局上下文環(huán)境，并在執(zhí)行時(shí)對其中的變量進(jìn)行賦值。此時(shí)全局上下文環(huán)境是活動狀態(tài)。
全局上下文環(huán)境:max是undefined
第二步，執(zhí)行var f1 = fn();代碼時(shí)，調(diào)用fn()，產(chǎn)生fn()執(zhí)行上下文環(huán)境，壓棧，并設(shè)置為活動狀態(tài)。
fn()上下文環(huán)境：max是10
第三步，執(zhí)行完var f1 = fn();，fn()調(diào)用完成。按理說應(yīng)該銷毀掉fn()的執(zhí)行上下文環(huán)境，但是這里不能這么做。
注意，重點(diǎn)來了：因?yàn)閳?zhí)行fn()時(shí)，返回的是一個函數(shù)。函數(shù)的特別之處在于可以創(chuàng)建一個獨(dú)立的作用域。
而正巧合的是，返回的這個函數(shù)體中，還有一個自由變量max要引用fn作用域下的fn()上下文環(huán)境中的max。
因此，這個max不能被銷毀，銷毀了之后bar函數(shù)中的max就找不到值了。因此，這里的fn()上下文環(huán)境不能被銷毀，還依然存在與執(zhí)行上下文棧中。
執(zhí)行到max = 100;時(shí)，全局上下文環(huán)境將變?yōu)榛顒訝顟B(tài)，但是fn()上下文環(huán)境依然會在執(zhí)行上下文棧中。
另外，執(zhí)行完max = 100;，全局上下文環(huán)境中的max被賦值為100。
全局上下文環(huán)境:max是100 fn()上下文環(huán)境：max是10
第四步，執(zhí)行到f1(15);，執(zhí)行f1(15)，即執(zhí)行bar(15)，創(chuàng)建bar(15)上下文環(huán)境，并將其設(shè)置為活動狀態(tài)。
執(zhí)行bar(15)時(shí)，max是自由變量，需要向創(chuàng)建bar函數(shù)的作用域中查找，找到了max的值為10。
這里的重點(diǎn)就在于，創(chuàng)建bar函數(shù)是在執(zhí)行fn()時(shí)創(chuàng)建的。fn()早就執(zhí)行結(jié)束了，但是fn()執(zhí)行上下文環(huán)境還存在與棧中，因此bar(15)時(shí)，max可以查找到。如果fn()上下文環(huán)境銷毀了，那么max就找不到了。
使用閉包會增加內(nèi)容開銷，現(xiàn)在很明顯了吧！
第五步，執(zhí)行完f1(15);就是上下文環(huán)境的銷毀過程，這里就不再贅述了。
新聞熱點(diǎn)
疑難解答
圖片精選
