前端面试那些事

项目相关

自我介绍：职业经历，项目经历
选一个你觉得印象最深的项目讲一讲，然后会从项目里面切入到 web 基础（html/css/js），这一块大概会聊 20-30 分钟，所以一定要提前选好一个自己做过的得意的项目，花一点时间捋一捋你觉得项目中出色的点，用到了比较 hack，比较酷炫的方法解决了哪些痛点。

JS 基础（ES5）

原型：这里可以谈很多，只要围绕 [[ prototype ]] 谈，都没啥问题
闭包：牵扯作用域，可以两者联系起来一起谈
作用域：词法作用域，动态作用域
this：不同情况的调用，this 指向分别如何。顺带可以提一下 es6 中箭头函数没有 this, arguments, super 等，这些只依赖包含箭头函数最接近的函数
call，apply，bind 三者用法和区别：参数、绑定规则（显示绑定和强绑定），运行效率（最终都会转换成一个一个的参数去运行）、运行情况（call，apply 立即执行，bind 是return 出一个 this “固定”的函数，这也是为什么 bind 是强绑定的一个原因）。
注：“固定”这个词的含义，它指的固定是指只要传进去了 context，则 bind 中 return 出来的函数 this 便一直指向 context，除非 context 是个变量

变量声明提升：js 代码在运行前都会进行 AST 解析，函数申明默认会提到当前作用域最前面，变量申明也会进行提升。但赋值不会得到提升。关于 AST 解析，这里也可以说是形成词法作用域的主要原因

这里如果面试官问到2，3，4，5，6中的一点，你能够把2，3，4，5，6整理到一起，串联起来进行统一的回答效果极佳

具体参考 从指向看JavaScript

JS 基础（ES6）

let，const：let 产生块级作用域（通常配合 for 循环或者 {} 进行使用产生块级作用域），const 申明的变量是常量（内存地址不变）
Promise：这里你谈 promise 的时候，除了将他解决的痛点以及常用的 API 之外，最好进行拓展把 eventloop 带进来好好讲一下，microtask、macrotask 的执行顺序，如果看过 promise 源码，最好可以谈一谈 原生 Promise 是如何实现的。Promise 的关键点在于callback 的两个参数，一个是 resovle，一个是 reject。还有就是 Promise 的链式调用（Promise.then()，每一个 then 都是一个责任人）。
详细参考 my-promise

Generator：遍历器对象生成函数，最大的特点是可以交出函数的执行权
function 关键字与函数名之间有一个星号；
函数体内部使用 yield 表达式，定义不同的内部状态；
next 指针移向下一个状态
这里你可以说说 Generator 的异步编程，以及它的语法糖 async 和 awiat，传统的异步编程。ES6 之前，异步编程大致如下

回调函数
事件监听
发布/订阅
传统异步编程方案之一：协程，多个线程互相协作，完成异步任务。

async、await：Generator 函数的语法糖。有更好的语义、更好的适用性、返回值是 Promise。
async => *
await => yield
基本用法

async function timeout (ms) {
await new Promise((resolve) => {
setTimeout(resolve, ms)
})
}
async function asyncConsole (value, ms) {
await timeout(ms)
console.log(value)
}
asyncConsole(‘hello async and await’, 1000)
注：最好把2，3，4 连到一起讲

AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点
AMD：requirejs 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置
CMD：seajs 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近
CommonJs：模块输出的是一个值的 copy，运行时加载，加载的是一个对象（module.exports 属性），该对象只有在脚本运行完才会生成
ES6 Module：模块输出的是一个值的引用，编译时输出接口，ES6 模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。
CSS相关

左边定宽，右边自适应方案：float + margin，float + calc
/* 方案1 /
.left {
width: 120px;
float: left;
}
.right {
margin-left: 120px;
}
/ 方案2 /
.left {
width: 120px;
float: left;
}
.right {
width: calc(100% - 120px);
float: left;