【资源贴】作用域与闭包

[zptcsoft]

目的

下次课我们将学习Javascript里的作用域与闭包，希望大家可以在下次课前，自主学习相关知识点。

要求

1. 了解JS作用域
2. 函数级作用域
3. 闭包与封装

资源

0. 课程讲义
1. 作用域与闭包
2. 书写高效JS 的第二章
3. JS样式指南中的变量提升
4. MDN闭包
5. 变量提升 #337

练习

1. 示例效果
2. 拓展练习

[zptcsoft]

//立即调用函数表达式  IIFE
//可自动执行的匿名函数
//封装代码
(function(){
	var i=1;
	console.log(i);
})();

[zptcsoft]

<div class="k">
	<input type="button" value="1"/>
	<input type="button" value="2"/>
	<input type="button" value="3" />
	<input type="button" value="4" />
	<input type="button" value="5" />
	<input type="button" value="6" />
</div>

var oBtnList=document.getElementsByTagName("input");
//错误
for (var i = 0; i < oBtnList.length; i++) {
	oBtnList[i].addEventListener("click",function(){
		console.log("你单击了第"+i+"个按钮");
	})
}
//闭包
for (var i = 0; i < oBtnList.length; i++) {
	oBtnList[i].addEventListener("click",(function(index){
		return function(){
			console.log("你单击了第"+index+"个按钮");
		}
	})(i));
}
//闭包2
for (var i = 0; i < oBtnList.length; i++) {
	(function(j){
		oBtnList[j].addEventListener("click",function(){
			console.log("你单击了第"+(j+1)+"个按钮");
		});
	})(i);
}
//不用闭包
for (var i = 0; i < oBtnList.length; i++) {
	//let可以赋予变量块级作用域
        let j=i;
	oBtnList[j].addEventListener("click",function(){
		console.log("你单击了第"+(j+1)+"个按钮");
	});
}