0

我写了这段代码：

<html>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <script>
        var btn = document.getElementsByTagName("button");
        for(var i = 0; i<5; i++){
          btn[i].onclick = function(){alert(i)}
        }
      
    </script>
</html>

并且对于每次点击，我都会得到与最后一个i值相同的结果

然后我尝试用clousre包装它，它工作正常：

<html>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <script>
        var btn = document.getElementsByTagName("button");
        for(var i = 0; i<5; i++){
          btn[i].onclick = createAlert(i)
        }
        
        function createAlert(i){
            return function(){
                alert(i)
            }
        }

    </script>
</html>

有人可以向我解释幕后发生了什么以及为什么它工作正常吗？

4

0 回答 0