JS學(xué)習(xí)筆記之閉包小案例分析
更新時間：2019年05月29日 10:41:07 作者：倪曉磊
這篇文章主要介紹了JS學(xué)習(xí)筆記之閉包,結(jié)合具體案例形式分析了javascript實現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了JS學(xué)習(xí)筆記之閉包小案例。分享給大家供大家參考，具體如下：
直接上代碼
<!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測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)留言功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
下面小編就為大家?guī)硪黄狪E下JS保存圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
JavaScript實現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當圖片出現(xiàn)在可視區(qū)域再進行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助2023-12-12
本文代碼使用 JavaScript。 一些同學(xué)對遞歸的理解還停留在“是一種求階乘比循環(huán)低效的方法”。但其實遞歸和循環(huán)處理的問題是不同。拿“遍歷數(shù)組”這個問題來說：循環(huán)適合同一維度（單層長度不限）上的遍歷，而遞歸則適合跨維度（層數(shù)不限）的遍歷。2013-02-02
這是一篇譯文，實例分析制作自定義的信息提示框的實現(xiàn)代碼2009-01-01
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)源碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案
在處理一些極端情況下的復(fù)雜數(shù)值計算時,我們可能會遇到這樣的情況,就是運算結(jié)果丟失精度,下面這篇文章主要給大家介紹了關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案的相關(guān)資料,需要的朋友可以參考下2024-01-01
用JavaScript隱藏控件的方法有兩種，分別是通過設(shè)置控件的style的“display”和“visibility”屬性。2009-09-09
在Layui中實現(xiàn)開關(guān)按鈕的效果實例
今天小編就為大家分享一篇在Layui中實現(xiàn)開關(guān)按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09