前端面试总结

1、什么是闭包，闭包的应用场景

• A:什么是闭包：所谓的闭包就得从变量提升说起，在js中全局作用域不能访问局部作用域内的变量，而局部变量可以访问全局变量；

  在函数执行前会产生执行期上下文也叫作用域，有全局作用域(window)，和局部作用域(执行时产生的)，一般函数执行完成后；

  他的作用域就会被销毁；闭包就是相当于你在执行该函数后，没有执行完成，也就是该函数的作用域没有被销毁；紧接着又产生了一个新的作用域

  一般函数默认返回的是一个undefined，所以执行到最后，相当于函数执行完了他的执行期上下文就会被销毁；但是闭包返回的是一个函数，说明

  返回回来又是一个新的函数，新的函数又会产生一个新的作用域，只有当你执行该return返回的函数时该函数才会被销毁，如果没有执行则该作用域

  就会一直存在该内存中等在执行，所以这就是闭包的为什么会存在内存泄露，想要解决这种情况，就可以使用立即执行函数

• B:应用场景，一般情况在节流与防抖中会使用闭包，或者可以污染全局变量，还有属性私有化；

2、使用过哪些es6的语法

• 1、const let
• 2、解构
• 3、模板字符串
• 4、类
• 5、promise
• 6、set map

3、基本数据类型和引用数据类型，如何深拷贝

• 1、基本树类型：string number boolean null undefined
• 2、引用数据类型：Object Array Function Date RegExp
• 3、深拷贝的方法：
  • a、使用JSON转换：
    • 1、先使用JSON.stringify把值转换为字符串格式，然后在JSON.parse转换成对象或者数组；
    • 2、优缺点：如果对象里面有函数，则该函数无法拷贝；如果对象原型链上有属性和方法也无法拷贝
  • b、迭代递归方法
  • c、Object.assign方法，不过该方法仅限于一级拷贝，如果二级的话还是浅拷贝
  • d、es6的解构这个方法和Object.assign一样仅限于一级深入拷贝，二级深入就是浅拷贝

4、如何区分是否是数组

• 1、A instanceof B 看A对象的原型链上 有没有B的原型
• 2、Object.prototype.toString.call();
• 3、constructor： arr.constructor===Array;
• 5、css如何引入自定义字体 首先下载好字体文件
  @font-face{font-family:'随便的字体名字';src:'文件路径'}
  在哪里用到这个字体就可以在该标签下加上font-family:'字体名字'就可以了，如果字体太大的话可以使用字体蜘蛛进行压缩

6、说说对mvvm的理解

自己的理解：所谓的mvvm叫model-view-viewModel;
model相当于数据模型，可进行定义数据修改和操作数据的业务逻辑；
view相当于UI组件把数据模型通过UI展示出来；
viewModel是一个同步view和model的对象
在Mvvm架构下，view和model之间是没有直接联系的，他们是通过ViewModel进行交互的，model和viewModel之间的交互是双向的，
因此View数据的变化会同步到Model中，而Model数据变化也会立即返回到View上

7、vue的生命周期钩子函数

8、computed与watch的应用场景

computed:多用于数据计算和字符处理；
watch:多用于处理事件交互

9、watch如何进行深度监听，监听对象属性

在watch中加入deep:true就可以深度监听对象属性变化
如果想要单独监听某个属性可以使用字符串形式'obj.属性名'的方法监听

10、vue路由的两种模式

1、history模式:使用的是h5的history.pushState方法，然后通过监听popstate来设置内容
2、hash模式：去监听浏览器的hashchange方法，然后在location.hash拿到对应的路径，然后再渲染

11、路由守卫

• 1、全局守卫: to:去哪个页面,from:从哪个页面来的；next:是否可以进行跳转通过
  • A:beforeEach(to,from,next)：在加载路由组件之前就会执行该函数
  • B:beforeResolve(to,from,next):在路由组件加载完成但未跳转之前会执行该函数
  • C:beforeAfter(to,from)：在路由跳转完成后会执行该函数
• 2、路由独享守卫
  • A:beforeEnter(to,from,next)：对单独的页面进行设置
• 3、组件内守卫
  • A:beforeRouterEnter:路由进入之前调用。
  • B:beforeRouterUpdate:路由变化时调用。
  • C:beforeRouteLeave:路由离开时调用。

12、h5新增了哪些东西

1、新增的属性：placeholder，Calendar,date,time,email,url,search,ContentEditable,Draggable,Hidden Context-menu Data-val
2、新增的标签：语义化标签，canvas，svg，Audio，video，
3、Api:定位，重力感应，动画优化，History,LocalStorage,SessionStorage,websocket,fileReader,webWorker,Fetch

13、什么是语义化标签

如果整个网站都使用div来布局，其实也可以，但是如果后续想要维护代码，就会发现无法识别哪个div是头部哪个div是列表，很难查找，于是就出现了一些标签可以用来区分是某个模块，方便理解页面结构
如：header标签表示包裹的内容是头部区域，span：表示该包裹的是文本,ul该包裹的是列表，aside表示侧边栏；main表示主要内容；nav表示导航；section段落标签：可用一块一块的区域;article文章标签可以直接引用拿走;footer表示底部区域

14、什么是原型，什么是原型链？知道哪些继承

1、原型：只有函数才有原型，原型是一个对象，默认情况下，原型上的构造函数指向的是函数本身；
2、原型链：每个对象都有隐式原型，每个隐式原型的指向就会形成一个链条，而隐式原型也是个对象，也就是说也他也有隐式原型，那这样下去不就用永无止境了，隐式原型的最顶端是null,因为到最后使用由Object的原型上的隐式原型就为null；这一系列形成的链条就叫原型链；
3、继承：
    1、构造函数继承：在另一个函数内部使用app或者call方法
    2、原型实例继承：让新构造对象的原型指向父级的实例 Cat.prototype=new Animal();这里得把Cat原型的constructor指向自己，不然访问的时候会是父级函数不是自己；缺点：增加内存消耗，多new了一个实例
    3、原型原型继承：这里与原型实例继承不一样，他继承的不是实例了而是直接继承父级的原型prototype;其他的还是一样，也要改原型上constructor的值；优点：减少内存消耗，减少创建实例对象
    4、圣杯继承：创建一个空对象，先让空对象的原型指向父级的原型，然后让子级的原型指向这个对象实例，然后改变子级原型的constructor属性，最后在子级的原型上加入一个属性指向父级函数(也可以是父级的原型)

15、echarts如果需要实时刷新数据怎么办;

使用定时器实时去获取数据，然后通过监听器去监听数据的变化

16、浏览器缓存有哪些？

http缓存，cookie,Localstorage，Sessionstorage;
    1、http缓存：当客户端给向服务器请求资源，会先去看浏览器的缓存，如果浏览器的缓存中又该资源，就直接从浏览器缓存中获取而不会向服务器发送请求获取数据；
    http缓存都是从第二次请求开始，第一次请求资源时，从服务器返回资源，并在响应头中返回缓存参数，第二次请求时，浏览器判断这些请求参数，命中强缓存
    就直接200，否则就把请求参数添加到请求头中传给服务器，看是否命中协商缓存，命中协商缓存就返回304，否则服务器会返回新的资源
    2、cookie ：cookie大小只能存4kb而且它是以字符串文本进行传输，每次请求都需带上cookie增加请求带宽，cookie是存在客户端的，cookie可以设置过期时间，如果没有设置它是跟随浏览器关闭而消失，如果设置了，关闭浏览器也不会消失，只有到了过期时间他在会自动消失
    3、Localstorage永久性的缓存，如果自己不手动remove则会一直存在，