前端面试题总结

Posted 2021-10-10 老张在线敲代码

1. Http 缓存策略，有什么区别，分别解决了什么问题

强缓存：服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
协商缓存：让客户端与服务器之间能实现缓存文件是否更新的验证、提升缓存的复用率，将缓存信息中的被请求变量的实体值（token）和最后文件被修改的时间，通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

2. 闭包是什么？

函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量，即形成了闭包。
可以在内部函数访问到外部函数作用域

3. 闭包原理：

利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。

4. 闭包优缺点

闭包优点：

可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用 避免变量污染全局
把变量存到独立的作用域，作为私有成员存在

闭包缺点：

对内存消耗有负面影响。因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏
对处理速度具有负面影响。闭包的层级决定了引用的外部变量在查找时经过的作用域链长度 可能获取到意外的值

5. Promise是什么？有几种状态？

1 从语法上来说Promise 是一个构造函数
2 从功能上来说promise 对象用来封装一个异步操作并可以获取其结果状态改变
总结：Promise是 js 进行异步编辑的新的解决方案

三种状态：

pending(进行中)、fulfilled(已成功)、rejected(已失败)

6. promise的优缺点

优点：

1. 统一异步 API Promise 的一个重要优点是它将逐渐被用作浏览器的异步 API ，统一现在各种各样的 API
，以及不兼容的模式和手法。

2. Promise 与事件对比 和事件相比较， Promise更适合处理一次性的结果。在结果计算出来之前或之后注册回调函数都是可以的，都可以拿到正确的值。 Promise的这个优点很自然。但是，不能使用 Promise 处理多次触发的事件。链式处理是 Promise 的又一优点，但是事件却不能这样链式处理。

3. Promise 与回调对比 解决了回调地狱的问题，将异步操作以同步操作的流程表达出来。

4. Promise 带来的额外好处是包含了更好的错误处理方式（包含了异常处理），并且写起来很轻松（因为可以重用一些同步的工具，比如Array.prototype.map() ）。

缺点：

1、无法取消Promise，一旦新建它就会立即执行，无法中途取消。

2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

3、当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

4、Promise 真正执行回调的时候，定义 Promise 那部分实际上已经走完了，所以 Promise 的报错堆栈上下文不太友好。

7.promise代码实例：

function myPromise(constructor){ let self=this;
  self.status="pending" //定义状态改变前的初始状态 
  self.value=undefined;//定义状态为resolved的时候的状态 
  self.reason=undefined;//定义状态为rejected的时候的状态 
  function resolve(value){
    //两个==="pending"，保证了了状态的改变是不不可逆的 
    if(self.status==="pending"){
      self.value=value;
      self.status="resolved"; 
    }
  }
  function reject(reason){
     //两个==="pending"，保证了了状态的改变是不不可逆的
     if(self.status==="pending"){
        self.reason=reason;
        self.status="rejected"; 
      }
  }
  //捕获构造异常 
  try{
      constructor(resolve,reject);
  }catch(e){
    reject(e);
    } 
}
myPromise.prototype.then=function(onFullfilled,onRejected){ 
  let self=this;
  switch(self.status){
    case "resolved": onFullfilled(self.value); break;
    case "rejected": onRejected(self.reason); break;
    default: 
  }
}

// 测试
var p=new myPromise(function(resolve,reject){resolve(1)}); 
p.then(function(x){console.log(x)})
//输出1

8 构造函数，原型对象和原型链之间的关系

构造函数Fn身上有属性prototype为原型对象，原型对象内有constructor属性指向当前prototype所在的构造函数Fn

在new执行构造函数Fn时，创造了一个实例对象f，实例对象f的__proto__指向构造函数Fn的原型prototype

因为实例对象f的__proto__指向构造函数Fn的原型prototype，所以实例对象f可以间接访问到Fn原型prototype的方法