这里有一份 JavaScript 高级面试题，请来回答

金三银四

三月份和四月份，一年一度的跳槽旺季又开始了。很多自我的升级都必须通过跳槽来解决，例如想增加薪酬、想换个好一些的平台和环境、想进一线互联网公司、想去创业公司当 CTO 等等。作为前端工程师的你，是否有跳槽的想法？且是否已准备好了？

前端工程师的技术面试分为好多方面，除了本节要讲的 JavaScript 之外，还有 CSS HTML ，以及所有的技术岗位都会考察的工作经验、软技能等。内容这么多，一篇文章肯定盛不下，本文先关注最主要的部分 —— JavaScript 常考的面试题。

先不急进入主题，再缩小一下范围 —— 本文只会关注一些 高级 的 JavaScript 面试题。原因就是目前是有工作经验的同学跳槽的旺季，而这部分同学一般基础知识都过关，缺一些高级知识。

那么什么是“高级”？简单说来，就是面试官希望你在具有基础知识、能满足基本开发任务的情况下，还需要具备：了解语言的原理、了解框架的实现、了解环境的变化 —— 有了这些高级知识，你就可以更高效、稳定的编码，你就更靠谱。

现在竞争这么激烈，你不拿出点和别人不一样的真本领，怎么脱颖而出？

下面进入正题，先把题目列一下，根据题目先自己考虑如何回答。注意，这些题目都是分布在不同的知识区域、很具有代表性的题目，并不是瞎拼的。

• 自己开发的框架或者库，如何使用原型？
• 目前 JS 对于异步的解决方案有哪些？
• 常用的 ES6 的语法有哪些？
• vue 如何解析模板？
• React 的 setState 为何是异步渲染？
• hybrid 和 h5 有何区别？

下面会单独针对每个题目做分析，文章内容有限，无法分析到细节，不过我会给出提示和回答的方法。如果你还不是很清楚，可以去参考其他的资料，都是大众的知识点，资料很多，只要你愿意去查。

对于 JavaScript 原型的考察，应该算是基础知识的一部分。但是，基础知识考察的只是原型的理论，而高级知识考察的是原型的实际使用。我们使用的绝大部分第三方框架或者库，源码中都有原型的使用。如果你不能熟练使用原型，你能自己写框架或者库？—— 大家应该明白我的意思了吧。

所以，这里要考察的是原型如何在实际的框架和库中去使用。对于这个问题，如果你没有亲自写过框架和库，且对原型不是很熟悉，那么我建议你看一下 jQuery zepto 中是如何使用原型的。这也算是站在巨人的肩膀上吧，毕竟都是如此优秀的库。

jQuery 的资料自己上网去找找吧，给大家推荐一个免费的讲解 zepto 原型的视频资料 《zepto设计和源码分析》。

异步是 JS 永恒的话题，自动 web 2.0 有了 Ajax 开始，到现在 nodejs 盛行，人们就一直没有停止对异步的讨论。大家有没有考虑过为何异步这么受欢迎？—— 因为异步和业务场景的结合实在太紧密了。在复杂的业务场景中，你要能一眼就识别出来哪些是异步，而且要找到最佳的解决方案，否则这里就是一个坑。

这里没有问“JS 中有哪些场景是异步”，因为这个问题如果只回答“图片加载、ajax”等没有什么意义，异步是要结合实际业务说的。因此这里提问异步的解决方案，我列一下，你来看看自己是否都全部了解。

• deferred （jQuery 或者 zepto 中）—— 注意，这块很多同学不知道，可以多去查查相关资料，因为 jQuery 和 zepto 目前还有很多、很多、很多项目在用！！！
• Promise（ES6 或者第三方库，如 q.js bluebird.js），不仅要知道怎么用，还要熟悉 Promise 的标准
• Generator（从 koa 升级 2.x 之后已经不再常用）
• async/await （ES7 草案）

能说出以上几点，这个问题基本满分。你有哪部分还没了解清楚，赶快去查一下。

不了解 ES6 的同学可以先去看看 《ECMAScript 6 入门》 教程。

虽然目前浏览器对 ES6 兼容性不好，但是 ES6 已经在开发环境很普及了，因此要考察 ES6 的语法。那这个也算是高级知识吗？—— 算！因为 ES6 刚刚普及没多久，总有一些人躺在舒适区、不思进取、不学习新内容，通过 ES6 的考察把他们给刷掉。

看 ES6 的书籍或者博客，内容还是挺多的，但是日常实际使用的功能并没有那么多。这里我列举几个常用的，你对照着去考察自己是否掌握全面

• Module
• Class
• Promise
• 箭头函数
• 搭建 ES6 编译环境

附：最后一项“编辑环境”大家一般都使用 webpack ，但是你知道 rollup 吗？ React vue 都在使用 rollup ，你如果不知道的话，面试就要丢分了。

不了解 vue 的同学可以先去 vue 官网 看一下相关文档。

作为前端从业者你应该很清楚，现在不知道 vue React 别说是跳槽，校招都不一定能通过，因此了解、使用过 vue React 这已经是基础知识的行列了。这块的高级知识应该升级到对 vue React 的实现是否了解（不用精通各个细节，了解过程即可）？—— 例如本题目，是否了解 vue 如何解析模板？

你可能还会疑问：干嘛要问框架的实现，工作中也用不到啊？我会使用框架不就完了吗？ —— 我可以通过一个大家都亲身经历的例子来说服你。

• 例如，大学招生时都想要智商高、学习能力好的学生，怎么办？—— 高考。除了高考，还有其他更公平的方式吗？
• 同理，企业想要招聘编程能力强、总结能力好、热爱且持续学习的员工，怎么办？—— 考察框架原理是一个重要而且简单有效的途径。除此之外，大家想想还有什么其他简单高效的手段？

先摆正思想，然后再看这个题目：是否了解 vue 如何解析模板？简单来说，模板解析分位三步

• 模板就是一段字符串，非结构化的数据，没法分析。因此，第一步是将非结构化的模板字符串，转变成结构化的 JS 对象，抽象语法树，即 AST 。其实就是一个 JS 对象，这样就结构化了。
• 第二步，将 AST 转换成一个 render 函数，步骤是先转换为一段函数体的字符串，然后再用new Function(...)生成函数。
• 第三部，渲染时执行 render 函数，返回虚拟 DOM 对象，然后执行虚拟 DOM 的patch方法，渲染成真正的 html 。

以上过程的细节是非常复杂的，要全部写出来都够出半本书了，因此你也没必要啥细节都知道。面试官如果问到你这个问题，只回答这三步过程即可，不用说的太细，否则太啰嗦太耗费时间。

不了解 React 的同学可以先去 React 官网 看一下文档。虽然目前 vue 比较火，但是 React 也绝对不能放过，国内来看，两者还是各有很多用户群体。

这个问题其实很简单，只是很多同学没有考虑到。答案就是：为了防止一次性执行多次setState而带来的渲染性能问题。即，你如果连续不断执行 100 次setState的话，那么 React 是否有必要渲染 100 次？—— 肯定没必要。第一，浏览器会卡死；第二，用户只需要看到最后的结果即可，不用关心前 99 次的过程。

至于为何好多人考虑不到，我也常常思考这种原因。在我看来，如果你长时间不去主动的看博客、看编程方面的新闻、关注新框架，你就会出现这种思想滞后的问题，即“跟不上节奏”。因此，作为相关从业者，大家还是应该多看，然后多想，多问几个为什么。

你每天用微信、支付宝、头条等各种 app 看过的信息，有多少是用前端代码（JS CSS HTML）写出来的界面？你知道吗？—— 至少会占到 50% 以上，是否没想象到？

前端代码（JS CSS HTML）参与到 app 中进行混合开发，是目前 app 开发很常见的方式，其中 hybrid 就是应用最广泛的一种解决方案。很多同学没做过 hybrid 开发，但是没做过不是你不会用且不去学习的理由！

本题目是面试官考察 hybrid 经常问的一道题，最主要的区别在于：

• hybrid 是通过file协议加载的本地文件，h5 是通过http协议加载的网络文件，前者速度快。
• hybrid 是通过为不同版本打包进行更新，而 h5 没有版本的概念，每次都获取服务端的最新版。
• hybrid 更加依赖于客户端的能力，因此会更多的和客户端通讯，而 h5 基本用不到和客户端通讯。

说出这几个区别，该问题基本 OK 。其中的重点是 hybrid 包版本更新的流程，以及 JS 和客户端通讯的原理。这两者详细讲来的话，内容都很多，因此这里不详细展开了。

还有不少同学以为 nodejs 就是 JS 知识体系的一部分，和原型、闭包、vue、React 一样 —— 真的不是！不是！不是！

nodejs 是 server 端的开发技术，并不是前端的，它和前端唯一的交集就是使用了 JS 作为开发语言。而想成为一个合格的 server 端工程师，是只熟悉一门语言的语法就够了的吗？—— 你完全可以花两周轻松熟悉完 php 的语法，但是到时候你就是一名合格的 server 端工程师了吗？

因此，nodejs 不适合在这里讲，多说无益。nodejs 应该另外专门写一篇文章，在那里独霸一方，而不是在这里寄居。

如果一开始拿到题目你已经了解答案，那你很优秀。如果经过本文的分析，你能感觉到这些问题的重要性且开始补习，那再过一段时间你将看到自己的进步。如果经过本文的分析，你对这些问题还是云里雾里，那建议还是多从基础知识抓起，先别急于求成。

各位，加油！共勉！