所请求vi未加载至服务器内存_前端面试题（2020自己所遇到过的面试题）

以下是2020年自己面试时所遇到的面试题，欢迎大家补充一些奇葩的面试题

（有些问题的答案可能不太完整，欢迎大家补充）

1.讲一下this？

this 既不指向函数自身，也不指函数的词法作用域。this具体指向什么，取决于你是怎么调用的函数。

this的4种绑定规则分别是：默认绑定、隐式绑定、显示绑定、new 绑定。优先级从低到高。

什么叫默认绑定，即没有其他绑定规则存在时的默认规则。这也是函数调用中最常用的规则。

注意：在严格模式下（strict mode），全局对象将无法使用默认绑定，即执行会报undefined的错误

2.js原型链？

js中每个对象都有一个_proto_属性指向这个对象构造函数的prototype对象，这个prototype对象也有一个_proto_属性，因此跟链条一样子子孙孙无穷尽也~当然他们的根是null

3.js回调函数？

一个函数被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”），回调函数在otherFunction中被调用。

需要注意的很重要的一点是回调函数并不会马上被执行。它会在包含它的函数内的某个特定时间点被“回调”（就像它的名字一样）

4.js闭包函数？

闭包就是能读取其他函数内部变量的函数。

优点：

1. 避免全局变量的污染
2. 希望一个变量长期存储在内存中（缓存变量）

缺点：

1. 内存泄露（消耗）
2. 常驻内存，增加内存使用量

5.js继承？

一、原型链继承

二、借用构造函数继承

三、组合继承（组合原型链继承和借用构造函数继承）（常用）

四、原型式继承

五、寄生式继承

六、寄生组合式继承（常用）

6.阻止事件冒泡与默认事件

阻止冒泡:

event.target

event.stopPropagation( );

阻止默认事件:

//阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; return false; }

7.css3新增属性？

1.添加边框属性：border-radius圆角、border-image圆角图片

2.添加阴影属性：box-shadow框阴影、text-shadow文本阴影

3.添加字体属性：@font-face字体、text-wrap自动换行、text-overflow检索当当前行超过指定容器的边界

4.添加选择器：E:last-child 匹配父元素的最后一个子元素、E:nth-child(n)匹配父元素的第n个子元素、E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

5.添加背景属性：background-size图片设置大小、background-origin设置定位区域、background-clip背景颜色的绘制区域、background-break控制背景怎样在这些不同的盒子中显示。

6.添加转换属性（translate、rotate、scale、skew、matrix、transform）、3D转换（rotateX、rotateY）

7:添加动画属性：Transition、Transform、Animation

8.添加媒体查询：@media

9.添加多列布局

8.vue阻止默认事件、事件冒泡？

e.stopPropagation();//阻止冒泡事件

e.preventDefault();//阻止默认行为

9.不知道宽高垂直水平居中的方法？

第一种：display:table-cell

组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。

第二种 transform:translate(-50%,-50%)

第三种用弹性布局实现垂直左右居中

display:flex; 设置.wrap为弹性布局 justify-content:center;定义项目在主轴(水平方向)上居中对齐 align-items:center;定义项目在交叉轴(垂直方向)上居中对齐

10.清除浏览器缓存？

方法一：添加时间戳

在引用的js文件后添加version

访问的网址后也要添加version

例：

<script type="text/javascript" src="https://resources.test.com/js/test.js?version=56965"></script>

方法二：设置请求头

expires跟cache-control进行搭配使用，根据项目本身的更新周期来设置时间；expires设置过期时间，cache-control可以设置为no-cache这样在资源过期之后，浏览器每次加载资源的时候会询问服务器当前资源是否过期，非过期资源将会继续沿用缓存，虽然发生了http请求，但是不用重新下载数据，这样性能依旧可以保持相对较高的水准。

详情：https://blog.csdn.net/handsomexiaominge/article/details/80556769

11.ajax请求的5个步骤

1.创建一个XMLHttpRequest异步对象

2.设置请求方式和请求地址

3.接着，用send发送请求

4.监听状态变化

5.最后，接收返回的数据

12.git命令

# 在当前目录新建一个Git代码库 $ git init # 下载一个项目和它的整个代码历史 $ git clone [url]

# 提交暂存区到仓库区 $ git commit -m [message]

# 添加指定文件到暂存区 $ git add [file1] [file2] ...

# 删除工作区文件，并且将这次删除放入暂存区 $ git rm [file1] [file2] ...

13.mvc框架？

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

视图(View)代表用户交互界面；

模型(Model)：就是业务流程/状态的处理以及业务规则的制定。

控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。

模型、视图与控制器的分离，使得一个模型可以具有多个显示视图。

14.异步请求与同步请求

异步：并行处理，程序向服务器发送一个请求，在结果返回之前，程序还是可以执行其它操作（以前台界面为例，用户依然可以输入其它信息，并且和服务器进行其它交付），大大节省了用户的时间，也提高用户的体验。

同步：顺序处理，程序向服务器发送一个请求，在结果返回之前，程序要一直等待结果返回才可以执行下一步操作。

15.图片懒加载原理

先将图片的src设置为同一张图片或者不设置，同时给img标签设置一个特殊属性，例如：src用于存放图片的真实预览地址；若图片未进入可视区域时，展示同一张图片或者直接不展示图片，此时就不会发生http请求，当图片进入可视区域时，将src上的值赋给src，此时再发送http请求。

16.响应式布局实现方案？

1. 媒体查询

2.百分比布局

3.rem布局

17.rem与em的区别？

em相对于父元素，rem相对于根元素。

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。

18.浏览器兼容问题？

常见问题：

1.默认的内外边距不同。

解决方法：

直接用*{margin:0;padding:0;}

2.块元素中含有图片时，ie6-7中会出现图片下有空隙。

解决方法：

1、在源代码中让div和img在同一行

2、将图片转换为块级对象display:block;

3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom

4、设置图片的浮动属性 float:left;

3.ul和ol列表缩进问题：

解决方法：

在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；

在 Firefox Chrome中，必须同时设置margin:0px、 padding:0px以及list-style:none三项。

JavaScript的兼容性：

1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

2.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

19.面向对象？

以事物为中心, 侧重于完成整个需求所需的事物的特征和行为, 代表语言: OC, JAVA, C++

三大特点：封装、继承、多态

多态的实际含义是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。

20.vuex页面刷新后，如何保存数据

将state的数据保存在localstorage、sessionstorage或cookie中，这样即可保证页面刷新数据不丢失且易于读取。

21.ajax原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

22.块元素与行元素

块级元素:

1.每个块级元素都是独自占一行。

2.元素的高度、宽度、行高和边距都是可以设置的。　　

3.元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）

例：div，p，h1-h6，ul，table，hr等

行级元素:

1.每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。

2.行内元素的高度、宽度、行高及顶部和底部边距不可设置。

3.元素的宽度就是它包含的文字或图片的宽度，不可改变。

例：img，a，span，input

区别:一是排列方式，二是宽高边距设置，三是默认宽度。

1. 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
2. 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
3. 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

23.jsonp的缺点

1、它只支持GET请求而不支持POST等其它类型的HTTP请求

2、 jsonp在调用失败的时候不会返回各种HTTP状态码。

3、缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

24.同源策略

源：源即是协议、域名和端口号。 如：https://blog.csdn.net/zzy2210:8080 就是一个源 同源：即源相同，源也就是说只要协议、域名、端口号相同便属于同源。 如：对于https://blog.csdn.net/zzy2210 http://blog.csdn.net/zzy2210 不同源，因为协议不同 https://blog.csdn.net/zzy2210:1080 不同源，因为端口不同 https://blog.csdn.net/zzy9001 同源 https://blog.net/zzy2210 不同源，因为域名不同 同源策略：同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 即http://www.baidu.com下的js脚本在无授权的情况下，读取http://blog.csdn.net/zzy2210:8080 是会报错的。

25.什么是跨域？造成跨域的原因？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

原因:

1.主域名不同

2.子域名不同

3.端口号不同

4.协议不同

26.字符串操作函数的方法

1、字符串转换

字符串转换是最基础的要求和工作，你可以将任何类型的数据都转换为字符串，你可以用下面三种方法的任何一种：

var num=24; var mystr=num.toString(); //"24 var mystr=String(num); //"24" var mystr="" + num; //"24"

2、字符串分割

split

3、字符串替换

replace

4、获取字符串长度

length

5、查询子字符串

indexOf

27.jq选择器

28.get和post区别

29.http三次握手协议

第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入syn_sent状态，等待服务器确认，syn：同步序列编号。

第二次握手：服务器收到syn包，必须确认客户的syn（ack=j+1），同时自己也发送一个syn包（syn=k），即syn + ack包，此时服务器进入syn_recv状态。

第三次握手：客户端收到服务器的syn+ack包，向服务器发送确认包ack(ack = k + 1)，此包发送完毕，客户端和服务器进入established（tcp连接成功）状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据。

Seq 与ack在三次握手协议的计算

第一次 客户端发起第一次握手：随机生成一个seq为i，包含在syn包里面发送给服务器，服务器接收到syn包。

第二次 服务器发起第二次握手：服务器向客户端发送一个ack包，并把服务器状态变成为syn_recv状态，服务器随机生成一个ack码为j，并把客户端发送的seq码加一。

第三次 客户端接收服务器发送的ack包，首先验证seq码是否加一，seq（客户端） = seq（服务器）+1，并接收到服务器发来的ack码，在ack码上添加一。

Ack（客户端）+1 = ack（服务器）。