js閉包例子—對不同物件實現點贊累加
阿新 • • 發佈:2018-12-09
要點:
1.js中的閉包有兩種,一種是函式模式閉包,此例項就是這個模式,並且一般這種模式會有返回處理函式,需要快取的值,在返回處理函式才能實現快取資料,而延長作用域鏈的作用一半定義的是匿名函式。
2.大部分情況下函式模式閉包有返回值,如有返回值不能直接呼叫,需要接收函式。
3.這裡的點贊物件有四個,他們的記憶體空間不同,所以他們快取的value值是對應的物件的value。
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { list-style-type: none; width: 70%; margin: 100px 300px; } li { float: left; margin-left: 10px; } img { width: 200px; height: 180px; } input { margin-left: 30%; } </style> </head> <body> <ul> <li><img src="images/01.jpg"><br/><input type="button" value="贊(0)"></li> <li><img src="images/02.jpg"><br/><input type="button" value="贊(0)"></li> <li><img src="images/03.jpg"><br/><input type="button" value="贊(0)"></li> <li><img src="images/04.jpg"><br/><input type="button" value="贊(0)"></li> </ul> <script type="text/javascript"> function myGet(tagName){ return document.getElementsByTagName(tagName); } function getValue(){ var value = 1; return function(){ this.value = "贊(" + (value++) + ")"; // 字串拼接,都是通過 變數將字串分為左右兩個部分 } } // 通過閉包緩衝資料,基本上需要閉包緩衝資料,都是通過返回函式的值實現的 var btnObjs = myGet("input"); // 獲取所有的按鈕 for(var i=0; i<btnObjs.length; i++){ btnObjs[i].onclick = getValue(); // getValue()返回值直接是圖片下面的字串 } // 每個按鈕的記憶體空間位置是不同的,所有他們的對應的閉包的value的快取值也是不一樣的 // 每次點選不同的按鈕,獲取不同的value值,才能實現分開點贊 </script> </body> </html>
效果: