2022年前端常见面试题整理汇总(附答案详解)

一、Web前端面试题目汇总：什么是闭包

含义：闭包指的是函数内部可以访问其他作用域内变量的函数

闭包的特点：

1、外层函数嵌套内层函数，外层函数将内层函数的值返回出去

2、闭包能够访问其他作用域内的变量

3、函数的参数和变量不会被垃圾回收机制回收

4、允许私有成员存在

闭包的缺点

由于闭包不会被垃圾回收机制回收的这个特点导致当你不再使用这个闭包时闭包的参数和变量仍然存储在内存当中容易造成内存泄漏

工作中什么情况下要用到闭包？

在我们工作中使用闭包的常见场景是用来模拟一个块级作用域(匿名自执行函数)和对一些函数的参数结构进行缓存，但是因为闭包容易造成内存泄漏的特点我们在使用完闭包之后要手动将结果进行清除

手写一个闭包

functiona(){varn=0;functionb(){n++;console.log(n)}returnb;}varc=a();c();

为什么闭包不会被垃圾回收机制回收？

在js当中如果一个对象不再引用或者两个对象互相引用但是不被其它第三者引用那么这个对象就会被垃圾回收机制回收，但是在闭包中函数a和函数b都是互相引用且b又被函数外部的c所引用所以闭包不会被垃圾回收机制回收

二、Web前端面试题目汇总：原型和原型链

跨域

什么是跨域？

跨越指的是在js中由于浏览器的同源策略限制一个网站不能访问另外一个网站的脚本，同源策略本质上是浏览器的安全策略

如何跨域？

1、jsonp跨域

2、反向代理跨域

3、core(跨域资源共享)

es6新增语法

箭头函数，模板字符串，...运算符，模块化，pormise函数，calss类

数组的常用API

push()向数组的末尾添加一个元素

unshift()向数组的第一位添加一个元素

pop()删除数组的最后一个元素

shift()删除数组的第一位元素

join()用于将数组里的对象放入一个字符串并且用指定分隔符相连

splice()用于在数组的指定index处添加或者删除指定数量的元素

深浅拷贝

我们知道在JavaScript当中数据类型分为基本数据类型和引用数据类型

基本数据类型如：Numer，String，布尔值，undefined，null，symol

基本数据类型的值是存储在栈当中通过变量名能够直接访问到

引用数据类型指的是：Object类型如果细分的话还分为Array，Functin，Object。。。，引用数据类型的值是存储在堆当中，通过存储在变量名当中的指向堆的地址来访问到

因此如果我们将一个对象直接赋值给一个变量那么我们就是只是将地址赋值过去，此时就是引用拷贝如果我们去修改新的对象的话旧的对象也会改变因为本质上他们都是共享的一块堆内存

而浅拷贝和引用拷贝的区别就是浅拷贝是按位拷贝浅拷贝会拷贝一个和旧对象一样的对象，如果旧对象的属性值是基本数据类型的话我们去修改新对象的话旧对象是不会发生改变的而旧对象的属性值是引用数据类型的话则就是拷贝的地址，我们去修改这个引用数据类型的话旧对象也会发生改变

深拷贝就是会复制一份和之前对象一模一样的新对象，新旧对象之间没有联系，当我们去修改新对象无论属性值是基本数据类型还是引用数据类型旧对象都不会发生改变

三、Web前端面试题目汇总：什么是防抖截流

get和post的区别

由于GET请求的参数都是在url地址栏可以直接看到因此GET相对POST请求来说安全性低

GET请求回退是无害的而POST请求回退时会重新请求

GET请求只支持URL编码格式，而POST请求是支持多种编码格式

GET请求会被浏览器的历史记录默认保存而POST请求除非手动设置是不会被浏览器所缓存的

GET请求的参数是放在URL地址栏里而POST请求是request.body中

GET请求是有长度限制的(长度限制取决于浏览器的规定)，而POST请求没有限制

四、Web前端面试题目汇总：cookie和session

为什么要使用cookie或者session？

我们知道http请求是无状态的，它不能保存请求发送过来的数据，因此当我们在用户登录时如果刷新页面或者退出浏览器那么就会导致在重新打开网站时就又要重新输入用户名密码，这极大的影响了用户体验和实际效果所以我们要使用cookie或者session来保存

cookie和session的区别

cookie是有大小限制的一般不能够超过4KB，而session理论上是没有大小限制的(大小限制取决于服务器所分配的大小)

cookie是存储在客户端而session是存储在服务器端

由于cookie是存储在客户端浏览器上的可以从浏览器直接获取到cookie信息因此相对来说cookie没有session安全

那什么时候使用cookie什么时候使用session

由于session是存储在服务器上的安全性比cookie高但是如果存储大量的session在服务器上的话会占用过多的服务器资源因此我们把如用户登录的密码等这种重要的信息就存储在session而其它信息则可以存在cookie

五、Web前端面试题目汇总：什么是pormise

定义：promise是es6新增的语法作用是用来解决层层嵌套的回调函数

promise是一个构造函数通过new关键字来创建

promise函数有三种状态：进行时(padding)成功后(resolved)失败后(rejected)

手写一个pormise

constpromise=newPromise((resolve,reject)=>{//异步操作的代码if(success){resolve(value);}else{reject(error);}});

vue的生命周期

vue的生命周期指的是组件从创建到销毁的一个过程，这个过程就叫做vue的生命周期

vue的生命周期总共分为八个阶段，

创建前---beforecreate

创建后---create

挂载前---beforemounted

挂载后---mounted

更新前---beforeUpdate

更新后---update

销毁前--beforeDestroy

销毁后---destroy

vue计算属性和watch属性

计算属性computed和watch属性都是用来监听vue组件中的变化并执行相应的操作的

他们的区别在于监听的对象不同：computed是监听依赖值的变化，当依赖值发生变化会自动计算依赖值变化之后的结果，当依赖值没有发生变化时会自动读取之前缓存的进行快速的渲染，而wacth则是监听属性值的变化当属性值发生变化的时候自动执行相应的监听回调和逻辑

使用场景：当我们需要在属性值发生变化时执行相应的异步操作或者开销比较大的操作的时候我们用watch比较好因为computer属性必须是同步的，而当我们需要得到依赖值发生变化后的结果如：购物车的加减和总金额的变化

六、Web前端面试题目汇总：js中如何实现继承

可以使用es6新增的class继承

原型继承

一个简单的原型继承functionFather(){this.age=18;}functionSon(){this.name="zs"}Son.prototype=newFather();vars=newSon();console.log(s.age)

七、Web前端面试题目汇总：图片懒加载原理

new关键字具体都干了什么

创建一个新对象

将新对象的_proto_指向构造函数的prototype对象

将构造函数的作用域赋值给新对象(也就是this指向新对象)

执行构造函数中的代码(为这个新对象添加属性)

返回新的对象

vue中v-if和v-show有什么区别

首先v-if和v-show都能用于对指定元素的显示和隐藏操作但是他们在实现的方法上略有不同

v-if是通过对dom的销毁和重建来实现元素的显示和隐藏

v-show则是通过修改元素的display属性来达到显示和隐藏