前端一面面经总结

1. 对闭包的了解

答：闭包是函数对周围状态的引用，闭包需要函数来嵌套，在函数外，可以访问函数内的值，访问的值不会被垃圾回收机制所回收。当内部函数被保存到外部时，将会产生闭包。

• 闭包的功能有：
  （1）在函数外，访问函数内的值
  （2）保持引用，不被垃圾回收
  （3）闭包可以做缓存
  （4）闭包可以实现共有变量
  （5）闭包可以实现封装，使属性私有化
  （6）闭包可以实现模块化开发，防止污染全局变量
• 同样闭包也存在自己的缺点，闭包会导致原有的作用域链不释放，从而造成内存泄漏。

2. 对原型、原型链的了解

答：原型是function对象的一个属性，它定义了构造函数制出的对象的公共祖先。通过构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。

• 实例的__proto__ === 类的prototype（student.proto === Student.prototype）
• 前者叫隐式原型， 后者叫显示原型

答：原型链就是实例对象与原型对象的链接，每个函数都有一个prototype属性（即原型对象），我们把这个函数通过new构造函数创建出实例对象，这个实例对象会有一个自己的指针（proto）指向它的构造函数的原型对象。这样构造函数和实例对象之间就通过（proto）链接在一起，形成了原型链。

3. 对执行上下文的理解

答：执行上下文就是当前js被解析和执行时存在的环境。

• 执行上下文又分为：
  （1）全局执行上下文：不在函数内部的代码都位于全局执行上下文中。
  （2）函数执行上下文：每个函数都有自己的执行上下文；每次函数被调用的时候，就会创建一个新的上下文；每个函数执行上下文被创建时，它都会按照特定的顺序执行一系列的步骤。
  （3）eval函数执行上下文：运行在eval函数中的代码具有自己的执行上下文。

• 执行上下文的生命周期：

  （1）创建：当函数被调用，但未执行内部代码前，会做以下几件事：

  • 创建变量对象：首先会初始化函数的参数arguments，提升函数声明和变量声明；
  • 创建作用域链；
  • 确定this指向

  （2）执行：执行变量赋值，执行代码
  （3）回收：执行上下文出栈，虚拟机回收

4. 构造函数如何实现继承（call，apply的区别）

答：利用call，apply来改变this的指向，借用别人的方法来实现自己的功能，以此来实现继承。

• call和apply的区别：
• 共同点：作用都是改变this的指向
• 不同点：call的第一位参数用于改变this指向，第二位实参及以后的参数都被当作正常的实参，传入形参。apply的第一位参数用于改变this指向，第二位是一个arguments数组，即传入一个实参数组。

5. 箭头函数能做构造函数吗

答：不能，因为箭头函数不绑定this。所以箭头函数不能使用arguments，super和new target。而这些值是由外部最近一层的而非箭头函数决定，这样的一个函数就没有构造方法。所以箭头函数不能被当做构造函数，也没有prototype这个属性。

6. 箭头函数的this指向哪里？

答：箭头函数不可以命名且是匿名的，箭头函数没有构造能力，没有arguments对象。设置箭头函数最主要是为了解决this指向问题，箭头函数this的指向是window。

• 普通函数：function（）{}
• 箭头函数：（）=> {}

7. 什么是跨域，如何实现跨域？

答：跨域问题，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源，指的是协议，域名，端口号都相同。即浏览器执行js脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

• 举个跨域的例子
  （1） http://www.baidu.com/index.html
  调用 http://www.baidu.com/sever.php （非跨域）
  （2） http://www.baidu.com/index.html
  调用 https://www.baidu.com/sever.php （跨域，http，https协议不同）
  （3）http://www. baidu.com/index.html
  调用 http://www.taobao.com/sever.php （跨域，baidu，taobao域名不同）
  （4）http://www.abc.baidu.com/index.html
  调用 http://www.def.baidu.com/sever.php（跨域，abc，def子域名不同）
  （5）http://www.baidu.com:8080/index.html
  调用 http://www.baidu.com:8081/sever.php（跨域，8080，8081端口号不同）

• 跨域的解决方法
  （1）JSONP：通过script标签属性scr属性来导入跨域的请求，在scr属性中填入跨域请求的url地址。但JSONP只支持GET请求，不支持POST请求。
  （2）代理：写一个接口，绕过浏览器端。
  （3）PHP端修改header。在php接口脚本中加入以下两句：

  header('Access-Control-Allow-Origin:*'); //允许所有来源访问
  header('Access-Control-Allow-Method:POST,GET') // 允许的访问方式
  

8. 防抖和节流的区别

• 防抖：防止抖动。事件在我们规定的间隔n秒内多次执行，回调只会执行一次。简单来说，就是一个函数连续多次触发，只执行最后一次。
• 节流：控制流量。用于用户在于界面交互时控制事件发生的频率。简单来说，就是一个函数连续多次触发，按照一定的间隔多次执行。
• 防抖应用场景：
  （1）用户输入用户名，手机号时最后一个字母输入后再验证。
  （2）一个按钮发送请求时，最后一次按才发送。
  （3）窗口resize。当窗口大小确定时才渲染，防止重复渲染。
  （4）输入框内容联想。
• 节流应用场景：
  （1）滚动加载
  （2）mousemove
  （3）mousehover

9. evenloop（事件循环）

答：事件循环是指浏览器解决js单线程运行时不会阻塞的一种机制，也就是我们经常使用的异步的原理。

• 所有的同步任务都在主线程上执行，形成一个执行栈。
• 主线程外，还存在一个“任务队列”，只要异步任务有了运行结果，就在“任务队列”中放置一个事件。
• 一旦‘执行栈’中的所有同步任务都执行完毕，系统会读取“任务队列”，那些对应的异步任务就结束等待状态，进入栈，开始执行。
• 主线程不断重复以上三步。

10. 本地存储之sessionStorage和localStorage

答：（1）本地存储特点：

• 数据存储在用户浏览器中
• 设置、读取方便，甚至页面刷新不丢失数据
• 容量较大，sessionStorage约5M，localStorage约20M
• 只存储字符串，可以将对象JSON.stringfy()编码后存储

（2）sessionStorage：

• 生命周期为关闭浏览器窗口
• 在同一个窗口（页面）下数据可共享
• 以键值对的形式存储
• sessionStorage.setItem(key,value) // 写入数据
• sessionStorage.getItem(key) // 获得数据
• sessionStorage.removeItem(key) // 删除数据
• sessionStorage.clear() // 删除所有数据

（3）localStorage：

• 生命周期永久生效，除非手动删除，否则关闭页面也会存在
• 可以多窗口（页面）共享（同一浏览器可以共享）
• 以键值对的形式存储使用
• localStorage.setItem(key,value) // 写入数据
• localStorage.getItem(key) // 获得数据
• localStorage.removeItem(key) // 删除数据
• localStorage.clear() // 删除所有数据

11. 重绘和回流

答：（1）重绘:DOM树没有元素增加或删除，只是样式改变
（2）回流：DOM树中有元素增加或删除，重新渲染整个DOM树
（3）回流必定产生重绘，重绘不一定产生回流

12.从输入URL到页面展示着中间发生了什么？

1. 用户输入URL
2. 浏览器分析URL
3. 浏览器向DNS请求解析IP地址
4. DNS解析出IP地址
5. 浏览器与服务器建立TCP连接
6. 浏览器发出取文件命令
7. 服务器响应
8. 释放TCP连接
9. 浏览器显示

13. innerText和innerHTML的区别

• innerText 非官方，无法识别html标签，无法识别空格和换行
• innerHtml W3c标准，可以识别html标签，可以识别空格和换行