又是一年春季,空气清新,阳光正好,一切都好。当然,并非一切都那么令人舒适,比如春节后的工作,不知曾几何时,一年总有那么个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王国的一次旅行,一个没有类的世界怎么玩转面向对象?
“那好,一开始你谈到了对前端工程师工作内容的认识,那请问如何保证数据的合法性?又如何控制用户的异常操作?还有安全性呢?”
阅读提示:
面对老刘的咄咄逼人,妹子小强的命运又将如何?她是否能够人如其名,继续顽强地向前迈进呢?预知后事如何......