一部分前端面试题

一部分前端面试题

面试篇（https://github.com/qiu-deqing/FE-interview（github的面试题））

1、cookie、sessionStorage和localStorage的区别（主要考察对本地存储方式是否熟悉）

（首先先说一下各自的作用）

• cookies:网站标记用户身份的一段数据，通常是一段加密的字符串，并且在默认情况下只会在同源（同源：用域名、同端口、同协议）的http请求中携带
• sessionStorage：它是浏览器本地存储的一种方式，以键值对的形式进行存储，存储的数据在关闭浏览器后自动删除
• localStorage：它也是浏览器本地存储的一种方式，和sessionStorage一样，以键值对的形式存在，数据除非主动删除，否则数据将一直存在

2、display：none和visibility:hidden的区别（css问题）

（共同点和不同点都要回答）

• 共同点：都是可以使元素不可见
• 不同点：
  • display：none会让元素从渲染树中消失，不渲染时不占据任何空间。而visibility:hidden不会让元素从渲染树中消失，且会持续占据空间，只是内容不可见
  • display：none是非继承属性，子孙节点消失是因为元素从渲染树中消失而造成的，通过修改子孙节点的属性无法显示。而visibility：hidden是继承属性，子孙节点消失是因为继承了hidden，通过设置visibility：visible可以使子孙节点显示

3、为什么要初始化Css样式

• 因为浏览器的兼容问题，使不同的浏览器对一些标签的默认样式是不同的，而且默认样式会影响项目的最终布局。如果没有对CSS初始化，那么可能会出现浏览器之间的页面显示差异

4、什么是postcss，以及postcss有什么作用

• 首先postcss是一个平台
• 基于这个平台，可以使用一些插件，来优化我们的css代码。比如说：autoprefixer插件，它就基于postcss使用，作用是帮助我们为css增加上不同的浏览器前缀

5、解释一下什么是闭包？以及闭包解决了什么问题？

• 闭包就是能够读取其他函数内部变量的一个函数。通常情况下，我们会在一个函数中创建另一个函数，然后通过新创建的这个函数访问上一层函数的局部变量，被访问到的局部变量始终保存在内存之中。

6、原型和原型链分别是什么？有什么特点？

• 每一个函数都有一个prototype属性，这个属性会指向一个对象，而调用该构造函数创建的实例的原型，可以通过实例对象的__proto__来访问这个原型对象
• 实例在创建的时候，就会默认关联原型，并且从原型继承属性。
• 而每一个原型对象又存在一个constructor属性，这个属性会指向关联的这个构造函数
• 当访问一个实例对象的属性的时，如果说这个实例对象中没有这个属性，那么JS引擎就会去该实例对象的原型对象中去找。
• 如果属性在原型对象上也找不到，那么就会去原型的原型上去找，一直找到最上层的原型，也就是Object为止。

7、谈谈对this对象的理解

• this总是指向函数的直接调用者
• 如果有new关键字，this指向new出来的那个对象（当我们new一个构造函数时，构造函数中存在this，this指向new出来的那个对象）
• 在事件中，this指向触发这个事件的对象，（特殊的是，IE中的attachEvent中的this总是指向全局的Window

8、谈谈webpack的看法

• Webpack是一个JS的模块打包工具，可以使用webpack管理项目中的JS模块依赖
• webpack提供了一些默认配置，比如devServe，我们可以利用devServe来快速启动一个开发时的web服务器
• 因为webpack只能打包JS文件，所以它提供了loader的概念，我们可以使用loader来预处理一些文件，并且可以打包除JS之外的任何静态文件
• 另外webpack还提供了插件的概念，我们可以在webpack上使用很多插件来做一些辅助性的工作，比如HtmlWebpackPlugin，可以创建HTML文件

9、谈谈promise的了解

• 首先promise是ES6提出一个异步编程的解决方案，主要是解决回调地地狱的问题，可以使异步操作更优雅
• ES6规定了promise是一个构造函数，我们需要通过new生成一个promise实例对象。
• 而且promise的构造函数接受一个函数作为参数，函数中的代码在new Promise时会立刻执行，我们可以再这里去执行异步代码的操作，并且的这函数默认存在两个参数，分别是resolve和reject，这两个参数也是函数，用来标记异步执行的状态
• 比如resolve是异步操作成功时调用的函数，而reject是异步操作失败时调用
• 这些标记的状态我们可以通过promise实例对象的.then和.catch方法接收。其中then是异步完成的回调，catch是异步失败的回调

10、null和undefined的区别是什么

• undefined是表示不存在这个值，它是变量最原始的状态
• null:它是一个具体的值，只不过这个值是一个空值而已

11、什么是同步？什么是异步？他们的区别是什么？

• 同步：线程被阻塞，等待任务返回结果
• 异步：异步就是线程不会被阻塞，任务完成通知JS引擎

12、什么是eventLoop（JS的一个线程机制）

• 首先，JavaScript语言的一个特点是单线程，这就意味着同一时间只能做一件事，所有的任务都需要排队，上一个任务结束，才能执行下一个任务。如果上一个任务耗时很长，后一个不得不一直等待
• 于是，所有的任务分为两种，一种是同步任务，另一种是异步任务。
• 同步任务是指，在主线程上排队执行的任务，只有前一个任务完成，才能执行下一个任务。
• 异步任务是指，不进入主线程，而进入“任务队列”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
• 而当主线程中的任务完成之后，主线程从“任务队列”中读取事件，这个过程是循环不断的，这就是EventLoop（事件循环）

13、bind、call、apply的区别

• call和apply都是为了解决改变this的指向。作用都是相同的，只是传参的方式不同。
• 除了第一个参数外，call可以接收一个参数列表，apply只接收一个参数数组。
• bind和其他两个方法的作用是一致的，只是该方法会返回一个函数，并且我们可以通过bind实现柯里化

14、typeof和instanceof的区别

• typeof会返回一个值的类型，对于基本数据类型，除了null都可以返回正确的类型。而对于null则会返回object，这是JS的一个bug，而对于引用数据类型来说，除了函数外，其他的都是返回object
• instanceof它是用来判断一个对象是否是另一个对象的实例，它只能用来判断对象

15、对vue生命周期的理解

• Vue实例从创建到销毁的过程。总共分为八个阶段创建前/后、载入前/后、更新前/后、销毁前/后

16、vue双向绑定的原理

• vue实现双向绑定主要是采用数据劫持结合发布者-订阅者模式的方式。
• 数据劫持是通过Object.defineProperty()来劫持对象的各个属性的setter、getter。
• 发布者-订阅者模式是在数据变动时发布者发布消息给订阅者，触发相应的监听回调。
• 总的来说就是当把一个普通JavaScript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性。用Object.defineProperty()监听它们的getter/setter方法。这样，它们就可以让Vue追踪依赖，在对象的属性被访问（get）和修改（set）时通知变化。

17、 Vue如何实现参数传递

• 父组件给子组件传值：子组件通过props属性接受数据
• 子组件给父组件传值：子组件通过$emit方法传递参数
• 兄弟组件传值：兄弟组件之间其实没有任何的相互依赖关系，也就是说他们之间其实没有关系，对于没有关系的两个组件，想要实现数据传递，那么需要有一个第三方，通过这个第三方来为没有关系的组件建立关系。目前比较通用的方式主要有两种
  • 一个是eventBus方案。建立一个事件中心，通过它传递时间来进行火速局传递
  • 第二个是通过vuex来进行数据共享

18、说一下VueRouter路由的hash模式和history模式

• hash模式：是vue-router的默认模式，使用哈希，URL会出现#号字符，#以及#后面的字符称之为哈希（hash）。特点是hash虽然在URL中，但不被包括在HTTP请求中
• history模式：国内上线项目使用的比较多的还是history模式，这种模式下URL中不会存在#这种难看的额字符。不过这种模式需要后台的配合，因为Vue打包的项目通常是一个单页应用，也就是任何的URL其实指向的都是一个HTML文件，所以我们要在apache或nginx中配置，当URL匹配不到资源时，指向一个html页面的配置。

19、KeepAlive的作用

• 作用是：缓存不活动的组件实例，主要用于保留组件的状态或避免重新渲染