前端面试题记录

1、防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法

2、节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

3、原型原型

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

function Person(){
  this.name="张收"
  this.age=20
  this.run=function(){
    alert(`${this.name}在跑步`)
  }
}
function Web(){

}
Web.prototype=new Person();
let we=new Web()
we.run();
we.work()

4、闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

5、ES6新特性

let和const命令、字符串扩展、模板字符串、箭头函数、数据解构、set和map

6、JS数据类型

Undefined、Null、Boolean、Number、String

7、sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

8、宏任务微任务

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

9、Promise原理

在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。　　　　

(1) promise 对象初始化状态为 pending。　　　　

(2) 当调用resolve(成功)，会由pending => fulfilled。　　　　

(3) 当调用reject(失败)，会由pending => rejected。　　

需要记住的是注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变。

参考：1.https://www.jianshu.com/p/fc5030e725ae

           2.https://www.jianshu.com/p/43de678e918a

10、vue双向绑定

Vue是采用数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

https://www.cnblogs.com/webcabana/p/11077628.html

11、hash模式和history模式

两种路由的区别：

hash模式的好处就是锚点，刷新页面的时候不会像服务器发送请求，同时不支持服务端渲染（不能支持seo优化）不会产生404

history特点是路径漂亮，没有#和正常页面切换一样，如果刷新页面会向服务器发送请求，如果资源不存在会出现404，解决方案，渲染首页，首页会根据路径重新跳转

12、高阶函数

https://www.cnblogs.com/goloving/p/8361705.html

13、高阶组件

https://www.jianshu.com/p/85f165ca002c