JS學(xué)習(xí)筆記之閉包小案例分析
更新時(shí)間：2019年05月29日 10:41:07 作者：倪曉磊
這篇文章主要介紹了JS學(xué)習(xí)筆記之閉包,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了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 并未被釋放，所以累加
閉包后，作用域鏈會(huì)被延長(zhǎng)
閉包的作用，緩存數(shù)據(jù),是缺點(diǎn)也是優(yōu)點(diǎn)
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 從0到1學(xué)習(xí)JavaScript編寫(xiě)貪吃蛇游戲
- JavaScript閉包原理與用法學(xué)習(xí)筆記
- JavaScript簡(jiǎn)單編程實(shí)例學(xué)習(xí)
- JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
- 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this
- 新手入門(mén)帶你學(xué)習(xí)JavaScript引擎運(yùn)行原理
- JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法小結(jié)
- 深入學(xué)習(xí)JavaScript中的bom
- 淺談如何循序漸進(jìn)的學(xué)好JS
相關(guān)文章
詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解用Webpack與Babel配置ES6開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框垂直居中效果的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js獲取某月的最后一天日期的簡(jiǎn)單實(shí)例，需要的朋友可以參考一下2013-06-06
javascript的indexOf忽略大小寫(xiě)的方法
javascript 中 indexOf 是嚴(yán)格區(qū)分大小寫(xiě)的 如何才能忽略大小寫(xiě)呢?2008-08-08
sort是數(shù)組的一個(gè)排序方法。學(xué)習(xí)js的朋友可以參考下。2011-07-07
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)li標(biāo)簽項(xiàng)對(duì)應(yīng)改變背景色的功能,涉及javascript鼠標(biāo)事件及頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
PS:這里列出的是常用的例子，而非研究之用，對(duì)一每個(gè)盒子，都沒(méi)有設(shè)置margin,padding,boeder等屬性！2008-04-04
這篇文章主要介紹了js正則表達(dá)式驗(yàn)證郵件地址，利用javaScript語(yǔ)言實(shí)現(xiàn)一下電子郵件地址驗(yàn)證程序，使用的是JavaScript語(yǔ)言的正則表達(dá)式庫(kù)，感興趣的小伙伴們可以參考一下2015-11-11
javascript用rem來(lái)做響應(yīng)式開(kāi)發(fā)
這篇文章主要介紹了javascript用rem來(lái)做響應(yīng)式開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
分享JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁(yè)關(guān)閉與取消關(guān)閉的事件，有需要的朋友可以參考一下2013-12-12