查看: 1014|回复: 0

[JavaScript/JQuery] 小强面试记

发表于 2018-4-7 08:00:02

又是一年春季,空气清新,阳光正好,一切都好。当然,并非一切都那么令人舒适,比如春节后的工作,不知曾几何时,一年总有那么个365天不太想上班。还有校园里的小鲜肉们,也要开始参加春招喽。

这一年的某一天,一个叫小强的大四学生来老刘公司应聘实习生,应聘职位也是这几年发展迅猛的前端开发。


Round One

“自我介绍下吧。”老刘一脸严肃地说到,似乎并没有因为对方是妹纸稍显温柔和蔼,怜香惜玉更无从谈起。

小强噼里啪啦的自我介绍完一通之后,老刘又接着问:“既然你应聘的是前端开发岗,那就先谈谈对它的认识吧。”

“好,我认为前端攻城狮的工作可概括成一句话:为用户提供便于使用和美观的交互界面的。”,小强胸有成竹的说到,“说得详细点,就是前端调用后台写好的接口(interface)将后台返回的数据进过一定处理正确地展示给用户,用户也能通过用户界面进行信息输入,这时前端再通过js代码将数据通过ajax请求发送给后端,后台返回的数据的格式以及前端传递的数据的格式是有统一约定的,比如json。而每个接口对应数据库(DB)中相关表(table)的操作,即增删改查(crud)操作。”

“嗯。”老刘对这个答案似乎还算满意,“既然谈到js,众所周知,一个前端攻城狮到底能走多远关键取决于是否具有扎实的js基础,下面我就考考你js的核心知识点吧。”

小强面对严苛的面试官老刘也不由得紧张起来,心想这面试官莫非就是传说中的佛系程序员?。


Round Two
老刘说罢就在白纸上手写了一道经典的闭包题目:

  1. for (var i = 1; i <= 10; i++) {
  2. setTimeout( function timer() {
  3. console.log(i);
  4. }, 1000 );
  5. }
复制代码

“请问输出结果是多少?” 老刘平静如初地问道。

小强看到题目后,心中暗自窃喜:“后续不就想考我闭包嘛,你不说我也知道,嘿嘿。” 二话不说,小强将答案脱口而出“ 10个11 ”。

这貌似也在老刘的意料之中,于是接着问:“怎样才能使得输出结果为1到10的数字?”

“加个闭包吧!”小强答道。

“手撸一个给我看看。”老刘说。

“好嘞。”小强说。

高手过招,从T不拖泥带水。

这不,没一会儿工夫,小强就把代码手写好了:

  1. for (var i = 1; i <= 10; i++) {
  2. (function(i){
  3. setTimeout( function timer() {
  4. console.log(i);
  5. }, 1000 );
  6. })(i);
  7. }
复制代码

“好,可以。”老刘首次给出了还算比较积极的回复,“那你是如何理解闭包的?”。

“闭包是函数和声明该函数的词法环境的组合。” 小强暗自窃喜:幸好之前将网上对闭包的定义背下来了。

“闭包有何作用?应用场景有哪些呢?” 老刘对此穷追不舍。

“最重要的作用就是保存函数上下文词法环境。我给您举个例子吧。”唰唰唰的,不一会小强在白板上将demo写出来了:

  1. function isFirstAdd () {//避免往数组arr添加重复元素
  2. var list = [5,6,7];
  3. console.log(list); //控制台输出[5,6,7,10]
  4. return function(item){
  5. if(list.indexOf(item)>=0){//如果新添加的元素已存在,返回false
  6. return false;
  7. }else{//不存在则往list数组添加该元素,并返回true
  8. list.push(item);
  9. return true;
  10. }
  11. }
  12. }
  13. //测试
  14. var f = isFirstAdd ()
  15. console.log(f(10));//true,此时的局部变量list变成了[5,6,7,10]
  16. console.log(f(10)); //false
复制代码

“使用闭包保存了匿名函数的上下文环境,这个环境包含了这个闭包创建时所能访问的所有局部变量。这个demo中,变量 f 是执行 isFirstAdd 时创建的“匿名函数”实例的引用,而“匿名函数”实例仍可访问其词法作用域中的变量,即可以访问到 list ,但是在一些编程语言中比如Java,函数中的局部变量仅在函数的执行期间可用,方法执行开始入栈时创建,执行完毕出栈时销毁。而“匿名函数”里的list会顺着作用域链找到isFirstAdd函数中的list,当第二次执行console.log(f(10)); 控制台输出就为false。”

“ 而如果不加闭包的话就达不到预期效果:”

  1. function isFirstAdd (item) {//避免往数组arr添加重复元素
  2. var list = [5,6,7];
  3. if(list.indexOf(item)>=0){//如果新添加的元素已存在,返回false
  4. return false;
  5. }else{//不存在则往list数组添加该元素,并返回true
  6. list.push(item);
  7. return true;
  8. }
  9. }
  10. //测试
  11. console.log(isFirstAdd (10));//true
  12. console.log(isFirstAdd (10)); //true
复制代码

“每次函数调用后此时两次执行结果返回都为true。因为每次isFirstAdd执行后,其上下文环境就被销毁了。”
Round Three

“不错,还能主动和其它编程语言类比。既然你提到作用域的话,那请问 proto(隐式原型)与prototype(显式原型)的区别有哪些?”

要知道,“顺藤摸瓜式” 的提问方法是老刘最拿手的,因为这不仅能考查面试者的知识广度和熟悉度,还能测试面试者随机应变的能力。

“听过。但具体......我不太清楚。”小强感觉给自己挖了个坑,嘤嘤嘤~

阅读提示:javascript王国的一次旅行,一个没有类的世界怎么玩转面向对象?

“那好,一开始你谈到了对前端工程师工作内容的认识,那请问如何保证数据的合法性?又如何控制用户的异常操作?还有安全性呢?”

阅读提示:

黑客三兄弟

黑客三兄弟(续)

面对老刘的咄咄逼人,妹子小强的命运又将如何?她是否能够人如其名,继续顽强地向前迈进呢?预知后事如何......

来自微信公众号:逍遥谈(xiaoyaotan2016)



回复

使用道具 举报