<body>

<ul>

    <li>test1</li>

    <li>test2</li>

    <li>test3</li>

    <li>test4</li>

    <li>test5</li>

    <li>test6</li>

    <li>test7</li>

    <li>test8</li>

    <li>test9</li>

    <li>test10</li>

</ul>

<script>

    var lis = document.querySelectorAll('ul li');

    for(var i = 0, len = lis.length; i < len; i++) {

        lis[i].addEventListener('click', function () {

            console.log(i);

        }, false);

    }

</script>

</body>

你运行一下代码会发现，无论你点击哪个列表，控制台都是输出10。这是因为var声明的变量是函数作用域的，而不是块级作用域的。也就是说，for循环10次，每次都是改变同一个i，所以它的值会从0一直加到10。还有个问题是闭包导致的，闭包保存的是外部变量的引用，而不是值。也就是说，循环10次监听器创建了10 个闭包，它们里面的i引用的是同一个啊。所以全部都指向了10.
要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var， 因为let支持块级作用域。改成如下就正常了。

    for(let i = 0, len = lis.length; i < len; i++) {

        lis[i].addEventListener('click', function () {

            console.log(i);

        }, false);

    }

还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：

    for(var i = 0, len = lis.length; i < len; i++) {

        (function (i) {

            lis[i].addEventListener('click', function () {

                console.log(i);

            }, false);

        })(i)

    }

当然啦，如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：

    var ul = document.querySelector('ul');

    var lis = document.querySelectorAll('ul li');

    ul.addEventListener('click', function (e) {

        var target = e.target;

        if(target.nodeName.toLowerCase() === 'li') {

            console.log([].indexOf.call(lis, target));

        }

    }, false);

使用了事件委托，减少了监听器的绑定（只对列表的父亲元素监听），这种方法说不定还会加分呢。哈哈，我当时就是用这种方法来实现的，面试官可能觉得我的解法有点不寻常、顿时一脸蒙B，甚至还一度怀疑 console.log([].indexOf.call(lis, target)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍，他才相信是正确的。

  1. 下面的代码有内存泄漏吗

    var user = {name: 'tom', age: 20, gender: 'male'}
    
var test = document.getElementByid('test')
    
test.onclick = function() {
    
 test.innerHTML = user.name;
    
}
    
// ...后面还有很多其他操作，最后把user对象释放掉
    
user = null; // 释放对象
  2. 实现一个算法，寻找字符串中出现次数最少的、并且首次出现位置最前的字符
    如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少）。并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。
  3. http和tpc的关系，以及什么是https
  4. Node的特点（优点和缺点）
  5. 你在腾讯和网易实习期间学到的东西？

  6. 未来三年的职业规划

至于二面的问题都不是很难，下面简单的来看一下：

  • 第1题，基本类型（number, string, boolean, null, undefined, symbol）是在栈的，而其他的引用类型都是在堆的。垃圾回收是采用了计数引用法（如果两个对象之间存在循环引用时，会有内存泄漏，因为计数无法变为0 ）

  • 第2题，有内存泄漏，这是闭包本身的问题。完全消除闭包的内存泄漏是不现实的，但是，如果采用下面的方法可以减少内存泄漏：

    var user = {name: 'tom', age: 20, gender: 'male'}
    
var test = document.getElementByid('test')
    
(function (name) {
    
test.onclick = function() {
    
    test.innerHTML = name;
    
}
    
})(user.name);
    
user = null;

  • 第3题算法题，也不很难，大家可以自己试试去实现 ，如果做不出来的再到评论求助啦，这里就不贴出代码了。

  • 第4题，考察了计算机网络的tcp三次握手以及http的请求头等。https是使用安全套接字进行加密的，可以说HTTPS = SSL + HTTP。

  • 第5题，Node的特点是异步非IO阻塞、适合高并发，但不适合密集型计算

  • 第6、7题都是主观题，可以随便吹一下水便好。

因为当时已经是饭点时间，面试官也有点急着去吃饭，就没有再问我问题了。

li点击弹出序号的更多相关文章

  1. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. CSS3 页面中展示邮箱列表点击弹出发送邮件界面

    CSS3 页面中展示邮箱列表点击弹出发送邮件界面 代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  4. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  6. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  7. jquery---点击弹出层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  9. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 2.4. 属性（Core Data 应用程序实践指南）

    属性的名称必须以小写字母开头. 添加 name 和 quantity 属性.

  2. Android项目中打jar包 和 使用

    第一步,把普通的android project设置成库项目 库项目也是一个标准的android项目,因此你先创建一个普通的android项目. 这个项目可以起任何的名称,任何的报名,设置其他需要设置的 ...

  3. Spring aop:decare-parent 为类增加新的方法

    Spring aop:decare-parent 为类增加新的方法: 使用XML配置的方式: XML: <?xml version="1.0" encoding=" ...

  4. CF448C [Painting Fence]递归分治

    题目链接:http://codeforces.com/problemset/problem/448/C 题目大意:用宽度为1的刷子刷墙,墙是一长条一长条并在一起的.梳子可以一横或一竖一刷到底.求刷完整 ...

  5. 有关C#分部类型的一些叙述

    等待着元宵节的到来,过完元宵,这个年也算是过完了,也得开始出去挣钱了,过年回家感觉每个人都觉得很牛,只有自己太渣,为了避免年底再出现这样尴尬的局面,还是需要努力干活.争取当上CEO,赢取白富美,走上人 ...

  6. Program terminated with signal SIGKILL,Killed

    车载后视镜机器,Liinux + qtUI形式,前后双路,前一天晚上开机用gdb run DvrUI,第二天早上回来一看,机器绿屏卡死了,录像预览停止刷新了,sd录像也停止了.点击无任何反应. 看gd ...

  7. 前端开发在IOS端遇到的一个诡异问题(Delegate 失效)

    一.前言 最近同事问到一个问题,一个前端页面在IOS端真机测试下出现一个比较诡异的问题,如果没有遇到过估计也是一筹莫展.今天特此记录一下,或许能帮到后面遇到这个问题的朋友少绕一些弯路.这是关于JQue ...

  8. Struts2 struts.xml配置

    <?xml version="1.0" encoding="GBK"?> <!--指定 Struts2 的DTD信息 DTD 指 Docume ...

  9. sed 命令详解

    sed 用于筛选和转换文本的流编辑器 描述: sed是一个流编辑器,流编辑器对一个输入流执行基本的文本转换(输入流来自文件或者管道行).虽然在某些方面类似于很多可运行脚本的编辑器,但是sed的工作方式 ...

  10. 不要在Android的Application对象中缓存数据!

    前言   在你的App中的很多地方都需要使用到数据信息,它可能是一个session token,一次费时计算的结果等等,通常为了避免Activity之间传递数据的开销,会将这些数据通过持久化来存储. ...