整理前端知识点（面试）2021-04-06----02

一、原型链理解

1、原型链

1）构造函数、原型和实例的关系

    ①构造函数都有一个属性prototype，这个属性是一个对象（Object的实例）
    ②原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数
    ③实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的
2）prototype与_proto_的关系
    ①prototype是构造函数的属性
    ②_proto_是实例对象的属性
          ——这两者都指向同一个对象

【总结】i）函数也是对象，对象不一定是函数；

        ii）对象的本质：无序的键值对集合；键值对当中的值可以是任意数据类型的值

        iii）对象就是一个容器，这个容器当中放的是（属性和方法）

3）属性搜索

　　①在访问对象的某个成员的时候会先在对象中找是否存在

　　②如果当前对象中没有就在构造函数的原型对象中找

　　③如果原型对象中没有找到就到原型对象的原型上找

　　④知道Object的原型对象的原型是null为止

2、Function

——所有函数都是Function的实例

①本地对象：独立于宿主环境（浏览器）的对象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean

②内置对象——包括Math、Global（window，在js中就是全局变量），使用的时候不需要new

③宿主对象——包括自定义对象、DOM、BOM

二、js如何实现继承

js继承有5种实现方式：

• 1、继承第一种方式：对象冒充闭包理解
• 2、继承第二种方式：call()方法方式
  call方法是Function类中的方法
  call方法的第一个参数的值赋值给类(即方法)中出现的this
  call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
• 3、继承的第三种方式：apply()方法方式
  apply方法接受2个参数，
  A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
  B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
• 4、继承的第四种方式：
  原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
• 5、继承的第五种方式：混合方式
  混合了call方式、原型链方式

三、css选择器优先级排序

优先级：由高到低(从上到下)

!important

内联(1,0,0,0)

id: (0,1,0,0)

类：(0,0,1,0)

伪类/属性

元素：(0,0,0,1)

通配符

四、浏览器如何进行工作的—

浏览器工作原理

详细分为以下几大模块：

1、DNS 解析

2、TCP 连接

3、HTTP 请求

4、构建 DOM 树

5、构建 CSSOM 树

6、生成渲染树

7、合成、绘制

五、浏览器缓存–

浏览器缓存

六、跨域问题–

跨域问题
JSONP跨域（本质是JS调用）
CORS（后台设置）
Nginx反向代理（运维配置）
跨域是浏览器做出的安全限制，必须同协议、同域名、同端口否则会被浏览器block

七、HTTPS

基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护

通过抓包可以看到数据不是明文传输，而且HTTPS有如下特点：

内容加密：采用混合加密技术，中间者无法直接查看明文内容
验证身份：通过证书认证客户端访问的是自己的服务器
保护数据完整性：防止传输的内容被中间人冒充或者篡改
收方能够证实发送方的真实身份；
发送方事后不能否认所发送过的报文；
收方或非法者不能伪造、篡改报文。

八、http get请求和 post请求有什么区别

1.get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5.get安全性非常低，post安全性较高。

九、http2.0

十、h5适配

素自适应问题
文字rem问题
高清图问题
1像素问题
横竖屏显示问题
手机字体缩放问题

十一、跨站脚本工具XXS

XSS 又叫CSS（Cross site Scripting）跨站脚本工具，常见的WEB漏洞之一，再2013年度OWASP TOP 10 中排名第三

XSS 是指攻击者再网页中嵌入客户端脚本，通常是JS恶意代码，当用户使用浏览器访问被嵌入恶意代码网页时，就会再用户浏览
器上执行。

反射型，存储型，Dom型

十二、websocket协议

WebSocket 是基于TCP/IP协议，独立于HTTP协议的通信协议。

WebSocket 是双向通讯，有状态，客户端一（多）个与服务端一（多）双向实时响应（客户端 ⇄ 服务端）。

WebSocket 是应用在浏览器的 Socket （是 Socket 模型接口的实现），Socket 是一个网络通信接口 （通信规范）。

十三、DOM事件

DOM事件

用户界面事件

当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。
load事件：当页面加载完毕时在window上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发，img只要设置了src就会下载
unload事件：当页面完全卸载时在window上触发，等等。当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露
error：当发生js错误时在window上触发，当图像无法加载时在img上触发
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发
select：当用户选择文本框（input或textarea）中的一或多个字符时触发
resize：当窗口或框架的大小发生改变时在window上触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发

焦点事件

当元素获得焦点或失去焦点时触发
blur：失去焦点时触发，这个事件不会冒泡
focus：获得焦点时触发，不冒泡
focusin：在获得焦点时触发，但他冒泡，DOM3新增
focusout：在失去焦点时触发，冒泡

鼠标事件

当用户通过鼠标在页面上执行操作时触发
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发
dbclick：双击事件，当双击鼠标时触发（一般是左键）
mousedown：当用户在按下任意鼠标按钮时触发
mouseup：当用户释放鼠标按钮时触发
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分）
mouseleave：鼠标离开和mouseenter：鼠标进入是一对，刚好相反
mousemove：当鼠标指针在元素内部移时重复的触发
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分
mouseover：鼠标指针进入和mouseout 鼠标指针离开是一对，恰好相反
除了mouseleave和mouseenter之外都会冒泡

click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。

坐标位置

视口区（客户区）坐标位置：clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等
页面坐标位置：pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来
event.clientX+（document.body.scrollLeft + document.documentElement.scrollLeft）
event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）
屏幕坐标位置：相对于整个电脑屏幕，screenX和screenY

滚轮事件

当使用鼠标滚轮（或类似事件）时触发
mousewheel：跟踪鼠标滚轮或笔记本触摸板

文本事件

当在文档中输入时触发
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持，firefox不支持

键盘事件：当用户通过键盘在页面上执行操作时触发

keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发
keyup：用户释放键盘上的键时触发
所有元素都支持这三个事件
keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应

移动端-小程序事件：

touchstart: 当手指触摸屏幕的时候出发
touchmove： 当手指在屏幕移动的时候
touchend： 手指离开屏幕的时候触发
touchcancel: 当被迫中止滑动的时候触发（弹消息，来电等等）；
tap：手指触摸后离开(点击)
longtap: 手指触摸后后，超过350ms离开
事件绑定的写法同组件的属性，以 key、value 的形式。

key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart

十四、HTTP状态码

状态码

状态码之（1**）

100: 客户端应当继续发送请求。
101: 服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。
102: 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。

状态码之（2**）

200: 请求已成功。
201: 请求已经被实现。
202: 服务器已接受请求，但尚未处理。
203: 服务器已成功处理了请求，但返回的实体头部元信息不是在原始服务器上有效的确定集合，而是来自本地或者第三方的拷贝。
204: 服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。
205: 服务器成功处理了请求，且没有返回任何内容。
206: 服务器已经成功处理了部分 GET 请求。
207: 由 WebDAV(RFC 2518)扩展的状态码，代表之后的消息体将是一个XML消息，并且可能依照之前子请求数量的不同，包含一系列独立的响应代码。

状态码之（3** 和 4**）

301: 永久移动。被请求的资源已被永久移动位置。
302: 请求的资源现在临时从不同的 URI 响应请求。
305: 使用代理。被请求的资源必须通过指定的代理才能被访问。
307: 临时跳转。被请求的资源在临时从不同的URL响应请求。
400: 错误请求。
402: 需要付款。该状态码是为了将来可能的需求而预留的，用于一些数字货币或者是微支付。
403: —禁止访问。服务器已经理解请求，但是拒绝执行它。
404: 找不到对象。请求失败，资源不存在。
406: 不可接受的。请求的资源的内容特性无法满足请求头中的条件，因而无法生成响应实体。

状态码之（4** 和 5**）

408: 请求超时。
409: 冲突。由于和被请求的资源的当前状态之间存在冲突，请求无法完成。
410: 遗失的。被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址。
413: 响应实体太大。服务器拒绝处理当前请求，请求超过服务器所能处理和允许的最大值。
417: 期望失败。在请求头 Expect 中指定的预期内容无法被服务器满足。
418: 我是一个茶壶。超文本咖啡罐控制协议，但是并没有被实际的HTTP服务器实现；
420: 方法失效。
422: 不可处理的实体。请求格式正确，但是由于含有语义错误，无法响应。
500: 服务器内部错误。服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。