美文网首页Web 前端开发
一个经典的闭包问题

一个经典的闭包问题

作者: 从小就很瘦 | 来源:发表于2018-07-06 13:16 被阅读2次

老生常谈的一个面试题,如何解决点击ul下的每个li,弹出这个li的元素索引呢?

<ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
</ul>

1. 绑定数据在DOM元素上

var oLi = document.getElementsByTagName('li');
        for (var i = 0; i < oLi.length; i++) {
            oLi[i]._index = i;
            oLi[i].onclick = function () {
                alert(this._index + 1)
            }
        }

遍历oLi,设置一个属性_index来记录i。

2. 闭包

var oLi = document.getElementsByTagName('li');
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].onclick = fn(i)
        }
        function fn(j) {
            return function() {
                alert(j + 1)
            }
        }

IIFE写法

var oLi = document.getElementsByTagName('li');
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].onclick = (function(j){
                return function() {
                    alert(j + 1)
                }
            })(i)
        }

这样的写法是最常见的:

var oLi = document.getElementsByTagName('li');
        for (var i = 0; i < oLi.length; i++) {
            (function (j) {
                oLi[j].onclick = function () {
                    alert(j + 1)
                }
            })(i)
        }

3. let

超级简单,ES6使用let就是为了解决作用域的问题。ES5的一些方法要逐渐淘汰了~

var oLi = document.getElementsByTagName('li');
        for (let i = 0; i < oLi.length; i++) {
            oLi[i].onclick = function() {
                alert( i + 1)
            }
        }

4. 事件委托

先将带有length属性的元素转换为数组,然后利用数组的indexOf方法。

var oLi = document.getElementsByTagName('li');
            ali = Array.prototype.slice.call(oLi);
            oUl = document.getElementsByTagName('ul')[0];
        oUl.addEventListener('click', function () {
            var event = event || window.event;
            var target = event.target || event.srcElement;
            alert(ali.indexOf(target) + 1)
        })

本人水平有限,如有错误,还望指出 _"

相关文章

  • 闭包原理及应用

    这个问题的经典性,几乎所有面试官都会问到这个问题,什么情况下会发生闭包,为什么需要闭包,什么场景下需要,闭包闭了谁...

  • 闭包(closure)

    ● 闭包基础 ● 闭包作用 ● 闭包经典例子 ● 闭包应用 ● 闭包缺点 ● 参考资料 1、闭包基础 作用域和作...

  • Python闭包

    闭包 = 环境变量 + 函数 调用闭包内部的环境变量 闭包的经典误区 闭包与非闭包实现人类走路 非闭包 闭包

  • 一个经典的闭包问题

    老生常谈的一个面试题,如何解决点击ul下的每个li,弹出这个li的元素索引呢? 1. 绑定数据在DOM元素上 遍历...

  • Python入门与进阶(11-11)

    11-11 一个事例看看闭包11-12 闭包的经典误区

  • JavaScript闭包之for循环

    之前讲了最简单的闭包,然而闭包最经典的是那个for循环,几乎每一个想要理解闭包的都会遇到这个例子,每一个讲解闭包的...

  • js闭包问题

    javascript 闭包的概念,闭包的作用,闭包经典面试题详解(配图解) 函数作用域(闭包前置知识) 要彻底弄懂...

  • 关于Javascript闭包的总结

    关于闭包这个词的解释 维基百科中对于闭包的经典解释: 在计算机科学中,闭包(Closure)是词法闭包(Lexic...

  • JS闭包问题(二)

    在之前的JS闭包问题(一)文章中大概介绍了一下JS闭包,同时讲了闭包与变量之间的问题,今天我们继续聊闭包,聊聊闭包...

  • javascript复习笔记(2)

    闭包 网上讲闭包的文章一搜一大把。而且面试时,比较传统的问题都有很大几率提到闭包的问题。的确,闭包是js中一个很重...

网友评论

    本文标题:一个经典的闭包问题

    本文链接:https://www.haomeiwen.com/subject/ijwvuftx.html