前端面试的难题和怪题

前端面试三部曲

• 前端面试概念收集器
• 前端面试的经典题
• 前端面试的难题和怪题

函数

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;
}

转载，请表明出处。总目录前端经验收集器

微信公众号