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>

效果：

js闭包例子—对不同对象实现点赞累加

要点：

猜你喜欢