js面试题及简要答案（持续更新）

基本类型和方法

js值类型和引用类型的区别

值类型：undefined,null,boolean,number,string
引用类型：普通对象，数组对象，日期对象等等
symbol
区别：按值引用和按址引用，值类型存在于栈内存中，引用类型会在对内存中为其开辟一段空间

call，apply，bind区别

bind是绑定，call和apply都是绑定并执行
像箭头函数，箭头函数的this在定义时绑定，内部用了bind

call和apply的区别，apply接收两个参数，第一个参数是要绑定给 this 的值，第二个参数是一个参数数组
call 第一个参数是 this 的指向，从第二个参数开始是接收的参数列表。

undefined === null?

错

什么是变量提升

在函数内执行前会预编译，将变量挂载于作用域下。所以变量即使在后面声明赋值，在前面console，也不会报错，是undefined。函数是声明并赋值。

Object.create是什么

将实例的__protp__指向create里的传参，一般用于原型链的继承
Cat.prototype = Object.create(Animal.prototype) // 方法2

JS类型判断的方法有哪些

typeof 有限制，判断引用类型判断不出来，都是object，函数可以判断出来,null也是object
instanceof后面只可以跟引用类型，返回值是boolean值，不可以判断null，null直接用===就好了
constructor，不可以用于undefined和NAnull，他们没有
万能方法 Object.prototype.toString.call()，结果是[Object Array],[Object Number]
都可以判断

JS类型和基础类型

数组去重的几种方法

双循环，看到重复的给删了，性能不好，还会数组塌陷，解决办法是把最后一项挪到需要删除的那项位置，然后把最后一项删除掉，注意要–以下，刚挪过来的这一项也要判断是否一样
基于对象的key不能重复方法更好
还有使用new Set再转为数组
var newAry=Array.from(new Set(ary))
具体可见
数组方法

原型

解释原型和原型链

原型链相关知识

new一个实例的过程

1. 将this指向即将创建的实例
2. 非常重要！执行构造函数，属性即挂载到对象上
3. 将该实例的__proto__指向构造函数的prototype

如何用class实现继承

class user {
 constructor (b) {
	this.b = b
 }
 c () {
 }
}
new user(1) // 结果是带有b=1属性的对象，它有c方法

其实和构造函数差不多

如何用class实现继承

用extends

constructor和prototype的区别

构造函数的protptype里有constructor，其为构造函数本身
创建出来的实例.constructor为其构造函数

实现继承的几种方法

实现继承的方法

作用域

解释作用域、作用域链

那就在函数内部找目标变量的声明var，找不到再往外找，直至周到有var的，若到最外面都没有，那这个变量就在window下，这就是作用域链

解释闭包并举例

闭包和变量提升

this的指向问题

在构造函数中，this指向即将创建的实例
其余的，this基本都指向window

什么是自执行函数

异步

同步和异步的不同

1. 所有的绑定都是异步编程
2. 所有定时器都是异步编程
3. AJAX一般都使用异步编程处理
4. 回调函数也算是异步编程

js的异步模型，如何实现异步

js是单线程的，javascript版的"多线程"都是用单线程模拟出来的

同步的进入主线程，异步的进入Event Table并注册函数。
当指定的事情完成时，Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)
js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

js的事件循环机制

宏任务和微任务区分

第一个宏任务就是js代码从上到下所有同步代码
微任务就是异步，比如setTimeout这种，宏任务执行完了会从队列里调取执行微任务
nextTick是放到下一次事件循环中

promise使用

ES6中新增加的类(new Promise)，目的是为了管理JS中的异步编程，所以我们也把它称为“Promise设计模式”
new一个promise实例.then()。参数是一个函数，函数内是异步任务

new Promise(()=>{
    //执行一个异步的任务(new Promise时候，创建Promise的一个实例，立即把当前函数中的异步操作执行)
    setTimeout(()=>{
    },1000)
    console.log(1);
}).then();
console.log(2)
//先输出1再输出2 因为Promise本身是同步的，只是它可以管理异步操作

【三个状态】：

• padding(准备：初始化成功，开始执行异步任务)
• fulfilled(成功状态)
• rejected(失败)

【如何管理异步操作】

new Promise((resolve,reject)=>{
    //=>resolve:当异步操作执行成功，我们执行resolve
    //=>reject:当异步操作失败，我们执行reject
    setTimeout(()=>{
        resolve(100);
    },1000)
}).then((res)=>{
    //=>第一个传递的函数是resolve 暂时这么简单理解
    console.log('ok',res);
},()=>{
    //第二个传递的函数是reject
    console.log('no')
});

DOM

浏览器输入url到输出页面的过程

vue虚拟dom解读

重绘和回流是什么

也在刚才的链接里

如何优化DOM渲染

requestAnimationFrame是什么

BOM

bom是对浏览器的操作

事件机制

解释冒泡和捕获

举例子说明 比如body下面有div1然后是div2
事件捕获是查找元素的过程，事件冒泡是事件执行的过程
意思即，假如我点击了div2，那么div2就是target，需要从外往里找到它，真正执行是冒泡的过程，先捕获到div2，那div2上的事件是先执行，div1上也有事件，再执行他的。。
冒泡可以被取消
event.cancelBubble = true;

ajax

什么是ajax

异步的js和xml，过去用xml现在都用json了，但名字没改

同源策略

跨域问题，全面分析跨域
这是我学习了很久总结出来的，非常全面，不像网上的说一堆根本看不懂，这里从原因到解决办法都写明了

ajax是同步还是异步

都可以，但一般都是用异步

安全

前端安全问题包含哪些

如何预防xxs，xsrf，预防sql注入

浏览器缓存

强缓存和协商缓存

• 浏览器会先获取该资源缓存的header信息，根据其中的expires和cache-control判断是否命中强缓存），若命中则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信；
• 如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match）,由服务器根据请求中的相关header信息来对比结果是否命中304协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

强缓存如何实现

上面有，设置头

协商缓存如何实现

上面也有

强缓存和协商缓存命中先后顺序及过程

loacl Storage，Session，cookie

打开浏览器的检查里的application

这就是几个缓存方式
local，storage和cookie都存在硬盘里
local，seesion都以键值对形式存数据，key value，如下图

可以用setItem(key，值)进行设置
seesion是关闭浏览器就没了，local还存在
cookie是结合服务端设置，第一次输入用户密码后返回cookie种于浏览器中，之后每次请求都会带上cookie。我们也可以自己用document.cookie设置cookie，cookie包括name，value，过期时间等等等。
注意设置了cookie涉及到跨域的时候要加上with-credential这个头
cookie的大小是4kb。localStorage是5MB。

这仨都是同源的，比如百度的不可以用于腾讯下，为了安全啊。但是cookie的domain可以用于前端父子域跨域传值。

CSS

盒模型

没啥好说的

BFC

css解析优先级

越具体越高
权重计算
行间>内部>外部样式；ID>class>元素。
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。

如何构成BFC，BFC有什么用

双飞翼

清除浮动

移动端

几个viewport

为啥2倍屏

1px像素解决

300ms延迟是什么

网络

状态码

http头举例几个

get和post区别

https和http区别

网络模型

为啥三次握手

其他

常见的前端跨域方式

es6本质

性能优化方法，渲染优化、网络优化、资源优化

js懒加载实现