前端面试的难题和怪题
前端面试三部曲
函数
var f = function g(){
return 23;
}
typeof g()
答案 Error, 函数表达式中后方的函数声明g并不会被定义。
作用域
var a,b;
(function(){
alert(a);
alert(b);
var a = b = 3;
alert(a);
alert(b);
})();
alert(a);
alert(b);
答案 undefined,undefined,3,3,undefined, 3。var a = b = 3;
可以被分为var a =3; b=3;
b会寻找全局变量进行赋值。
var out = 25,
inner = {
out: 20,
func: function () {
var out = 30;
return this.out;
}
};
console.log((inner.func, inner.func)());
console.log(inner.func());
console.log((inner.func)());
console.log((inner.func = inner.func)());
答案 25,20,20,25,因为(inner.func, inner.func)
是进行逗号运算符,逗号运算符就是运算前一段表达式,且返回后一段表达式结果,唯一个函数指向windows。第二和第三个console.log的作用域都是inner,也就是他们执行的其实是inner.func()
。考查的是一个等号运算inner.func = inner.func
其实返回的是运算的结果,即函数inner.func
,与第一问相同。
至于箭头函数,给你们做为思考题吧。
var out = 25,
inner = {
out: 20,
func: () => {
var out = 30;
return this.out;
}
};
console.log((inner.func, inner.func)());
console.log(inner.func());
console.log((inner.func)());
console.log((inner.func = inner.func)());
javascript的delete
(function(x){
delete(x);
alert(x);
})(1+5);
答案 6,变量却不能删除,函数也不能删除。形式参数不能被删除。详情参考《Javascript高级编程》
IIFE
var a = 10;
function f1(){
console.log(a);
}
f1();
(function(){
var a = 20;
f1();
}());
(function(f2){
var a = 30;
f2();
}(f1));
答案 10 10 10,调用的方法在指向的是全局变量。本题迷惑性极强。
var test = (function(a){
this.a = a;
return function(b){
return this.a + b;
}
}(function(a,b){
return a;
}(3,2)));
console.log(test(1));
答案 4,首先立即执行函数把function(a,b){return a;}(3,2)
返回值3传到a的位置。立即执行函数又被赋予到test
中。test
调用的参数传到b的位置。所以结果为3+1
。
下面题目来自Excuse me?这个前端面试在搞事!
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
答案 0 1 2 3 4,立即执行函数在内部。无返回值,所以函数变成了setTimeout(undefined,i*1000)
,即没有东西是延时执行。立即执行了函数内部的console.log(i)
,所以立即返回0 1 2 3 4。
引用类型
function a(array){
var result = [];
for(var i=0;i < array.length;i++){
result[i] = function(){
return array[I];
}
}
return result;
}
var b = a([10,20,30,40,50]);
console.log(b[0]());
答案 undefined,var
变量提升,i为5,方法为对象。每个i都是5。array[5]超出范围,所以答案为undefined
。
setTimeout
(function(){
console.log(1);
setTimeout(function(){console.log(2)},1000);
setTimeout(function(){console.log(3)},0);
console.log(4);
})();
答案 1 4 3 2,setTimeout即使为0ms,也会延时至最后。
下面题目来自Excuse me?这个前端面试在搞事!
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
答案 2 3 5 4 1,如上面所说,setTimeout延时即使为0,也会在最后执行。先执行Promise内的2和3,then延时执行。先输出5。下一个tick执行4,最后是setTimeout。
add(2)(3)(4)的执行结果为9,写出函数体。
利用柯里化,函数体可以这么写。
function add(a){
return function(b){
return function(c){
return a+b+c;
}
}
}
当然,面试官会问你,如果不仅仅只有3个参数的情况。
function add(x) {
var sum = x;
var tmp = function (y) {
sum = sum + y;
return tmp;
};
tmp.toString = function () {
return sum;
};
return tmp;
}
转载,请表明出处。总目录前端经验收集器