【2020面试真题】这15道面试真题，你能答出几道？

事件起因

含泪忠告：不要在周末没准备的情况下去luo面，不要去luo面，不要去luo面，不要去luo面。一旦被暴击，你的周末和自信心就彻底毁了。

为啥我会这么说？到底咋回事呢？事情是这样的：

这周双休，手机弹出某聘的消息，想着去看看目前前端的概况，就投了简历，然后就开始愉快的玩手机，没一会儿，电话直接来了，问现在方便吗，想简单聊聊，了解一下。我一想，简单聊聊？可以啊，反正才一面，简单聊聊嘛。我就回了个：可以的。没想到，就是这三个字，让我的周末如坐针毡，内心受到了暴击。整个面试过程有的答案似是而非，有的只记得大概，有的直接挠头。到现在，我内心都还平静不下来，也急切的想把题目分享出来，让更多的人看到2020的真实情况。答案没有细细整理，只有思路，语言大家自己组织就好。

来吧，一起来感受下我是如何受到暴击的吧！！！

事件经过

1.JS是一门面向对象的语言，说说面向对象语言的三大特征？

答：这个简单，我自信满满的说：封装、继承、多态。面试官轻声嗯了一下。我的自信心 +1，心想，还行。

2.说说你是如何理解JS中封装、继承这两个特点的？

答：完了，给自己挖了个坑，都是套路。
封装指的是隐藏逻辑实现过程，只对外暴露属性和方法，使用者只需要知道如何使用即可，而不需要关心内部如何实现的，目的在于简化实现过程，做到多处复用，提高开发效率，当需要维护的时候，业务逻辑和工具功能是分开的，降低迭代成本。
继承指的是建立一个对象与另一个对象之间的父子关系，使得子对象可以拥有父级对象的属性和方法。继承的目的在于实现功能共享，通过“借用”父对象的特性，从而避免重复写功能模块，避免多余内存空间的占用。

3.JS中函数继承主要继承的是什么？可以继承函数体吗？为什么？

答：眉头一皱，发现事情并不简单，合着前三个问题都是逐渐深入细化的啊，内心直言，太可怕了，都是想好的套路啊。还好之前了解过一点，也勉强可以抵挡一下：JS函数的继承主要继承的是函数名，没办法实现函数体继承，至于为什么，记得不是太清楚了。内心开始焦躁，好像记得，但又记不清了。自信值开始降低~

4.声明一个函数fn,对其使用typeof,结果返回什么？然后我给fn添加一个属性，请问会报错吗？为什么？

答：主要考察类型检查，难不倒我。结果返回是function字符串。添加属性不会报错，因为在js中，函数并不是真正的函数，function本身是一个object对象，而对象是可以添加属性和方法的，所以不会报错。自信又回来了一点点~

5.定义一个字符串，对这个字符串使用typeof，结果返回什么？既然返回结果是string，而属性和方法是对象才有的，那为什么会在我定义的字符串上可以使用split，join()，length等方法和属性？

答：怎么又是typeof,刚刚不是刚问过吗？管他呢，直接答：字符串形式的string。
噢，原来在这等着呢，是想考原型和原型链啊，不怕，懂一点：在JavaScript中，全局环境存在在简单数据类型的对象，String对象就是其中一个，所有的字符串都是这个对象的实例，当我们对字符串使用方法和属性时，其实字符串本身并没有对应的方法，这个时候，JavaScript会沿着原型链往上寻找，最终在对象String上找到了对应的方法和属性，而这个过程对于开发者是无感的，所以看上去像是调用了字符串本身的方法。自信心再加一~

7.ES6中，promise能实现异步的原理是什么？我new一个promise,然后对这个promise实例使用typeof，结果是什么？promise实例接收的参数是一个函数，函数接收两个参数一个resolve,一个reject,为什么resolve后可以实现继续执行后续代码？

答：啊，这~，磨叽了半分钟，原理啊，记不太清了，使用typeof返回的是字符串形式的object；至于为什么可以继续执行，这个不太清楚。自信值下降中~
面试官：没关系，不会也不要紧，那我问你简单的几个CSS问题吧。
我：行（内心：之前还看过promise原理的，怎么就没详细看看呢，算了，先面后面的吧~，CSS应该简单点）。

8.我有一段文字，但不知道多长，如何实现单行文本居中，多行文本居左显示？

答：啊，这~

这不是CSS吗？我为啥没思路啊。我试探性的问面试官:"是用一个属性实现吗？"试图拖延时间，再仔细想想，顺便套点信息。
面试官毫不犹豫的回答：甭管几个属性，能实现就行。
我：啥信息也没捞着，只能说，没思路。
后来才知道，考查flex，单行的时候文本不足会居中，多行会自动折行居左:

display: flex;
flex-direction: row;
justify-content: center;

9.我想实现一段动画，我有哪些可选的实现方式？一段流畅的动画帧与帧之间间隔有什么要求？

答：html5动画，js动画，CSS3动画。多数情况下最高的绘制频率只能是每秒60帧(frame per second)，对应于显示器的60Hz，低于这个频率，肉眼感觉画面卡顿不流畅，高于这个频率，及其耗费性能。因此通常采用的时间间隔就是1/60,也就是16.7ms。

10.React中的setState什么时候是同步的什么时候是异步的？为什么原生方法和事件能实现同步？

答：这个我知道：原生事件和方法情况下是同步的，React中封装的事件都是异步的。为什么？这个……这个……之前看过，忘了。暴击+1

11.vue熟悉吗？你用过nextTick吗？作用是什么？让你自己实现一个nextTick,说说你的思路？

答：这个了解一点，nextTick用于在DOM更新完成之后执行回调函数。实现思路嘛，暂时没想好。暴击+1

12.你认为前端工程化包含哪些内容？代码模块化会带来什么问题，有什么缺点？

答：终于到了比较大的问题了，大概说了以下内容：

工程化是前端项目高效开发的总称，它包括：构建、部署、日志监控自动化，项目模块化，书写规范化，结构可视化，测试单元化等等。
由于模块化会将整体功能碎片化，查找内容时需要回溯查找，并且还需要引入构建工具，将模块按依赖关系打包，增加了额外的成本……
由于问题比较大，前面的问题已经把我问懵了，所以这里虽然有话可说，但说的并不好。暴击+1

13.react和vue改变数据的方式设计理念有什么不同？

答：只简单说了二者数据流与页面的关系的差异，没有拓展开，觉得面试官没有很满意。

14.react的diff算法和vue的diff算法你认为有哪些差异？

答：这个问题得详细了解二者之后才有对比性，这块大家自行总结，我的答案觉得不是很好。

15.说说你对前端目前发展的认知？

答：开放题，考察思维认知和发展规划，大家仁者见仁智者见智。

事件结果

面试官：大致情况了解了，我们会根据结果认真评级的，有通知人事会及时通知的，今天大概就聊到这里了。我：心态已崩……

我有话说

还没来得及细细去整理答案，就含泪把毒打经历发出来了，就是希望能让更多知识点薄弱的同学早点去补强。

结果肯定是凄凉的，我在文中列出了心情变化，细心的小伙伴肯定发现了，心情动态图大致是如过山车，有区分度的题目都是放在提升自信心之后的，不仅考察知识掌握能力，还考察心态调整和面对困难解决的应变能力，大家再去面试前既要做到巩固知识，同时做好心理准备，防止面试中的心理战，不打无把握的仗。

不说了，抹完这把眼泪，我要去补洞了，越说越感觉脑瓜子嗡嗡的。

以上就是面试真题，已经毫无保留的更新出来了，大家可以用来自测。