<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)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍，他才相信是正确的。
第4题，因为面试官说要通过伪元素来实现，我的CSS本身就不咋滴，只知道好像用到了CSS3的border-radius，但是要使用伪未元素我还真心不会哇。所以当时就直接说不会做，现在也不会。请CSS大神在评论区发一下代码哈~
第5题，主要谈框架相关的。因为目前的情况是，React才是主流，很多团队都在用React，CVTE也不例外。他似乎很关心我为什么要使用vue。我当时给出的理由是：NG1脏值检测性能太低并且相对过时，NG2目前又不够成熟，React的JSX语法个人不太喜欢，而vue比较轻量级、并且支持jade模板（ 我们旧项目是使用jade模板写的，迁移会相对容易）。然而，接下来便遭到了面试官的连续挑衅，说我用vue不会是因为它的中文文档比较齐全吧（鄙视我英文差？？？）。还说vue是不适合做大型项目。最后一句更狠：你们使用vue真是最愚蠢的选择。（我当时心里真的有一万只草泥马在奔腾）
其实，我个人觉得，框架并没有好坏之分的，每个框架必然有它存在的理由。React也好，NG也行，Vue也罢，萝卜、荷兰豆各有所爱嘛。反正，面试官说的那些话我真的听得挺反感的。
话又说回来。问完了第5个问题之后 ，面试官说面试就此结束，让我回到座位休息。
CVTE对于考生的招待真的挺周到的，桌面上有水果、零食、饮料等等。因为当时手机快没有电了，所以，就坐在那里边吃水果边看其他人面试。
然后，等待了一个多小时，轮到了二面。面试官大概三十多岁，可能是前端组长或者技术总监之类的职位吧。
他主要是问到了下面的这些问题：
var user = {name: ‘tom‘, age: 20, gender: ‘male‘}
var test = document.getElementByid(‘test‘)
test.onclick = function() {
test.innerHTML = user.name;
}
// ...后面还有很多其他操作，最后把user对象释放掉
user = null; // 释放对象至于二面的问题都不是很难，下面简单的来看一下：
第1题，基本类型（number, string, boolean, null, undefined, symbol）是在栈的，而其他的引用类型都是在堆的。垃圾回收是采用了计数引用法（如果两个对象之间存在循环引用时，会有内存泄漏，因为计数无法变为0 ）这里写错了，误导了大家，不好意思哈。JS使用的是标记清除法。原理可以看看《JS高教》第三版的78页。
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题都是主观题，可以随便吹一下水便好。
原文：https://www.cnblogs.com/xiaoxiaodevlog/p/10682502.html