欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù),是缺點(diǎn)也是優(yōu)點(diǎn)

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

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

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

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)留言功能

    微信小程序?qū)崿F(xiàn)留言功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • IE下JS保存圖片的簡單實例

    IE下JS保存圖片的簡單實例

    下面小編就為大家?guī)硪黄狪E下JS保存圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • JavaScript實現(xiàn)圖片懶加載的三種方案詳解

    JavaScript實現(xiàn)圖片懶加載的三種方案詳解

    圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助
    2023-12-12
  • 循環(huán) vs 遞歸淺談

    循環(huán) vs 遞歸淺談

    本文代碼使用 JavaScript。 一些同學(xué)對遞歸的理解還停留在“是一種求階乘比循環(huán)低效的方法”。但其實遞歸和循環(huán)處理的問題是不同。拿“遍歷數(shù)組”這個問題來說：循環(huán)適合同一維度（單層長度不限）上的遍歷，而遞歸則適合跨維度（層數(shù)不限）的遍歷。
    2013-02-02
  • Js 訂制自己的AlertBox(信息提示框)

    Js 訂制自己的AlertBox(信息提示框)

    這是一篇譯文，實例分析制作自定義的信息提示框的實現(xiàn)代碼
    2009-01-01
  • 微信小程序select下拉框?qū)崿F(xiàn)源碼

    微信小程序select下拉框?qū)崿F(xiàn)源碼

    這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-11-11
  • 微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動

    微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-05-05
  • 關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案

    關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案

    在處理一些極端情況下的復(fù)雜數(shù)值計算時,我們可能會遇到這樣的情況,就是運(yùn)算結(jié)果丟失精度,下面這篇文章主要給大家介紹了關(guān)于JS精度丟失產(chǎn)生的原因以及解決方案的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • 用JavaScript隱藏控件的方法

    用JavaScript隱藏控件的方法

    用JavaScript隱藏控件的方法有兩種，分別是通過設(shè)置控件的style的“display”和“visibility”屬性。
    2009-09-09
  • 在Layui中實現(xiàn)開關(guān)按鈕的效果實例

    在Layui中實現(xiàn)開關(guān)按鈕的效果實例

    今天小編就為大家分享一篇在Layui中實現(xiàn)開關(guān)按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09

最新評論