面试JavaScript常用 问题

JavaScript 是 所有现代浏览器 的官方语言。因此，各种语言的开发者面试中都会遇到 JavaScript 问题。

本文不讲最新的 JavaScript 库，通用开发实践，或任何新的 ES6 函数 。而是讲讲面试中经常出现的 3 个 JavaScript 问题。我问过这些问题，我的朋友说他们也问。

当然不是说你在准备 JavaScript 面试时只要学习这 3 个问题 —— 你还 有 很多 途径 去更好的准备即将到来的面试 —— 但面试官很有可能通过下面 3 个问题来判断你了解和掌握 JavaScript 和 DOM 的情况。

让我们开始吧！注意下面的例子中我们使用原生 JavaScript， 因为面试官通常想考查你在不借助库（例如 jQuery）的帮助时掌握 JavaScript 和 DOM 的情况。

问题 #1： 事件代理

创建应用时，有时需要给页面中的按钮，文字，或图片添加事件监听器，当用户与这些元素交互时触发某些操作。

我们以一个简单的代办事项列表为例，面试官会告诉你，他们希望在用户点击列表中某一项时触发一个动作。并让你用 JavaScript 根据下面的 HTML 代码实现这个功能：

<ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

你可能会像下面的代码一样给元素添加事件监听器：

document.addEventListener('DOMContentLoaded', function() {

  let app = document.getElementById('todo-app');
  let items = app.getElementsByClassName('item');

  // 给每个列表项添加事件监听器
  for (let item of items) {
    item.addEventListener('click', function() {
      alert('you clicked on item: ' + item.innerHTML);
    });
  }

});

当然上面的代码能完成面试官的需求，问题是每个列表项都会加上一个事件监听器。当列表只有 4 项时没有问题，但如果有人给代办事项列表新增了 10,000 个事项呢（他们也许有一大堆事情要做）？那时函数会创建 10,000 个事件监听器，然后把它们都添加到 DOM 上。这样 效率 非常低。

面试中最好首先问一下面试官用户最多可以添加多少个代办事项。如果永远不会超过 10 个，那上面的代码运行起来就没有问题。但如果用户输入待办事项的数量没有上限，那你就得换一个更高效的解决方案。

如果应用有上百个事件监听器，更高效的解决方案是给最外层的容器添加 一个 事件监听器，当用户真正点击的时候再去获取实际被点击的代办事项。这被称为 事件代理 ，这比给每个代办事项都单独添加事件监听器更高效。

下面是事件代理的代码：

document.addEventListener('DOMContentLoaded', function() {

  let app = document.getElementById('todo-app');

  // 给容器添加事件监听器
  app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
      let item = e.target;
      alert('you clicked on item: ' + item.innerHTML);
    }
  });

});

问题 #2: 在循环中使用闭包

面试中经常会问到闭包，因为面试官能通过这个问题的回答判断你对语言的熟悉程度，以及考察你是否知道什么时候使用闭包。

闭包就是能访问作用域外部变量的 内部函数 。闭包能用来实现 私有化 和创建 工厂函数 等作用。关于闭包的常见面试题是这样的：

写一个函数，循环一个整数数组，延迟 3 秒打印这个数组中每个元素的索引。

这个问题常见（不正确）的实现是这样：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

如果你运行这段函数，你会发现 3 秒之后每次都打印的是 4 ，而不是预期的 0, 1, 2, 3 。

为了正确的找到出现这种情况的原因，你需要理解 JavaScript 是如何运行这段代码的，这也是面试官想要考察你的地方。

原因是 setTimeout 函数创建了一个访问外部作用域的函数（闭包），就是包含索引 i 的那个循环。3 秒之后，函数开始执行打印 i 的值，而此时循环也结束了， i 的值已经是 4。因为循环遍历 0, 1, 2, 3, 4 后最终停在了 4。

实际上有 好几种方法 能 正确 解决这个问题。这里有两个：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  // 给每个函数传入变量 i 让其能访问正确的索引
  setTimeout(function(i_local) {
    return function() {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000);
}

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  // 使用 ES6 中的 let 关键字，它会在函数调用时创建一个新的绑定
  // 了解更多：http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

问题 #3： Debouncing（防抖动）

有些浏览器事件能在很短的时间内被触发多次，例如调整窗口大小或滚动页面。如果你给窗口滚动事件添加一个事件监听器，然后用户不停地快速向下滚动页面，那你的事件可能在 3 秒之内被触发数千次。这会导致非常严重的性能问题。

如果在面试中讨论到构建应用程序，以及滚动事件，窗口调整事件，或者键盘事件等，请务必提及 debouncing 或者 throttling，作为提高页面速度与性能的方法。来一个 css-tricks 的实例：

2011 年，Twitter 出了一个问题：当滚动 Twitter 摘要时，页面变的很卡甚至无响应。John Resig 写了 一篇关于这个问题的博客 ，解释了直接将耗时的函数绑定在 scroll 事件上是一个多么糟糕的想法。

Debouncing 是解决这个问题的一种方法，它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用 合成 一次，并在给定时间过去之后仅被调用一次。下面是一个原生 JavaScript 的实现，用到了 作用域 , 闭包, this , 和 计时事件 ：

// 将会包装事件的 debounce 函数
function debounce(fn, delay) {
  // 维护一个 timer
  let timer = null;
  // 能访问 timer 的闭包
  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 如果事件被调用，清除 timer 然后重新设置 timer
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

这个函数 — 当传入一个事件（fn）时 — 会在经过给定的时间（delay）后执行。

函数这样用：

// 当用户滚动时被调用的函数
function foo() {
  console.log('You are scrolling!');
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));

Throttling 是与 debouncing 类似的一种技术，但它不是在调用函数之前等待一段时间，throttling 是在较长的时间间隔内调用函数。所以如果一个事件每 100 毫秒被触发 10 次，throttling 会在每隔 2 秒时执行一次这个函数，而不是在 100 毫秒内执行 10 次事件。

此题是用来考核面试者的JavaScript的综合能力，很可惜到目前为止的将近两年中，几乎没有人能够完全答对，并非多难只是因为大多面试者过于轻视他。

function Foo(){
    getName = function(){alert(1);};
    return this;
}
Foo.getName = function(){alert(2);};
Foo.prototype.getName = function(){alert(3);};
var getName = function(){alert(4);};
function getName(){alert(5);};

请写出以下输出结果：
Foo.getName();  //**2**
getName();  //**4**
Foo().getName();  //**1**
getName();  //**1**
new Foo.getName();  //**2**
new Foo().getName();  //**3**
new new Foo().getName();  //**3**

解析

此题涉及的知识点众多，包括变量定义提升、

this指针指向、运算符优先级、原型、继承、

全局变量污染、对象属性及原型属性优先级等等。

此题包含7小问，分别说下。

第一问

先看此题的上半部分做了什么，首先定义了一个叫Foo的函数，之后为Foo创建了一个叫getName的静态属性存储了一个匿名函数，之后为Foo的原型对象新创建了一个叫getName的匿名函数。之后又通过函数变量表达式创建了一个getName的函数，最后再声明一个叫getName函数。

第一问的 Foo.getName 自然是访问Foo函数上存储的静态属性，自然是2，没什么可说的。

第二问

直接调用 getName 函数。既然是直接调用那么就是访问当前上文作用域内的叫getName的函数，所以跟1 2 3都没什么关系。此题有无数面试者回答为5。此处有两个坑，一是变量声明提升，二是函数表达式。

变量声明提升

即所有声明变量或声明函数都会被提升到当前函数的顶部。

例如下代码:

console.log('x' in window);//true
    var x;
    x = 0;

代码执行时js引擎会将声明语句提升至代码最上方，变为：

var x;
    console.log('x' in window);//truex = 0;

函数表达式

var getName 与 function getName 都是声明语句，区别在于 var getName 是函数表达式，而 function getName 是函数声明。

函数表达式最大的问题，在于js会将此代码拆分为两行代码分别执行。

例如下代码：

console.log(x);//输出：function x(){}
    var x=1;
    function x(){}

实际执行的代码为，先将 var x=1 拆分为 var x; 和 x = 1; 两行，再将 var x; 和 function x(){} 两行提升至最上方变成：

var x;
    function x(){}
    console.log(x);
    x=1;

所以最终函数声明的x覆盖了变量声明的x，log输出为x函数。

同理，原题中代码最终执行时的是：

function Foo() {
        getName = function () { alert (1); };
        return this;
    }
    var getName;//只提升变量声明
    function getName() { alert (5);}//提升函数声明，覆盖var的声明
    Foo.getName = function () { alert (2);};
    Foo.prototype.getName = function () { alert (3);};
    getName = function () { alert (4);};//最终的赋值再次覆盖function getName声明
    getName();//最终输出4

第三问

第三问的 Foo().getName(); 先执行了Foo函数，然后调用Foo函数的返回值对象的getName属性函数。

Foo函数的第一句 getName = function () { alert (1); }; 是一句函数赋值语句，注意它没有var声明，所以先向当前Foo函数作用域内寻找getName变量，没有。再向当前函数作用域上层，即外层作用域内寻找是否含有getName变量，找到了，也就是第二问中的alert(4)函数，将此变量的值赋值为 function(){alert(1)}。

此处实际上是将外层作用域内的getName函数修改了。

注意：此处若依然没有找到会一直向上查找到window对象，若window对象中也没有getName属性，就在window对象中创建一个getName变量。

之后Foo函数的返回值是this，而JS的this问题博客园中已经有非常多的文章介绍，这里不再多说。

简单的讲，this的指向是由所在函数的调用方式决定的。而此处的直接调用方式，this指向window对象。

遂Foo函数返回的是window对象，相当于执行 window.getName() ，而window中的getName已经被修改为alert(1)，所以最终会输出1

此处考察了两个知识点，一个是变量作用域问题，一个是this指向问题。

第四问

直接调用getName函数，相当于 window.getName() ，因为这个变量已经被Foo函数执行时修改了，遂结果与第三问相同，为1

第五问

第五问 new Foo.getName(); ,此处考察的是js的运算符优先级问题。

js运算符优先级:

通过查上表可以得知点（.）的优先级高于new操作，遂相当于是:

new (Foo.getName)();

所以实际上将getName函数作为了构造函数来执行，遂弹出2。

第六问

第六问 new Foo().getName() ，首先看运算符优先级括号高于new，实际执行为

(new Foo()).getName()

遂先执行Foo函数，而Foo此时作为构造函数却有返回值，所以这里需要说明下js中的构造函数返回值问题。

构造函数的返回值

在传统语言中，构造函数不应该有返回值，实际执行的返回值就是此构造函数的实例化对象。

而在js中构造函数可以有返回值也可以没有。

1、没有返回值则按照其他语言一样返回实例化对象。

2、若有返回值则检查其返回值是否为引用类型。如果是非引用类型，如基本类型（string,number,boolean,null,undefined）则与无返回值相同，实际返回其实例化对象。

3、若返回值是引用类型，则实际返回值为这个引用类型。

原题中，返回的是this，而this在构造函数中本来就代表当前实例化对象，遂最终Foo函数返回实例化对象。

之后调用实例化对象的getName函数，因为在Foo构造函数中没有为实例化对象添加任何属性，遂到当前对象的原型对象（prototype）中寻找getName，找到了。

遂最终输出3。

第七问

第七问, new new Foo().getName(); 同样是运算符优先级问题。

最终实际执行为：

new ((new Foo()).getName)();

先初始化Foo的实例化对象，然后将其原型上的getName函数作为构造函数再次new。

遂最终结果为3

最后

就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。