面经

记录面试中遇到的常见问题，待完善

原型链继承

---

class继承

• 通过extends来实现继承，子类必须在构造函数中使用super方法，并且super方法必须在访问this之前调用，否则会报错

class Han extends Gaara{
    constructor(name,data,age){
        this.age = age;
    }
}
var a = new Han('Gaarahan',2,21)； 
//  Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// 在访问this和从衍生类之前，必须调用super构造函数
class Han extends Gaara{
    constructor(name,data,age){
        this.age = age;
      super(name,data);
    }
}
var a = new Han('Gaarahan',2,21)；  // 与上面报错相同

• es5 : 先创建子类的this，再将父类的属性方法加到该this对象上

• es6 : 先调用super创建当前环境中具有父类属性的this，再在该this对象上创建属于自己的属性方法
  此时的super相当于Gaara.constructor.call(this,name,data) 可以这样理解，但不能执行

• 在class继承中，子类的构造函数中的this对象，只有在调用过super后才能使用

• super既可以当作对象，也可以当作函数来调用，函数只能用在子类的构造函数中
  用作对象时：1. 静态方法中,指向父类 2. 其他方法中，指向父类的原型对象，此时无法取到实例对象的方法属性，只能访问原型上的方法属性
  而此时访问的方法中，若是使用了this，super指向当前子类实例的this

class A {
  constructor(){
    this.name = 'han';
  }
  han(){
    console.log(this.name);
  }
}
class B extends A{
  name = 'gaara';
  show(){
    super.han();
  }
}
var x = new B();
x.show(); // 'gaara'  调用时this指向x

• 每个实例都有proto属性，每个函数都有prototype属性，而class同时具有这两个属性
  此时，由于proto属性表示继承关系，有：

class A{}
class B extends A{}
B.__proto__ === A //表示B继承自A
B.prototype.__proto__ === A.prototype // 表示B的原型继承自A的原型
// 继承包括构造函数(实例属性)的继承，和原型对象(原型属性)的继承
A.__proto__ === Function.prototype // A未指定继承，因此作为函数默认继承了Function.prototype
A.prototype.__proto__ === Object.prototype // A调用后会返回一个空对象

---

promise

---

Array新增方法

Array.from(obj,mapCallBack) // 将类数组对象和可遍历对象转化为数组
Array.of(a,b,c,...)  // 将一组值转化为数组，弥补Array构造函数的不足(无参，一个，三个参数时，行为有差异)
find(func) findIndex(func)  // 找出数组中第一个满足该func的值，并返回该值/下标
fill(val,start,end)  // 使用val填充数组，可指定开始和结束位置
entries(),keys(),values() // 返回数组的 键值对/键/值
includes()    // 数组是否包含元素
flat(count) flatMap()　　// 拉平数组count层，对每个成员执行map,并拉平一层

---

http状态码

• 1XX 临时响应:
  • 100(continue) 这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它。
  • 101(Switching Protocol) 该代码是响应客户端的 Upgrade 标头发送的，并且指示服务器也正在切换的协议。
• 2XX 成功响应：
  • 200(OK)
  • 201(Created) 该请求已成功，并因此创建了一个新的资源
  • 202(Accepted) 请求已经接收到，但还未响应
• 3XX 重定向
  • 300(Multiple Chioce) 被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。
  • 301(Moved Permanently) 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。
  • 302(Found) 请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。
• 4XX 客户端响应
  • 400(Bad Request)
  • 401(Unauthorized) 当前请求需要用户验证。
  • 403(Forbidden) 服务器已经理解请求，但是拒绝执行它
  • 404(Not Found)
  • 418(I'm a teapot)
• 5XX 服务端响应
  　- 500(Internal Server Error)服务器遇到了不知道如何处理的情况
  • 502(Bad Gateway) 此错误响应表明服务器作为网关需要得到一个处理这个请求的响应，但是得到一个错误的响应
  • 503(Service Unavailable) 服务器没有准备好处理请求
  • 504(Gateway Timeout) 当服务器作为网关，不能及时得到响应时返回此错误代码
  • 505(Http version Not Support) 服务器不支持请求中所使用的HTTP协议版本

---

三次握手，四次挥手

• TCP 使用三次握手过程来建立一个连接,通常是一端打开一个套接字(Socket)来监听来自另一方的连接
  即服务端被动打开(passive open),等待用户端主动打开(active open)
  1. 客户端向服务端 发送SYN， 设置该连接的序号SEQ = 随机数A
  2. 服务端向客户端　返回SYN/ACK， ACK的确认码为A+1, SYN/ACK中包含随机序号B
  3. 客户端向服务端 发送ACK
  4. 当服务端接收到该ACK时，握手成功，进入连接建立状态
• 四次挥手过程是用来终止连接的，在这个过程中，两端都需要被独立的终止，当一个端点需要停止
  它这一侧的连接，就向对侧发送FIN，对侧回复ACK表示确认。因此需要两对FIN/ACK来终止一个连接
  每一个独立的终止流程如下

  1. A侧向B侧 发送FIN

  2. B侧向A侧 发送ACK

  3. B侧向A侧 发送FIN

  4. A侧向B侧 发送ACK

  5. 第四次挥手时，A(主动断开方)发送了ACK后，进入time_wait状态,等待2*MSL时间，再关闭连接

• time_wait是为了保证tcp连接安全的断开而设置的，当A发送ACK包时，为了防止B方没有接收到该包，
  需要等待2*MSL时间，MSL代表了一个包在网络中能够存活的最长时间
• 如果B方在没有接收到ACK包后，会重新发送FIN包，A端就会获知这个ACK丢了.重新发送。而这个过程不会超过2*MSL
• 如果超过这个时间，还未等到B端重新发送的FIN包，说明B端收到了ACK，此时可以关闭连接

---

vue 双向绑定的实现

• 双向绑定涉及的双向是指vm中的数据与页面上的展示的双向
• 页面输入框到vm的实现相对简单，监控元素的oninput,onchange等事件即可
• vm到页面的更新，需要我们监控vm中的数据的改变，借助Object.defineProperty()方法，即可为元素设置setter函数
  当数据更新时，我们总是需要通过setter函数，这时，我们在自定义的setter函数中写的处理函数就可以将我们数据的改变
  反馈到页面中去

let a = {};
Object.defineProperty(a,'x',{
  set(value){
    console.log('u have spy by me');
    x = value;
  },
  get(){
    return x;
  }
});
a.x = 1; // 输出 u have spy by me

---

mvc mvp mvvm

• M(model) -> V(view) -> C(controller) -> M(model) ... //环形
• V(view) <-> P(presenter) <-> M(model)
• M(model) <-> VM(view-model) <-> V(view)

---

冒泡和捕获

• 当触发事件时，先由最外层(html)向最里层前进并触发相应事件，这是捕获阶段。到达最里层后，再由里层向外层冒泡
• 事件的注册都默认在冒泡阶段

---

JWT

• json web token是用来解决在session认证中出现的一些问题而被设计出来的

• 流程：

  • 分为三部分生成，header包括加密算法以及类型(JWT)，payload中是一些信息，可以被客户端所解析使用
    signature是由前两部分的base64码加secret并使用加密算法加密得到
  • JWT通过接口返回给客户端，客户端可以解析payload部分来获取一些基本的信息
  • 当客户端发出请求时，需要在请求头中加入authorization : 'bearer' + token
  • 服务端在解析时先使用base64获取到header与payload,从header中即可得知加密使用的算法，
    再与本地的secret结合即可求出签证部分，如果求出的签证与客户端返回的签证相同，则认证成功

• 有以下优点：

  • 每个session都需要保存在内存或者数据库中，而JWT只需要存储在加密时使用的secret即可.当使用
    分布式的服务器设计时，session机制必须要保证每个服务器都可以访问到服务中运行的大量的session，
    而JWT机制只需要保证使用的secret在每个服务器可以访问到即可
  • payload可以让JWT在作为身份认证的同时，还能携带一部分数据
  • 能在一定程度上防范CSRF攻击

---

移动端页面中图片加载较慢时，如何保持页面的布局

• 了解了一下，还是没有搞懂问题，图片加载慢的时候，只要设置了图片的大小，是不会出现文章内容
  的塌陷的。像那种图片将文字挤走的问题，貌似只出现在图片没有设置大小的时候

---

http协议由几部分组成

• 由四部分组成 :
  • 通用头域: 请求和响应消息都支持的头域
  • 请求消息: 请求行(方法 路径 协议/版本)　请求头　空行　请求体
  • 响应消息：响应行(协议/版本　状态码　状态描述)　响应头　空行　响应体
  • 主体信息

---

cookie存放在http协议的哪个位置

• 浏览器默认携带请求头cookies做请求，后台返回cookie时将其以键=值的形式写入响应头的
  setCookies响应头中

---

设计模式

---

浏览器流程

1. DNS解析 -> 建立TCP连接 -> 发送请求 -> 服务器处理请求 -> 解析返回的数据渲染成页面展示 -> 断开连接

• DNS解析 : 从用户输入地址到网络ip的过程,先从缓存中 -> 根域名服务器 -> 顶级域名服务器 -> ...

• 渲染页面 :
  解析html，生成dom树，当遇到script脚本时，暂停DOM构建直到脚本执行结束
  解析所有的css，生成渲染树
  绘制页面

---

http 与 https

---

常见的请求响应头

1. 请求头：

• accept : 客户端能接受的资源类型
• accept-language : 客户端能接收的语言类型
• accept-encoding : 可接收的压缩编码
• connection : 维持客户端和服务端的联系(keep-alive)
• cookie : 请求携带的cookie
• user-agent : 发起请求的设备信息
• referer : 请求的发起源

2. 响应头：

• location : 服务端需要客户端跳转时使用
• server : 服务端的web服务器的名字
• content-encoding: 服务端发送的压缩编码的类型
• content-length : 发送数据的长度
• content-language: 发送数据的语言
• content-type : 发送的数据的数据类型及编码方式
• setCookie : 返回的cookie
• access-control-allow-origin : 设置允许跨域的源(CORS解决跨域)

---

Vue生命周期

• beforeCreate : Vue实例创建之前,此时data,methods等还未定义
• created : Vue实例已经被创建，data,methods已经创建好
• beforeMount : 在内存中编译好了模板，但还未挂载到页面上去，此时可以获取到页面中的模板字符串
• mounted : 模板已经挂载到页面中，用户已经可以看到渲染好的页面
• beforeUpdate : 当实例中的数据改变时，会触发该事件，此时数据已经更新，但页面还未进行重新渲染
• updated : 页面已经被重新渲染
• beforeDestory : Vue实例经过$vm.destory()方法后，会进入到销毁阶段，该状态实例还是可用的，此时可以定义一些在销毁之前的操作
• destory : Vue实例已经被彻底销毁