js閉包例子—對不同物件實現點贊累加

Screw1024發表於2018-11-19
JS物件

要點：

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>

效果：

 

相關文章