对JS中的闭包（块级作用域）的一些理解（为什么有时候for循环遍历会出现错误）

最新推荐文章于 2022-11-28 11:29:17 发布

天天脱发也不会秃

最新推荐文章于 2022-11-28 11:29:17 发布

阅读量405

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44015821/article/details/105876818

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.什么是闭包？
函数对其周围状态（语法环境）的引用捆绑在一起构成了闭包。也就是说，闭包可以让你从内部函数访问外部函数。在JS中，每个函数被创建时，都会在函数生成时形成闭包。
2.语法作用域：

function init(){
	var name = '每天脱发也不能秃头';  /name是一个被init创建的局部变量
	function displayName(){  //displayName()是内部函数，一个闭包
		alert(name);  //使用了父函数中声明的变量
	}
	displayName();
}
init();

init()创建了一个局部变量name和一个名为displayName()的函数，displayName()是定义在init()里的内部函数，并且仅在init()内部可用。displayName()没有自己的局部变量，但是，因为它可以访问到外部函数的变量，所以displayName()可以使用父函数init()中声明的变量name。
3.闭包实例：

function makeFunc(){
	var name = '每天脱发也不能秃头';
	function displayName(){
		alert(name)
	}
	return displayName();
}
var myFunc = makeFunc();
myFunc();

这段代码的效果和之前的init()函数的实例一样，唯一不同的就是内部函数displayName()在执行前，从外部函数返回了。
闭包是由函数以及声明该函数的语法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在这个例子中myFunc是执行函数makeFunc时创建的displayName函数实例的引用。displayName的实例维持了它语法环境的引用。以此，当myFunc被调用时，变量name仍然可用。
4.深入了解闭包的作用：

<body>
<ul>
	<li>第一个li</li>
	<li>第二个li</li>
	<li>第三个li</li>
	<li>第四个li</li>
	<li>第五个li</li>
</ul>
<script>
	var liList = document.querySelectorAll('li');  //共5个li
	for(var i = 0;i<liList.length;i++){
		liList[i].onclick = function(){
			console,log(i)
		}
	}
</script>
</body>

注意：
(1)var存在变量提升，该情况下的i是全局变量。
(2)此时的函数形成了一个闭包，它的内部并没有定义任何变量，由于函数作用域链的关系，它可以访问到外部的全局变量。
(3)由于var并不是块级作用域，每个赋值都会被覆盖，在运行内部函数时，i的值已经变成了5，不能达到所想要的效果。
5.如何解决JS中没有块级作用域
(1)用匿名函数模仿块级作用域：

（function（）{
	//这是块级作用域
}）（）

上一个例子可以改为：

for(var i = 0;i<liList.length;i++){
	(function(num){
		liList[num].onclick = function(){
			console,log(num)
		}
	})(i)		
}

(2)使用let定义i：

for(let i = 0;i<liList.length;i++){
		liList[i].onclick = function(){
			console,log(i)
		}
	}

对于let来说，它会创建一个块级作用域，相当于

{ // 形成块级作用域
  let i = 0
  {
    let ii = i
    liList[li].onclick = function(){
		console.log(i);
	}
  }
  i++
  {
    let ii = i
  }
  i++
  {
    let ii = i
  }
  ...
}

参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures，文章写的特别好，推荐！

天天脱发也不会秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对JS中的闭包（块级作用域）的一些理解（为什么有时候for循环遍历会出现错误）

1.什么是闭包？函数对其周围状态（语法环境）的引用捆绑在一起构成了闭包。也就是说，闭包可以让你从内部函数访问外部函数。在JS中，每个函数被创建时，都会在函数生成时形成闭包。2.语法作用域：function init(){ var name = '每天脱发也不能秃头'; /name是一个被init创建的局部变量 function displayName(){ //displayName...
复制链接

扫一扫

专栏目录