闭包与变量作用域-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_23159841/article/details/107937457

参考地址: https://www.jianshu.com/p/87762b8864a8

参考地址: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

全局变量和局部变量

// 获取所有的li
var lis = document.getElementsByTagName('li');
for(var i=0;i < lis.length;++i){
    lis[i].onclick = function(){
        alert(i);
    }
}

以上代码最终都会输出lis.length-1，而并非输出0，1，2，3，4，5........

为什么会这样呢，因为for循环只是给li绑定事件，但是里面的函数代码并不会执行，

这个执行是在你点击的时候才执行的？但是此时变量i的值已经是5了，所以所有的都打印出5来了。

换句话说需要一份独立环境保存这个变量（闭包可以创建独立的环境，保存变量。）。

闭包(闭包就是能够读取其他函数内部变量的函数。)

闭包是指有权访问另一个函数作用域中的变量的函数。

创建闭包的常见方式，就是在一个函数内部创建另一个函数。

闭包就是能够读取其他函数内部变量的函数,可以把闭包简单理解成 ‘定义在一个函数内部的函数’

// 这里面的f2就是一个闭包函数
function f1(){
    var n=999;
　　function f2(){
　　　　alert(n); // 999
　　}
}

那么怎么利用闭包输出0，1，2，3，4.....

// 获取所有的li
var lis = document.getElementsByTagName('li');
for(var i=0;i < lis.length;++i){
    lis[i].onclick = a(i);
}

function a(i){
    // 闭包a2
    var a2 =  function(i){
        alert(i);
    }
    return a2;
}

这里个人的理解是每一个li的事件方法都是一个独立的事件方法。

也可以使用ES6，新增的let声明变量i。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
	<ul>
		<li>0</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<script type="text/javascript">
		var lis = document.getElementsByTagName('li');
		for (let i = 0; i < lis.length; i++) {
			lis[i].onclick = function () {
			  console.log('第' + (i + 1) + '个')
			}
		}
	</script>
</html>

运行结果：