高频面试题

Posted 2021-10-28 ……勇敢妞妞

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高频面试题相关的知识，希望对你有一定的参考价值。

1.普通函数与箭头函数的区别？

答：

箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不绑定arguments，用rest参数解决
箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入一个参数，对 this 不影响。箭头函数内的 this 指向上层对象， bind() 、call() 、apply() 均无法改变指向
箭头函数没有原型属性
箭头函数不能当做 Generator函数 ，不能使用 yield 关键字

yield关键字很像return，他们不同的是，yield返回的是一个生成器
两种函数的this代表不同：箭头函数的this代表上层对象，若无自定义上层，则代表window。普通函数this代表当前对象

2.Vue中组件的data为什么是一个函数？

答：

为了保证组件的独立性和可复用性，data 是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

3.js如何实现继承

答：

借助原型链，利用原型让一个引用类型继承另外一个引用类型的属性和方法
借助构造函数，在子类型构造函数的内部调用超累构造函数，通过使用 call() 和 apply() 方法可以在新创建的对象上执行构造函数
组合继承，将原型链和借用构造函数的技术组合在一块
原型式继承，借助原型可以基于已有的对象创建新对象
寄生组合式继承，通过借用函数来继承属性，通过原型链的混合形式来继承方法
创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后像是它做了所有工作一样返回对象

4.什么是闭包？

答：

闭包就是能够读取其他函数内部变量的函数。比如在js中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁缺点是会造成内存溢出，变量无法被销毁。

闭包的作用：

访问其他函数内部变量
保护变量不被内存回收机制回收
避免全局变量被污染，方便调用上下文的局部变量，加强封装性

闭包的缺点：

闭包长期占用内存，内存消耗大，导致内存可能泄露

如何避免闭包引起的内存泄露：

在退出函数之前，将不使用的局部变量全部删除

5.路由是怎么实现的？

答：

是通过哈希值的改变来检测

利用onhashChange()

6.css3中单位px与vw、rem的区别？

答：

px：绝对单位，页面按照精确的像素展示

em：相对单位，参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位， css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

vw：相对单位， css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

7.apply，call与bind的区别？

答：

共同点：

都能改变 this 指向
三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。

不同点：

三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行。

8.对原型(prototype)与原型链的理解

答：

理解：原型链是一个对象查找属性的一个机制，有就使用，没有就往上一层的所属构造函数上的原型对象查找，还没找到就再往上一层查找，一直到最上层的window，还没有就报错

构造函数、原型链、原型对象的关系：

每个构造函数都有一个原型对象(prototype)
原型对象都包含一个指针指向构造函数(constructor)
所有的实例都通过__proto__指向同一个原型对象(包含一个指向原型对象的内部指针)

答：利用标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来

例如img标签的src和link标签的href会发送一个get请求去请求静态资源。那么我们通过这点可以发现这些标签的src和link属性，并没有受同源策略的限制。jsonp就是使用同源策略这一漏洞实现的跨域请求

构造函数new出来一个对象，而每个对象都有一个construstor属性，该属性指向创建该实例的构造函数，构造函数的prototype属性是这个new出来的实例化对象的原型，实例对象通过__proto__或者object.getPrototype的方法获取原型

9.Vue中hash和history的区别

答：最直观的区别就是hash在url中带了一个#，而history没有

hash虽然出现在URL中，但不会被包括在http请求中，对后端不会造成影响，因此改变hash不会重新加载页面

10.jsonp的原理

答：

例如img标签的src和link标签的href会发送一个get请求去请求静态资源。那么我们可以通过这点发现这些标签的src和link属性并没有受到同源策略的限制，jsonp就是通过使用同源策略这一漏洞实现的跨域请求

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp就是为了解决跨域问题的方法

同源策略就是同一协议，同一域名，同一端口号，当其中一个不满足时，我们的请求就是产生跨域问题

11.浏览器的内核和前缀

答：

Chrome（谷歌浏览器）： WebKit内核 -webkit-

Safari（苹果浏览器）： WebKit内核 -webkit-

FireFox（火狐浏览器）： Gecko内核 -moz-

IE（IE浏览器）： Trident内核 -ms-

Opera（欧朋浏览器）： Presto内核 -o-

12.fetch axios 有什么优缺点

答：

fetch

优点：

语法简洁，更加语义化
基于标准Promise实现，支持async/await
更加底层，提供的API丰富(request,resopnse)

缺点：fetch请求默认是不带cookie的，需要进行封装

fetch只会对网络请求报错，对400,500都当做成功的请求，服务器返回 400,500 错误码是并不会reject，只有网络错误这些导致请求不能完成时，fetch才会被reject
fetch默认不会带cookie，需要添加配置项： fetch(url,{credentials:‘include’})
fetch不支持abort，不支持超市控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
fetch没有办法原生检测请求的进度，而xhr可以