【资源贴】作用域与闭包

[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)+"个按钮");
    });
}