<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. Activity的生命周期与加载模式——Activity的生命周期演示

    当Activity处于Android应用中运行时,它的活动状态由Android以Activity栈的形式管理.当前活动的Activity位于栈顶.随着不同应用的运行,每个Activity都有可能从活动 ...

  2. IIS8中添加WCF支持几种方法小结[图文]

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...

  3. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  4. Pomelo的监控模块

    对服务器的监控和管理有三个主体:master,monitor,client:master负责收集所有服务器的信息,下发对服务器的操作指令.monitor负责上报服务器状态,并对master的命令作出反 ...

  5. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  6. js制作ppt阅读文档类型

    前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧.. 有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用 ...

  7. 一道关于call和this的JS面试题

    一个有情怀的程序员...... 2017年始,希望成为一个更好的自己,想自己所想,爱自己所爱 ----------------------------------------------------- ...

  8. WebServerice的发布

    在webserverice一文中,我们简单的介绍了一下什么是webserverice,以及如何建立一个webserverice服务.今天,我们一起学习下webserverice是如何发布的. 为什么要 ...

  9. Unity预计算光照的学习(速度优化,LightProb,LPPV)

    1.前言 写这篇文章一方面是因为unity的微博最近出了关于预计算光照相关的翻译文章,另一方面一些美术朋友一直在抱怨烘培速度慢 所以抱着好奇的心态来学习一下unity5的PRGI预计算实时光照 2.基 ...

  10. QT编程环境搭建

    使用QT需要QT的库以及QT creator,在QT5以后的版本中,两者已经集成,不需要单独下载了,只需要下载一个文件即可.配置步骤如下: 1.下载qt-opensource-windows-x86- ...