• 闭包和js事件执行机制简介


    最近碰到了关于闭包的问题,查看资料总结下我眼中的闭包

    var price=document.getElementsByTagName('div');
    for (var i = 0; i < 6; i++) {
        price[i].onClick=function () {
            console.log(i)
        }
    }  // 6 6 6 6 6 6
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    先了解下js的执行机制,这里涉及了JS中单线程的概念。由于JS是单线程语言,不存在并发执行的任务,所有任务都需要排队,前一个任务结束,才会开始下一个任务。因此,在JS中,任务分为两种,一是同步任务,一是异步任务。而for循环就是同步任务,点击事件函数是异步任务,异步任务会去排队,排到同步任务的后面(大家猜猜如果几个异步任务排队顺序是怎样的),ok !
    现在代码其实可以等于

    var price=document.getElementsByTagName('div');
    for (var i = 0; i < 6; i++) {
    	price[i].onClick=order();
    }  
    fnction order(){
        console.log(i)
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    然后了解什么是闭包,我理解的闭包就是在函数这个作业域里引用作用域之外的量,闭包有个特点就是–基于词法作用域的查找规则(当前找不到某个变量,就向上查找,如果最终没有找到,则返回undefined)。
    所以,order()中的 i 就成了6,好了,小伙伴们了解了吧

    ,

                                    </div><div data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/weixin_44989478/article/details/105594964&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}"><div></div></div>
                <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                                </div>
    </article>
  • 相关阅读:
    Oracle专家高级编程 第二章 服务器和文件
    Oracle专家高级编程 第一章
    Leetcode 4 寻找两个正序数组的中位数
    Leetcode 3 无重复字符的最长子串
    Leetcode 2 两数相加
    Leetcode 1 两数之和
    gitee开源许可证
    js新特性展开符的使用方式
    webpack高速配置
    JS中日期比较时斜杠与横杠的区别
  • 原文地址:https://www.cnblogs.com/webwjg/p/13098946.html
Copyright © 2020-2023  润新知