10道典型的JavaScript面试题

Posted 2020-10-11

问题1: 作用域（Scope）

　　考虑以下代码：

(function() {
   var a = b = 5;
})();
 
console.log(b);

　　上述代码会打印出5。这个问题的陷阱就是，在立即执行函数表达式（IIFE）中，有两个赋值，但是其中变量a使用关键词var来声明。这就意味着a是这个函数的局部变量。与此相反，b被分配给了全局作用域（译注：也就是全局变量）。

　　这个问题另一个陷阱就是，在函数中没有使用”严格模式” (‘use strict‘;)。如果 严格模式开启，那么代码就会报错 ” Uncaught ReferenceError: b is not defined” 。请记住，如果这是预期的行为，严格模式要求你显式地引用全局作用域。所以，你需要像下面这么写：

(function() {
   ‘use strict‘;
   var a = window.b = 5;
})();
 
console.log(b);

问题2: 创建 “原生(native)” 方法

　　在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数，来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子：

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。

　　这个结果的原因是，变量和函数都被提升(hoisted) 到了函数体的顶部。因此，当打印变量a时，它虽存在于函数体（因为a已经被声明），但仍然是undefined。换言之，上面的代码等同于下面的代码：

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

问题4: 在javascript中，`this`是如何工作的

　　以下代码的结果是什么？请解释你的答案。

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 。原因是，JavaScript中关键字this所引用的是函数上下文，取决于函数是如何调用的，而不是怎么被定义的。

　　在第一个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));

问题6: 闭包（Closures）

　　考虑下面的代码：

var nodes = document.getElementsByTagName(‘button‘);
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener(‘click‘, function() {
      console.log(‘You clicked element #‘ + i);
   });
}

　　请问，如果用户点击第一个和第四个按钮的时候，控制台分别打印的结果是什么？为什么？

　　代码打印两次You clicked element #NODES_LENGTH，其中NODES_LENGTH是nodes的结点个数。

　　原因是在for循环完成后，变量i的值等于节点列表的长度。此外，因为i在代码添加处理程序的作用域中，该变量属于处理程序的闭包。你会记得，闭包中的变量的值不是静态的，因此i的值不是添加处理程序时的值（对于列表来说，第一个按钮为0，对于第二个按钮为1，依此类推）。在处理程序将被执行的时候，在控制台上将打印变量i的当前值，等于节点列表的长度。

问题7: 闭包（Closures）

　　修复上题的问题，使得点击第一个按钮时输出0，点击第二个按钮时输出1，依此类推。

　　有多种办法可以解决这个问题，下面主要使用两种方法解决这个问题。

　　第一个解决方案使用立即执行函数表达式（IIFE）再创建一个闭包，从而得到所期望的i的值。实现此方法的代码如下：

var nodes = document.getElementsByTagName(‘button‘);
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener(‘click‘, (function(i) {
      return function() {
         console.log(‘You clicked element #‘ + i);
      }
   })(i));
}

　　另一个解决方案不使用IIFE，而是将函数移到循环的外面。这种方法由下面的代码实现：

function handlerWrapper(i) {
   return function() {
      console.log(‘You clicked element #‘ + i);
   }
}
 
var nodes = document.getElementsByTagName(‘button‘);
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener(‘click‘, handlerWrapper(i));
}

问题8：数据类型

　　考虑如下代码：

console.log(typeof null);//object
console.log(typeof {});//object
console.log(typeof []);//object
console.log(typeof undefined);//undefined

　　大多数开发人员认为typeof []会返回Array。如果你想测试一个变量是否为数组

var myArray = [];
if (myArray instanceof Array) {
   // do something...
}

问题9：事件循环

　　下面代码运行结果是什么？请解释。

function printing() {
   console.log(1);
   setTimeout(function() { console.log(2); }, 1000);
   setTimeout(function() { console.log(3); }, 0);
   console.log(4);
}
printing();

　　输出结果：1  4  3  2

　　想知道为什么输出顺序是这样的，你需要弄了解setTimeout()做了什么，以及浏览器的事件循环原理。浏览器有一个事件循环用于检查事件队列，处理延迟的事件。UI事件（例如，点击，滚动等），Ajax回调，以及提供给setTimeout()和setInterval()的回调都会依次被事件循环处理。因此，当调用setTimeout()函数时，即使延迟的时间被设置为0，提供的回调也会被排队。回调会呆在队列中，直到指定的时间用完后，引擎开始执行动作（如果它在当前不执行其他的动作）。因此，即使setTimeout()回调被延迟0毫秒，它仍然会被排队，并且直到函数中其他非延迟的语句被执行完了之后，才会执行。

　　有了这些认识，理解输出结果为“1”就容易了，因为它是函数的第一句并且没有使用setTimeout()函数来延迟。接着输出“4”，因为它是没有被延迟的数字，也没有进行排队。然后，剩下了“2”，“3”，两者都被排队，但是前者需要等待一秒，后者等待0秒（这意味着引擎完成前两个输出之后马上进行）。这就解释了为什么“3”在“2”之前。

问题10：算法

　　写一个isPrime()函数，当其为质数时返回true，否则返回false。

　　我认为这是面试中最常见的问题之一。然而，尽管这个问题经常出现并且也很简单，但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。

　　首先， 因为JavaScript不同于C或者Java，因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你，你应该询问他是否需要做输入检查，还是不进行检查直接写函数。严格上说，应该对函数的输入进行检查。

　　第二点要记住：负数不是质数。同样的，1和0也不是，因此，首先测试这些数字。此外，2是质数中唯一的偶数。没有必要用一个循环来验证4,6,8。再则，如果一个数字不能被2整除，那么它不能被4，6，8等整除。因此，你的循环必须跳过这些数字。如果你测试输入偶数，你的算法将慢2倍（你测试双倍数字）。可以采取其他一些更明智的优化手段，我这里采用的是适用于大多数情况的。例如，如果一个数字不能被5整除，它也不会被5的倍数整除。所以，没有必要检测10,15,20等等。

　　最后一点，你不需要检查比输入数字的开方还要大的数字。我感觉人们会遗漏掉这一点，并且也不会因为此而获得消极的反馈。但是，展示出这一方面的知识会给你额外加分。

　　现在你具备了这个问题的背景知识，下面是总结以上所有考虑的解决方案：

function isPrime(number) {
   // If your browser doesn‘t support the method Number.isInteger of ECMAScript 6,
   // you can implement your own pretty easily
   if (typeof number !== ‘number‘ || !Number.isInteger(number)) {
      // Alternatively you can throw an error.
      return false;
   }
   if (number < 2) {
      return false;
   }
 
   if (number === 2) {
      return true;
   } else if (number % 2 === 0) {
      return false;
   }
   var squareRoot = Math.sqrt(number);
   for(var i = 3; i <= squareRoot; i += 2) {
      if (number % i === 0) {
         return false;
      }
   }
   return true;
}