小强面试记

又是一年春季，空气清新，阳光正好，一切都好。当然，并非一切都那么令人舒适，比如春节后的工作，不知曾几何时，一年总有那么个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王国的一次旅行，一个没有类的世界怎么玩转面向对象？

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

阅读提示：

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