前端面试题总结

yxlwq
184 阅读8分钟

前端面试题

2020/3/9

  1. 闭包是什么，闭包的作用，闭包的应用场景，闭包的缺点
闭包是什么？
答：能够访问其他函数内部变量的函数。

闭包的作用？
答：
1. 能读取其他函数内部的变量
2. 将函数内部变量保存在内存中，不释放。

闭包的应用场景？
答：
1. 让内层函数延迟执行
2. 内层函数将外层函数的变量进行封装，将其对外暴露。
3. for循环嵌套计时器中保存变量，实现依次打印

闭包的缺点？
答：由于闭包会将函数变量保存在内存中，有可能会造成内存泄漏，解决办法是在最后将其从内存中释放。
  1. 跨域的解决方案
JSONP(最差)
1. 前端和后端需要相互配合
2. 只支持GET请求

CORS(较次)
1. 只需要对后端进行处理
2. 能够支持更多类型请求

nginx(nodejs)反向代理(最好)
1. 不需要对前端和后端进行任何处理
2. 能够支持更多类型请求
  1. for in和for of的区别
for in:
1. 遍历出下标值
2. 遍历所有可枚举属性，包含原型的属性
for of:
1. 遍历出值
2. 可以遍历Map和Set，但不可以遍历Object
  1. new 一个对象实际发生了什么
1. let _this = {};
2. 构造函数.call(_this,构造函数参数);
3. _this.__proto__ = 构造函数.prototype;
  1. js中的防抖和节流，使用场景
防抖：持续触发事件时，事件处理函数不会执行，直到最后一次触发事件，执行一次。
使用场景：
1. 多次点击提交按钮
2. 输入框进行Ajax验证

节流：持续触发事件时，只有在满足相应的条件时，才会触发一次
使用场景：
1. 懒加载

2020/3/10

  1. 继承的几种方式
1. 原型链继承(差)
缺点：
1. 子类实例会共享父类原型上的引用类型属性，因此修改通过子类修改该引用属性会更新到父类上
2. 创建新的子类实例时，无法为继承父类的实例传参

2. 构造继承(差)
优点：创建新的子类实例时，能够为其传参
缺点：
1. 不能实现复用
2. 无法继承父类原型上的属性

3. 组合继承(一般)
优点：避免了原型链继承和构造继承的缺点
缺点：实例的原型上和实例对象本身共用两套相同的属性

4. 寄生继承(差)

5. 寄生组合继承(优秀)
优点：将实例的原型上与实例对象本身相同的属性去掉
缺点：代码量多

6. Object.create方式的组合继承(最好)
优点：解决了寄生组合继承的复杂性

7. 实例继承(差)
缺点：
1. 子类实例实际上是父类实例
2. 为子类原型添加属性等价于为父类原型添加属性

8. 拷贝继承(差)
优点：可以实现多继承
缺点：
1. 只能继承可遍历属性
2. 子类共享父类的原型引用属性，修改子类会影响到父类

9. class继承
特点：
1. 通过extends继承类
2. 通过在constructor函数中执行super函数来赋值
  1. call、apply、bind的区别
三者相同点：
1. 三者都是Function原型上的方法
2. 都是用来改变this指向

call特点：
1. 立即执行
2. 第一个参数是this
3. 其余的参数以非数组形式传入

apply特点：
1. 立即执行
2. 第一个参数是this
3. 其余参数以数组形式传入

bind特点：
1. 返回一个函数，即并非立即执行
2. 第一个参数是this
3. 其余参数以非数组形式传入
  1. 什么是Promise
答：Promise是一种异步编程的方案，比回调函数更加合理，已纳入es6规范
  1. Promise 解决了什么问题
答：解决了回调函数出现的回调地狱问题。
  1. Promise的API
1. Promise.all()
特点：
1. 参数为Promise对象组成的数组
2. 返回一个Promise对象
3. 该对象在所有Promise对象状态都为resolved后，改变为resolved，成功回调参数为所有resolve参数组成的数组
4. 若其中一个Promise状态最先改为rejected，则该Pormise对象状态为rejected，失败回调的参数为那个Promise的reject参数

2. Promise.allSettled()
特点：
1. 区别于Promise.all，两个效果完全不同，后者是待所有Promise的状态都完成后，返回一个表示所有Promise对象的对象数组，无关状态，全部都在then的成功回调函数参数中调用，不在失败回调或者catch中调用
2. 对象的属性分为两种，当Promise的状态为resolved时，对象属性为status和value。当Promise的状态为rejected的时，对象属性为status、reason

3. Promise.race()
特点：
1. 区别于Promise.all，返回的Promise状态由最先执行完成的Promise状态决定，若最新的Promise状态改为resolved，则改为resolved，若为rejected，则为rejected

4. Promise.resolve()
特点：返回一个状态为resolved的Promise对象

5. Promise.reject()
特点：返回一个状态为rejected的Promise对象

6.Promise.prototype.then()
特点：
1. 第一个参数为Promise状态为resolved的回调函数
2. 第二个参数为Promise状态为rejected的回调函数，可以不写，错误右catch捕获

7. Promise.prototype.catch()
特点：会捕获then的错误

8. Promise.prototype.finally()
特点：无论是否报错，在最后会被执行一次
  1. Promise 在事件循环中的执行过程是怎样的
1. 顺序执行Promise的回调函数参数
2. 遇到throw，reject函数，将状态改为rejected，并且退出回调函数
3. 遇到resolve函数，将状态改为resolved，并且退出回调函数
4. 遇到return，退出回调函数，状态依然为pedding
5. 顺序执行外部代码，遇到then函数，将其放入事件任务队列等待方法栈空之后，将其放入方法栈执行
6. 顺序执行外部代码，执行完成后，将then函数放入方法栈，继续执行

2020/3/11

  1. cookie的弊端
答：
1. 有些浏览器对每个域名下的cookie数量有限制
2. 每个cookie最大为4KB，容量有限
3. cookie存在被拦截转发的可能，具有安全风险
4. 每次http请求，会自动添加cookie，浪费带宽
  1. 简单说一下浏览器本地存储是怎样的
答：
1. 分为两类：localStorage和sessionStorage
2. localStorage和sessionStorage的作用域以域名划分
3. localStorage是永久存储，而sessionStorage的有效期是在浏览器窗口关闭之前
4. localStorage和sessionStorage的API都一样，key(),setItem()，getItem()，removeItem()，clear()
5. 容量更大
  1. webStorage和cookie区别
答：
1. webStorage的容量更大，而cookie的数量在一些浏览器中有限制，容量更是不超过4KB
2. cookie在每次的http请求中，都会加入到请求头，浪费带宽
3. webStorage有现成的API进行操作，而cookie没有
  1. display: none和visibility：hidden的区别
答：
1. display: none会让元素脱离文档，从DOM中直接清除，不再占有空间，会引起回流和重绘
2. visibility: hidden只是让元素再页面中不可见，依然占据原有的空间，不从DOM中清除，不会引起回流，但是会引起重绘
  1. link和@import的区别
答：
1. link是html标签，@import是css语法
2. link是顺序加载，@import的文件是等待页面加载完成后再加载，可能出现FOUC，即页面内容闪烁问题
  1. position: absolute和position: fixed的区别
答：
1. 都会脱离正常文档流，不在占有空间
2. display变为inline-block
3. fixed以浏览器窗口定位，而absolute以position定位的祖先元素定位(不包含position: static)
  1. 介绍一下CSS的盒子模型
答：
1. css的盒子模型分为两种：IE盒子模型和标准W3C盒子模型
2. IE盒子模型的宽高包含了border和padding，也即当border+padding+content的总高度或宽度不超过设置的盒子宽高，盒子宽高也即等于设置的宽高，当上述之和大于设置的宽高，则盒子宽高等于border+padding+content之和
3. 标准W3C盒子模型的宽高直接等于border+padding+content之和
  1. CSS 选择器有哪些，哪些属性可以继承，优先级算法如何计算
CSS 选择器
答：
1. 通配符选择器
2. 标签选择器
3. 位元素选择器
4. 伪类选择器
5. 子选择器
6. 后代选择器
7. 通用兄弟选择器
8. 相邻兄弟选择器
9. 属性选择器

可继承的属性：
1. font-*
2. text-*
3. list-*
4. visibility和cursor
5. 其他

css选择器优先级算法：
1. !important最高 无穷大
2. 行内样式style 1,0,0,0
3. ID选择器 1,0,0
4. 类选择器 1,0
5. 标签选择器和伪元素选择器1
6. 通配符选择器和:not()不占有权重，但是not()里的选择器占有权重
7. 权重取决于 0,0,0,0 在计算之后变成了啥，高位不为0的权重最高
8. 例如.div>div => 0,0,1,1 而 #div => 0,1,0,0 因此后者的权重高
9. 若右多个同权重的选择器样式，后面选择器样式的起作用
  1. inherit、initial、unset区别
答：
1. inherit会继承上级的可继承样式
2. initial会使用默认样式
3. unset若有可继承样式则继承该样式，否则使用默认样式，也即是inherit和initial的结合
avatar
文章
阅读
粉丝