JS學習筆記之閉包小案例分析

更新時間：2019年05月29日 10:41:07 作者：倪曉磊

這篇文章主要介紹了JS學習筆記之閉包,結(jié)合具體案例形式分析了javascript實現(xiàn)與使用閉包的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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測試上述代碼運行效果。

更多關(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ù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: