使用闭包的注意点

Posted 2020-10-07 喵嘻嘻

1.对捕获的变量只是个引用，不是复制；

function f() {
        var num = 1;

        function g() {
            //函数f()被执行之后，运行到此行，g.Scope =>f.LE;
            alert(num);
        }

        num++;
        g();//当函数g()第一次被执行时，f.LE里num=2；
    }
    f();//弹出2；说明弹出的num是对f.LE里num的引用，而不是复制

2.父函数每调用一次，都会创建一个新的词法环境，会产生不同的闭包；

    function f() {
       var num = 1;
       return function () {
           num++;
           alert(num);
       }
    }
    var result1= f();//f()第一次被调用，创建了一个新的词法环境 result1.Scope => f.LE

    result1();//2
    result1();//3

    var result2 = f();//f()第二次被调用，又创建了一个新的词法环境 result2.Scope => f.LE

    result2();//2
    result2();//3

3.循环中问题

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

for(var i = 0;i<=3;i++){
    //因为JS中没有块级作用域的概念，所以代码扫描到for循环这里时，
    //i是一个全局变量，并且，i=4；for循环只是给ele循环绑定了点击事件；
    //也就是说，onclick事件没有执行的时候，i的值已经是4了
    var ele = document.getElementById("i");
    ele.onclick = function () {
        alert(i);//所以当点击时，都弹出4
    }
}

应用闭包

var i;
    for(i =1;i<=3;i++){
        var ele = document.getElementById(i);
        ele.onclick = (function (id) {
            return function () {//return一个函数给onclick事件
                alert(id);//捕获父函数的id的值
            }
        })(i);//循环第一次的时候，i=1，立即调用，产生一个闭包，将i作为参数传入，依次
    }