面经 - 简书

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

原型链继承

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响应头中

设计模式

浏览器流程

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

DNS解析 : 从用户输入地址到网络ip的过程,先从缓存中 -> 根域名服务器 -> 顶级域名服务器 -> ...
渲染页面 :
解析html，生成dom树，当遇到script脚本时，暂停DOM构建直到脚本执行结束
解析所有的css，生成渲染树
绘制页面

http 与 https

常见的请求响应头

请求头：

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

响应头：

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实例已经被彻底销毁