问得最多的十个JavaScript前端面试问题

我知道有很多人不同意这种类型的面试。其实不管你喜不喜欢，你都得接受。尤其当你是自学的，而且要申请第一份工作时。

我估计很多有人其它方法来证明他自己，像Github/ 项目地址可能是非常理想的证明方法，但也别全都指望这些。

好消息是有一些很难的问题，在有限的时间里我没答上来（比如说Event Loop和杨辉三角)，一些其它面试侯选人也承认他们也没答上来，这会让讨论变得轻松很多。

立即学习“Java免费学习笔记（深入）”；

坏消息是有些面试之后就没有任何反馈了。有三家公司再也没联系过。这点击打击自信，而且没有受到尊重。然后你可能会有心理斗争，“面试的不够好？”，“他们不喜欢我这种类型？”。所以如果你是面试官，请给你的面试者一个明确的答复，即使是自动回复也比什么都没有的强。

1. 设计一个函数返回第n行的杨辉三角。（整个面试只有这一个问题）

注* 杨辉三角也叫Pascal’s Triangle

           1

         1     1

      1     2     1

   1     3     3      1

   ...

2. 设计一个函数，返回一串字符串中重复次最多的单词。

3. 使用递归打印长度为n的费波那契数列。

注* 费波那契数列由0和1开始，之后就由之前的两数相加 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

4. 解释一下 bind, apply和call的用法和区别。

5. 解释一下什么是event delegation（事件代理）和它为什么有用。

6. 什么是event loop （事件循环）？

多面-AI面试

猎聘推出的AI面试平台

32

查看详情

7. hoisting（声明提升）在JavaScript里是怎么工作的?

8. 描述一下你在设计应用或网站时的流程。

9. 你最希望JavaScript或浏览器中添加哪些功能，为什么？

10. 函数式编程和命令式编程之间的区别？你喜欢哪一个？

 5个经典的前端面试问题 

问题1：Scope作用范围

考虑下面的代码： 

(function() {
   var a = b = 5;
})();

console.log(b);

什么会被打印在控制台上？ 

回答 

上面的代码会打印 5。

这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。

这个问题的另一个诀窍是，它没有使用严格模式 ('use strict';) 。如果启用了严格模式，代码就会引发ReferenceError的错误：B没有定义（b is not defined）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

问题2：创建“原生”（native）方法

给字符串对象定义一个repeatify功能。当传入一个整数n时，它会返回重复n次字符串的结果。例如： 

console.log('hello'.repeatify(3));

应打印 hellohellohello。 


回答 

一个可能的实现如下所示： 

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i < times; i++) {
      str += this;
   }
   return str;
};

现在的问题测试开发者有关JavaScript继承和prototype的知识点。这也验证了开发者是否知道该如何扩展内置对象（尽管这不应该做的）。 

这里的另一个要点是，你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在： 

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

当你被要求做好JavaScript函数兼容时这种技术特别有用。 

问题3：声明提升（Hoisting）

执行这段代码，输出什么结果。 

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

回答 

这段代码的结果是 undefined 和 2。 

原因是，变量和函数的声明都被提前了（移到了函数的顶部），但变量不分配任何值。因此，在打印变量的时候，它在函数中存在（它被声明了），但它仍然是 undefined 。表示换句话说，上面的代码等同于以下内容： 

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}
 
test();

问题4：this在JavaScript中如何工作的

下面的代码会输出什么结果？给出你的答案。 

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

回答 

答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。 

问题5：call() 和 apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果： 

console.log(test.call(obj.prop))