本文實例講述了JS學習筆記之閉包小案例。分享給大家供大家參考，具體如下：
直接上代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><style type="text/css"> *{ list-style:none; } ul{ display:flex; flex-wrap:wrap; } li{ width: 20%; text-align: center; } img{ width: 90%; padding:5%; border:1px solid #ccc; border-radius:5px; }</style><body><ul> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>贊(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>贊(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>贊(1)</button></p></li> <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>贊(1)</button></p></li></ul></body><script type="text/javascript">function my$(tagName){ return document.getElementsByTagName(tagName);}var btnObjs=my$("button");function bb(){ var value=2; return function(){ var target=event.target console.log(this) this.innerHTML="贊("+(value++)+")"; }}for(var i=0;i<btnObjs.length;i++){ btnObjs[i].onclick=bb()}</script></html>函數被返回后 其中的value 并未被釋放，所以累加
閉包后，作用域鏈會被延長
閉包的作用，緩存數據,是缺點也是優點
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.Vevb.com/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
