(转)一篇很是不错的前端面试文章

原文地址：http://blog.sourcing.io/inter...

文章来自翻译，其中忽略了一些可有可无的内容直入主题。

做者前后在twitter,Stripe工做，期间会参加面试工做。实际上参加面试工做的人都知道要想在一个较短的时间内（30min-1h）就对一个应聘者作出判断实际上是很难的，所以咱们不得不想尽办法去更加合理的去判断面试者。下面是做者理出的一个思路:

若是对方有github帐号，咱们会尽量的去了解TA在开源项目上的动态和他的开源项目。咱们也会从中挑出一些切入点，经过交流他作这个项目的出发点也可以更好的了解面试者的设计思路，也能够初步的去判断该人是否是适合团队。若是双方交流顺畅，接下来会直接进行到代码等一些基础问题上来。

本身的面试会很实际，几乎所有都是coding,不多会提到算法和一些抽象的概念。本身提出的问题看似简单，可是每一点都涉及到javascript的一些知识领域。

面试的时候并不建议使用白板，一般但愿面试者本身带上本身的笔记本，或者就使用本身的。我会将他们的代码运行，并告知结果。

Object prototype
我起初会提出一个很是简单的问题就是定义一个函数spacify ,将一个字符串做为参数传入，而后返回一个字符串，不过该字符串相对原有传入参数的变化是字母与字母之间多了一个空格。

spacify('hello world') // => 'h e l l o  w o r l d'

虽然问题很简单，但这倒是一个很好的开始，咱们接下来的问题即可以围绕此展开, 尤为对于那些声称本身了解Javascript，但实际却连一个函数都不会写的面试者高下立判。

正确的答案以下，不过一些面试者或许会选择for循环，固然这并无错

function spacify(str) {  
  return str.split('').join(' ');
}

接下来，我会继续问如何将这个函数直接做用在一个字符串对象上.

'hello world'.spacify();

这个问题可让我了解面试者对原型链的理解，这个问题可让彼此展开一些有讨论，诸如直接在原型链上定义属性的危害等等.实际期待结果:

String.prototype.spacify = function(){  
  return this.split('').join(' ');
};

通常到这里我会让面试者讲讲函数声明和函数表达式的区别。
Arguments

接下来，我会去了解面试者对于 arguments的理解，咱们会要求面试者定一个log函数。

log('hello world');

函数相似实现一个简单的控制台输出，在控制台输出传入的字符串。一边面试者都会在定义的函数里直接写console.log，不过仍是有更优秀的面试者会直接使用apply。

function log(msg){  
  console.log(msg);
}

接下来，我会继续问若是我传入多个参数依旧输出一个字符串 ，我会提示面试者传入的 参数是不固定的，我会暗示做者console.log实际上也接受多个参数。

log('hello', 'world');

不过我仍是但愿您的面试者如今已经想起apply;面试者可能会在apply和 call上困惑，这个时候我会作点小提示，不过将console上下文传入也是很是重要的.

function log(){  
  console.log.apply(console, arguments);
};

接着我会继续追问，若是我但愿在那个输出的字符串前统一加上(app) 这样的字符串，相似于这样:

'(app) hello world'

这个问题明显会复杂不少，面试者应该知道arguments是一个伪数组，咱们须要先将它转换成正常的数组，咱们可使用Array.prototype.slice,代码以下:

function log(){  
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');

  console.log.apply(console, args);
};

Context

接下来我想了解面试者对于上下文以及this的理解，我会给出下边的代码，让面试者去解释count的值。

var User = {  
  count: 1,

  getCount: function() {
    return this.count;
  }
};

接下来我会给出下面的代码，让面试者去回答应该输出的正确答案。

console.log(User.getCount());

var func = User.getCount;  
console.log(func());

上面的例子中正确输出1和undefined。实际上不少面试者都会在这里跌倒。func的上下文是 ｀window，所以已经失去了count属性。接下来我回继续追问面试者如何确保func的上下文始终都和User关联，这样可使输出的答案是1。

正确答案是使用Function.prototype.bind，代码以下:

var func = User.getCount.bind(User);  
console.log(func());

这个时候我会让面试者去进行完善，若是老的浏览器并不支持该方法，咱们应该怎样去兼容。部分基础较差的面试者会比较纠结，可是我的认为任何一位前端工程师都应该对apply和call有着较为深入的理解。

Function.prototype.bind = Function.prototype.bind || function(context) {  
    var self = this;

    return function(){
        return self.apply(context,   arguments);
  };
}

Extra points if the candidate shims bind so that it uses the browser's native version if available. At this point, if the candidate is doing really well, I'll ask them to implement currying arguments.
一个弹窗库

面试的最后y一部分，我会要求面试者写点实际的东西。这个很是有用，足以了解前端的技术栈。若是前面的问题回答的较为理想，这个问题，我会很是迅速的展开最后一个问题的考察。

虽然最终效果取决于面试者的实现，可是这里依旧有足够的考察点。

最好不使用 position:absolute而是position:fixed，这个时候即便窗体有滚动，也能够很好的遮罩住全局。我会提示面试者这样使用，而且追问这二者的区别。

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.8);
}

如何将里面的内容居中也是一个很是重要的考察点。一些面试者会使用绝对定位，而有的面试者则更擅长使用Js。

.overlay article {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
}

我会继续问，如何确保点击遮罩层时遮罩层是关闭的？这个问题能够将咱们的讨论落脚到 冒泡中来。不少面试者都会直接将点击实践绑定到遮罩层上。

$('.overlay').click(closeOverlay);

这个接下来能够工做了，可是你会发现若是点击了遮罩层中的子元素，遮罩层也会关闭。解决方案是即是判断event target ，而且保证 这个时间不会冒泡。

$('.overlay').click(function(e){
  if (e.target == e.currentTarget)
    closeOverlay();
});

尾声

固然前面的知识点仅仅是前端的一部分，实际上你还能够问:性能，HTML5 APIs， AMD vs CommonJS modules，constructors，数据类型，以及盒子模型。我常常都会随着面试者的进行去选择相应的问题。

最后推荐你们均可以去看下Front-end-Developer-Interview-Questions 以及 JavaScript Garden.

转自 一篇很是不错的前端面试文章