面试常问web前端面试题10道js（个人心得和总结）

是一些个人的理解和网上的官网词语，出现了一些我面试的高频面试题，会有一些大白话，如果有不对可以纠正我吼

1.闭包（优点，缺点，项目中遇到过的）

首先闭包是一个外部函数嵌套内部函数，外部函数变量可以访问内部函数变量，内部函数变量可以引用外部函数变量（优点），我认为闭包是一个私有的空间，他不受垃圾循环机制的影响，所以它里面的变量不会被回收，因此会导致闭包的泄露（泄露就是你拥有的变量的内存大于浏览器给你的内存），长时间就会导致溢出（溢出就是你这个变量没有被释放，长时间导致会给服务器带来压力），那么我们就说到了这里，怎么能给服务器减轻压力呢？那就是把闭包里面的变量设置为null，就可以了哈哈

项目中应用到的闭包有：购物车的加减（涉及到防抖和节流我们下面会具体说）

2.原型链

每个构造函数下面都有一个 显示原型属性，它new出来的实例下面有一个 隐式原型属性，他俩同事指向原型属性，也就是构造器，构造器下面还有一个显示原型属性指回构造函数，这样他们就形成了一个原型链

原型链其实就是一种查找的方法，它通过构造函数new出来的实例化对象身下的隐式原型属性的--proto一层一层的网上找，直到找到null为止

3.防抖和节流

防抖就是在规定的时间内只执行一次

节流就是在规定的时间内执行规定的次数

项目中应用到防抖和节流也不少哦

例如搜索框防抖和节流都可以用到，但是为了减轻服务前的压力，我们可以选择使用防抖

节流可以在购物车的加减使用哦~因为到热烈活动的时候用户会疯狂点击，这个时候我们就可以使用节流来减小服务器的压力哦

4.再就是es6新特性，基本数据类型，判断属性的几种方式，数组的方法，作用域，作用域链（这些自己搜搜吧，很简单的）

5.js事件循环机制（我特别喜欢这个题它包含很多知识点）

1.首先js是单线程执行的，会有一些定时器和ajax来阻止它的执行，这个时候就会涉及到栈和队列，栈就是执行上下问的时候执行一些同步的代码，队列包含宏任务和微任务，宏任务有ajax，setTimeout，微任务有promise和async await ，他们执行的顺序就是同步的先执行然后微任务再然后宏任务

6.Promise

Promise是es6新增的，是为了更好的解决回调地狱和函数嵌套的一种方法

它有三种状态：

pending

resolved/fulfilled

rejected

两种状态的改变：

pending --> resolved

pending --> rejected

如何改变 promise 的状态

调用 resolve()

调用 reject()

throw error

Promise 的 all 与 race 方法

Promise.all([p1, p2, p3])

接收包含多个 promise 的数组 , 返回一个新的 promise

只有当所有接收的 promise 都成功了 , 返回的 promise 才成功 , 且成功的 value 为所有成功 promise

的 value 组成的数组 一旦有一个失败了 , 返回的 promise 就失败了 , 且失败的 reason 就是失败 promise 的 reason

Promise.race([p1, p2, p3])

接收包含多个 promise 的数组 , 返回一个新的 promise

返回的 promise 的结果由第一个完成的 promise 决定

说说 ES6 中 Promise 的 then 方法

then 指定成功和失败的回调 , 用于得到成功 / 失败的结果数据

then() 总是返回一个新的 promise

新 promise 的结果状态由 then 指定的回调函数执行的结果决定

抛出错误 => 失败且 reason 就是抛出的错误

返回失败的 promise => 失败且 reason 是返回的 promise 的 reason

返回成功的 promise => 成功且 value 是返回的 promise 的 value

返回其它任何值 => 成功且 value 是返回的值

返回 pending 的 promise => pending 的 promise

7.说说async与await的理解和使用

async 与 await 是异步编程的终极解决方案 => 消灭回调函数

作用 : 简化 promise 对象的使用 , 不用再使用 then/catch 来指定回调函数

使用

await 一般在结果为 promise 的表达式左侧 async 在 await 所在函数定义的左侧

注意 :

调用 async 函数得到是一个 promise, 其结果状态由 async 函数体执行的结果决定

await 的右侧也可以不是 promise, 如果不是 , 直接返回表达式的值

8.说说事件冒泡与事件委托

事件冒泡

事件传递给目标元素后，会由内向外传递给外层处理

事件委托

不直接给多个子元素绑定多个事件监听 , 而是给它们共同的父元素绑定一个监听

当操作任意子元素时 , 事件会冒泡到父元素上处理

在事件回调中通过 event.target 得到发生事件的目标元素 , 并进行相关处理

9.解决跨域的方法

首先如果，域名，协议，端口号如果不一致就会触发同源策略

三种解决方法

JSONP: 利用 script 发跨域请求目标接口 , 得到响应数据

CORS: 浏览器直接请求跨域的目标接口 , 服务器返回响应头告诉浏览器允许跨域

Proxy: 浏览器发同源请求代理服务器 , 代理服务器转发请求跨域的目标接口

（前端会代理远端服务器，ajax会代理本地服务器，本地服务器接收到前端代理的服务器，会向后端发送请求，后端的服务器会返回给页面进行页面的数据渲染）

10. 从输入 url 到渲染出页面的整个过程

1.根据服务器找到对应的ip，进行dns解析

2.根据ip找到对应的服务器，进行tcp三次握手

3.发送请求，服务器接收请求进行返回数据进行页面渲染

4.

解析响应数据（

html/css/js ）显示页面

解析 html => dom 树

解析 css => cssom 树

解析 js => 更新 dom 树 /cssom 树

生成渲染树 = dom 树 + cssom 树

布局

渲染

5.断开连接： 4 次挥手