记一次前端面试经历
最近公司在做一些战略调整，部门有不少老员工前辈们都陆陆续续的离职或者被离职了。而我所在的团队——网易菠萝，也被归并到游戏运营中心了。因为产品策划还没有出来、暂时没什么需求做，闲得有点e-g-g疼的，每天从早到晚都是待在公司看看书、刷刷知乎等。我真是命途多舛啊，还没有真正步入社会，就见证了一个上百人的事业部说没落就没落。甚至已看破红尘，连参加省公务员考试的计划都做好了。这可不是开玩笑的哈，已经在报名费和复习资料上花了两三百块啦，只是因为思想觉悟比较低，始终还是对政治没有兴趣，那几本复习资料到现在还没翻过一页。几天前，一哥们儿说他们公司（CVTE）有个春季校园招聘，叫我可以去试试。这里先补脑一下CVTE是个怎么样的公司哈，它在广东这边也算是小有名气的，主要原因是它的薪酬比BAT还要高出不少，传说毕业生月薪已经15K左右，而且一年还有16-17薪。加上它的校招宣传非常给力，广东高校计算机专业的同学应该对它都有耳闻过，其他省份的同学可能就比较陌生，不过外界对这个公司的评价并不怎么好，有兴趣的可以自行到知乎看。因为CVTE的薪酬确实很吸引人，所以我也有点儿心动哈。不过当时已经过了笔试时间，而且还不能霸面。幸好我那哥们儿和HR姐姐还算熟，而且我的简历写着有NAT实习经历，也就顺利的获得了面试机会。
昨天（2月8号），我还是按照平时的时间8：00起床（因为公司9：30上班）。一打开手机，就看到了推荐我去CVTE的哥们儿在微信发了好多条信息，他说已经和HR说好了，让我8：30之前赶到黄村地铁站坐CVTE面试班车过去面试。我的天呐，我本来只是开玩笑啊，想不到这哥们儿是认真的。毕竟他也是好不容易才帮我争取到了面试机会，放他飞机可不太好啊啊。所以，七手八脚的穿上衣服、鞋子，没来得及刷牙洗脸就骑上ofo直奔地铁站去了。这几天的广州下着冷冷的春雨，早/上的气温也就10度左右。我当时只穿件衬衣，真是冷得发抖啊。
还好，8：25就到了黄村地铁站，然后从C出口一出去就看到了白色的CVTE班车。当时车上已经有10来个人。但是，后来因为要等一个睡过头的家伙，到了8：50老司机才开车。CVTE给我的感觉是挺人性化的，竟然愿意为了一个迟到的考生等待了20分钟。
大概坐了40分钟的车程，就到了广州罗岗CVTE园区了。一下车，眼前就是金碧辉煌的传说 中的CVTE大厦。不知道是因为这里的纬度比学校高、还是因为这里山比较多，反正气温真的比学校要低了好多，我全身都在颤抖。下车大概等待2分钟，HR姐姐就下来带我们到楼上去面试了。等候区和面试区是同一个会议室。当时有2位HR姐姐、6位面试官（4个一面的、2个是二面的）。刚刚坐下来，HR姐姐就说先上4个同学到前面来面试。我当时第一个上去的。尴尬的事情这时候发生的，面试官哥哥问了我手机尾号4位数字，然后他输入了几遍都找不到我资料。于是叫来了HR姐姐问是怎么回事，这时候HR姐姐才恍然想起来我是没有笔试、直接来面试的，赶紧把我拉到一个角落，叫了另外一个同学上去面试。她问我带简历了没有，我说没有。然后面对面加了微信，并把很久以前做的一份电子简历发给了她。然后就叫我回到座位去等待。
大约过了30分钟，HR姐姐叫我上去第一轮面试。这时候因为太冷，我全身都在发抖啊。面试官好像看到我在发抖，然后就说不用紧张哈、放松点儿。大哥啊，我这是冷啊不是紧张 啊、没有看到我才穿一件衬衫吗。然后，他先让我做了简短的自我介绍。然后就开始进入正题了，下面是当时被问到的一些问题：
第3题，可能面试官的意图也是想考察我们能否熟练掌握闭包吧。如果有刷过面试题的同学可能一下子就会做出来，但是，如果经验不足的同学可能会写出如下的代码：
<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支持块级作用域。改成如下就正常了。
len i < len; i++) { lis[i].() ); }
还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：
len i < len; i++) { (function (i) { lis[i].() ); })(i) }
当然啦，如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：
lis .(e) .(.);
使用了事件委托，减少了监听器的绑定（只对列表的父亲元素监听），这种方法说不定还会加分呢。哈哈，我当时就是用这种方法来实现的，面试官可能觉得我的解法有点不寻常、顿时一脸蒙B，甚至还一度怀疑 console.log([].indexOf.call(lis, target)) 这段代码是不是有问题。直到后来我直接在他的笔记本跑了一遍，他才相信是正确的。
第4题，因为面试官说要通过伪元素来实现，我的CSS本身就不咋滴，只知道好像用到了CSS3的border-radius，但是要使用伪未元素我还真心不会哇。所以当时就直接说不会做，现在也不会。请CSS大神在评论区发一下代码哈~
相关文章
精彩导读
热门资讯
关注我们
