JS高级——闭包练习

最新推荐文章于 2022-11-30 09:24:55 发布

weixin_30360497

最新推荐文章于 2022-11-30 09:24:55 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/wuqiuxue/p/8342395.html

版权

从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用for循环给dom注册事件时候，难以获取for循环中对应的i值，可是我们可以利用闭包啊

方法1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<script>
var divs=document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    function foo(j) {
        return function () {
            console.log('这是第'+(j+1)+'个div');
        }
    }
    var f=foo(i);
    divs[i].onclick=f;
}
</script>
</body>
</html>

方法2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 30px;
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<div>我是第6个div</div>
<div>我是第7个div</div>
<div>我是第8个div</div>
<div>我是第9个div</div>
<div>我是第10个div</div>
<script>
    var divs=document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick=function (j) {
            return function () {
                console.log('这是第'+(j+1)+'个div');
            }
        }(i);
    }
</script>
</body>
</html>

在方法2中我们运用了立即执行函数表达式（函数自调用）方法，函数自调用的形式还有如下方法：

<script>
    (function () {
        console.log(0);
    })();
    +function () {
        console.log(1);
    }();
    -function () {
        console.log();
    }();
</script>

转载于:https://www.cnblogs.com/wuqiuxue/p/8342395.html

weixin_30360497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级——闭包练习

从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用for循环给dom注册事件时候，难以获取for循环中对应的i值，可是我们可以利用闭包啊方法1：<!DOCTYPE html><html lang="en"><head> <meta...
复制链接

扫一扫