小强面试记

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

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

###Round One

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

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

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

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

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

Round Two

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

for (var i = 1; i <= 10; i++) {
  setTimeout( function timer() {
      console.log(i);
  }, 1000 );
}   

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

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

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

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

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

“好嘞。”小强说。

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

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

 for (var i = 1; i <= 10; i++) {
    (function(i){
         setTimeout( function timer() {
        console.log(i);
  }, 1000 );
  })(i);
}    

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

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

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

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

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

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

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

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

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

Round Three

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

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

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

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

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

阅读提示:

[黑客三兄弟
](https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665514169&idx=1&sn=f6f8dffdb29c4075d094dd7203189e5b&chksm=80d67cfab7a1f5ecb7daf768a0364879c0d26483fd2e595d67bcf82822c5fbb9525323956d51&scene=21#wechat_redirect)

黑客三兄弟(续)

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

上一篇:XAMPP 在windows下无法启动Apache解决方案


下一篇:计算时间的脚本