JS學習筆記之閉包小案例分析
本文實例講述了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>
函數(shù)被返回后 其中的value 并未被釋放,所以累加
閉包后,作用域鏈會被延長
閉包的作用,緩存數(shù)據(jù),是缺點也是優(yōu)點
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript實現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當圖片出現(xiàn)在可視區(qū)域再進行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助2023-12-12