JS闭包作用及理解

最新推荐文章于 2023-07-03 21:02:54 发布

luke_up

最新推荐文章于 2023-07-03 21:02:54 发布

阅读量668

点赞数 1

分类专栏：学习心得与总结文章标签：闭包 javascript 作用

本文链接：https://blog.csdn.net/luke_up/article/details/51680153

版权

学习心得与总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<body>
   <ul id="ullist">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
   </ul>
   <button>1</button>
   <button>2</button>
</body>

var el = document.getElementById("ullist");
var liel = el.getElementsByTagName("li");
//错误！！每次都弹出遍历完所有的索引值
for (var i = 0; i < liel.length; i++) {
    liel[i].onclick = function () {
        alert(i);
    };
}
//错误！！每次都弹出遍历完所有的索引值
//点击到每一个li的时候弹出对应的位置索引
for (var i = 0; i < liel.length; i++) {
    liel[i].onclick = function (num) {
        return function () {
            alert(num);
        }
    }(i);//每次都重新传入i
}

//闭包保存变量现场的作用

var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
    var a = 1;
    alert(a++);
};//每次点击完毕后就销毁a变量到下次执行时a被重新声明，弹出1；
btn[1].onclick = function () {
    var b = 2;
    return function () {
        alert(b++);
    }
}();//函数执行完毕后会自动销毁局部变量，但在闭包内的变量依旧保留，所以重复点击后能累加；

以上讲的都是闭包的应用场景。

现在从原理上讲讲闭包：

var foo = function(){
	var bar = function(){
		var local = "jububianliang";
		return function(){
			return local;
		}
	}
	var baz = bar();
	console.log(baz());
}

其实闭包还是和辣鸡回收机制相关，有兴趣的同学可以对此去作了解。

对于上一段栗子，一般而言，在bar()函数执行完毕后，局部变量local会随着作用域的销毁而收回。

关键就在于一个返回值是匿名函数，且该匿名函数有访问局部变量local的权限。因此依然可以通过中间函数稍作中转访问。

也就是实现了闭包：实现外部作用域访问内部作用域中变量的方法。

luke_up

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
JS闭包作用及理解

1 2 3 4 5 6 7 8 9 10 1 2 var el = document.getElementById("ullist"); var liel = el.getElementsByTagName("li");//点击到每一个l
复制链接

扫一扫