js閉包
先展示兩段程式碼塊看看到底有什麼區別
function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } foo(2)(10);
function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2)
這兩段程式碼都是alert(16),區別到底在哪。
程式碼塊①出現了閉包。
準確來說 這塊就是一個閉包。
閉包是基於正常的垃圾回收處理機制下的。也就是說,一般情況一個函式(函式作用域)執行完畢,
裡面宣告的變數會全部釋放,被垃圾回收器回收。但閉包利用一個技巧, 讓作用域裡面的變數,
在函式執行完之後依舊儲存沒有被垃圾回收處理掉。
或者說一下我現在的一個需求
我需要在for迴圈裡面進行事件的繫結,這個應該怎麼操作?
第一反應是這樣(原生js)
<script> window.onload=function(){ var list = ['a','b']; for(var i in list){ document.getElementById(list[i]).onclick=function(){ alert(list[i]); } } } </script> </head> <body> <div id="a">aaa</div> <div id="b">bbb</div> </body>
可以嘗試一下,絕對都是alert(b)
原因就是執行完之後變數i被回收了。
可以換另一中方式
<script> window.onload=function(){ var list = ['a','b']; for(var i in list){ (function(j){ document.getElementById(list[j]).onclick=function(){ alert(list[j]); } })(i) } } </script> </head> <body> <div id="a">aaa</div> <div id="b">bbb</div> </body>
使用閉包來解決。nice!!!
我的low逼見解,前端了解就是。