2019最新前端面试题合集（理论篇）

1.如何理解闭包

——定义：当一个函数的返回值是另一个函数，并且这个函数调用了其父函数内部的其他变量并在外部执行，就产生了闭包。
——表现形式：使函数外部能够调用函数内部的变量。
——使用闭包的注意点：
（1）滥用闭包会造成内存泄漏：由于闭包会使得函数中的变量都保存在内存中，内存消耗很大，不能滥用，否则会造成网页性能问题。解决方法是在退出函数之前，将不使用的局部变量全部删除。
（2）会改变父函数内部变量的值。

2.谈谈垃圾回收机制方式及内存管理

——定义及用法：垃圾回收机制是执行环境负责管理执行代码过程中使用的内存。
——原理：垃圾收集器会定期（周期性）找出不在继续使用的变量，然后释放内存，但这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的事件间隔周期性的执行。
——垃圾回收策略：引用计数和标记清除（较为常用）
（1）引用计数：跟踪记录浓眉哥值被引用的次数。被引用则加1，当这个引用计数为0时，被视为准备回收的对象。
（2）标记清除：当变量进进入环境时，将变量标记为“进入环境”，当变量离开环境时，标记为“离开环境”。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境引用的变量，剩下的将会被视为准备回收的变量。

3.谈谈内存泄漏

——**定义：**指一块被分配的既不使用，又不能回收，直到浏览器进程结束。
——常见的几种内存泄漏的情况：
（1）当页面中元素被移除或替换时，如果元素绑定的事件仍没被移除，就会造成内存泄漏，此时需要手工移除事件。

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

4.简述一下src和href的区别。

——href指向网络资源所在的位置，建立和当前元素和当前文档的链接，用于超链接。
——src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；在请求src资源使会将其指向的资源下载并应有到文档中，例如js脚本，img图片等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载，编译，执行完毕。这也是为什么js脚本文件放在底部而不是头部。

5.简述一下同步和异步的区别。

——同步是阻塞模式，异步是非阻塞模式。
——同步只一个进程在执行某个请求是，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。异步指线程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有消息返回时会通知进程处理，这样可以提高执行的效率。

6.px和em的区别

——相同点：px和em都是长度单位
——不同点：px的值是固定的，指定多少就是多少，计算比较容易；em的值不是固定的，并且会继承父级元素额字体大小。

7.什么叫优雅降级和渐进增强？

——优雅降级：一开始构建完整的功能，然后再针对对版本浏览器进行兼容。
——渐进增强：针对低版本浏览器进行构建页面，保证基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
——区别
（1）优雅降级是从复杂的现状开始，试图减少用户体验的供给
（2）渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来的环境。

8.sessionStorage、localStorage和cookie之间的区别

——相同点：都是用于浏览器端存储的缓存数据
——不同点：
（1）存储内容是否发送到服务器端：当设置了cookie后，数据会被发送到服务器端，造成了 一定的宽带浪费，web storage会将数据存储到本地，不会造成宽带浪费。
（2）数据储存大小不同:cookie数据不能何从爱国4k，适用于会话标识，web storage储存数据可以达到5M.
（3）数据存储的有效期限不同：cookie只在设置了cookie过期时间之前一直有效，及时关闭了窗口和浏览器；localStorage数据储存将永久有效；sessionStorage在关闭浏览器之前有效

9.web storage和Cookie相比存在的优势。

——（1）存储空间更大:各浏览器实现各有不同，但是都比cookie大得多。
——（2）存储内容不会发送到服务器端：web storage中的数据仅仅保存在本地，不会与浏览器发生交互，不会造成宽带浪费。
——（3）更多丰富易用的接口:web storage提供了一套更为丰富的借口，如setItem、getItem、removeItem、clear等，使得数据操作更为简便，cookie需要自己封装。
——（4）独立的存储空间：每个域（包括子域）有独立的存储空间，每个存储空间都是完全独立的，因此不会造成数据混乱。

10.Ajax的优缺点和工作原理。

——定义：Ajax是一种用于创建快速动态网页的技术，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
——优点：
（1）减少服务器的负担，按需获取数据，最大程度的减少冗余请求。
（2）局部刷新页面，减少用户心理和实际的等待时间，带来更好的用户体验。
（3）基于xml标准化，并被广泛支持，不需要安装插件，进一步醋精页面和数据分离。
——缺点：
（1）Ajax大量的使用了javascript和ajax引擎，这些取决于浏览器的支持，编写的时候要考虑浏览器的兼容性。
（2）Ajax只是局部刷新，所以页面中的后退按钮是没有用的。
（3）对流媒体还有移动设备的支持不太好。
——Ajax的工作原理
（1）创建ajax对象（XMLHttpRequest）；
（2）判断数据传输方式（GET/POST）；
（3）打开链接open（）；
（4）发送send（）；
（5）当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304(缓存)执行回调函数。

11.web前端，如何提高页面性能优化？

——内容方面：
（1）减少http请求吧
（2）减少DOM元素数量
（3）使得Ajax可缓存
——针对CSS：
（1）把CSS放到代码页上端
（2）从页面中剥离JavaScript与CSS
（3）精简JavaScript与CSS
（4）避免CSS表达式
——针对JavaScript
（1）脚本放到HTML代码页底部
（2）从页面中剥离JavaScript与CSS
（3）精简JavaScript与CSS
（4）移除重复脚本
——面向图片：
（1）优化图片
（2）不要造HTML中使用缩放图片
（3）使用恰当的图片格式
（4）使用CSS Sprites技巧对图片优化

12.浏览器是如何渲染页面的？

（1）解析HTML文件，创建DOM树；自上而下，遇到任何样式（link、style）与脚本都会阻塞；
（2）解析CSS。
（3）将DOM和CSS合并，构建渲染树；
（4）布局和绘制，重绘(repaint)和重排（reflow）

13.reflow(重排、回流)和repaint(重绘)？

——reflow:浏览器要花时间去渲染，当它发现某个部分发生了变化并且影响了布局，就需要倒回去重新渲染；
——repaint:如果只是改变了某个元素的背景颜色或文字颜色，不影响元素周围或内部布局，就会引起浏览器的repaint，重画其中一部分。
——reflow比repaint更花费时间，也就更影响性能，所以写代码时应该尽量避免过多的reflow;

14.什么时候会发生reflow?

（1）页面初始化的时候
（2）操作DOM的时候（增加或删除DOM元素）
（3）某些元素的尺寸改变了（边距，边框，宽高，填充）
（4）CSS的属性发生改变（display:none等）
（5）内容改变（文本改变或图片改变而引起的计算值的宽高改变）
（6）浏览器窗口尺寸改变（当resize事件发生时）

15.一次完整的HTTP事务流程

（1）域名解析
（2）发起TCP的三次握手
（3）建立TCP连接后发起http请求
（4）服务器响应http请求，浏览器得到HTML代码
（5）浏览器解析HTML代码，并请求HTML代码中的代码
（6）浏览器对页面进行渲染呈现给用户
（7）连接结束

15.谈谈TCP三次握手和四次挥手。

——三次握手的必要性:为了保证服务器能接收到客户端的信息并作出正确的应答而进行前两次（第一次和第二次）握手，为了保证客户端能够接收到服务器端的信息并能作出正确的应答而进行后两次（第二次和第三次）握手。
——四次挥手：当客户端和服务器通过三次握手建立了TCP连接后，当数据传输完毕，就要断开TCP连接，这个过程称为四次挥手。

16.HTTP和HTTPS的区别

——HTTP（超文本传输协议）：被用在web浏览器和网站服务器之间传递信息，HTTP协议以铭文的方式发送内容，不提供任何方式的加密，如果攻击者截取了web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如信用卡号、密码等支付信息。
——HTTPS（安全套接层超文本传输协议）：为了传输数据的安全，HTTPS在HTTP的基础上加入了SSL/TLS，依靠证书来验证服务器的身份，并为浏览器和服务器的通信加密，其中SSL（安全套接层），TLS（传输层安全协议）。
——区别：
（1）HTTPS协议需要CA申请证书，一般免费证书比较少，所以需要一定的费用。
（2）HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全行的SSL加密传输协议。
（3）HTTP和HTTPS使用的是完全不同的连接方式，使用的端口号也不一样，前者是80，后者是443。

17.从输入URL到显示页面，都经历了什么？

（1）在地址栏输入URL
（2）浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中uoi，会直接显示页面内容，如果没有，跳到第三步。
（3）浏览器进行域名解析，解析获取相应的IP地址
（2）发起三次握手，建立TCP连接
（3）握手成功后，发送http请求，请求数据包
（4）服务器响应请求，返回数据至浏览器
（5）浏览器获得HTML文件，解析HTML文件，并请求文件中的资源
（6）浏览器构建DOM树
（7）解析CSS文件，JS交互
（8）构建渲染树，渲染页面

18.new一个对象发生了什么？

（1）创建一个空对象
（2）将构造函数的作用域赋给新对象
（3）执行构造函数中的代码
（4）返回一个新对象

19.display:none和visibility: hidden的区别

——display:none是彻底消失，不占文档流，浏览器也不会解析该元素，visibility: hidden是从视觉上消失了，在文档流中占位，浏览器会解析该元素
——display:none状态切换时会产生回流，影响性能，visibility: hidden切换时不会影响回流

20.GET和POST的区别

——参数传递方式不同：get请求会将参数跟在URL后进行传递,因为参数直接暴露，所以不能用来传递敏感信息，post请求将参数放在http消息的实体内容(request body)中发送给服务器，这种传递方式对用户不可见
——数据传递大小不同：get方式传递的数据不能超过2KB，而post要大的多
——get请求只能进行URL编码，post请求支持多种编码方式
——安全问题：GET方式请求的数据会被浏览器缓存起来，别完整保留在浏览历史记录中，因此有安全问题
——get产生一个TCP数据包，post产生两个TCP数据包

21.position的取值

——absolute：生成绝对定位的元素，相对于最近一级的定位不是static的父元素进行定位
——relative：生成相对定位的元素，相对于其在普通流中的位置进行 定位
——fixed：生成绝对定位的元素，相对于；浏览器窗口或frame进行定位
——static：默认值，没有定位，元素出现在正常流中
——sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出

22.如何解决跨域问题？

（1）JSONP：
——原理： 动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会将我们需要的json数据作为参数传入。由于同源策略的限制，XMLHTTPRequest只允许请求当前源的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务器输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
——优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。
——JSONP=json+padding,就是把JSON填充到一个盒子中去。

 <script>
        function creatJS(sUrl){
            var oScript = document.createElement('script');
            oScript.type = 'text/script';
            oScript.src = 'sUrl';
            document.getElementsByTagName('head')[0].appendChild(oScript);
        }
        creatJS('json.js');
        box({
            "name":"test"
        });
        function box(json){
            alert(json.name);
        }
    </script>

（2）CROS
——CROS 全称为跨域资源共享，它允许浏览器向跨域服务器发送XmlHttpRequest请求，从而克服了AJax只能请求同源资源的限制。`

function createCORS(method, url){
    var xhr = new XMLHttpRequest();
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != 'undefined'){
        var xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{
        xhr = null;
    }
    return xhr;
}
var request = createCORS('get', 'http://www.baidu.com');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}

（3）使用wensocket
——web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
——web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
——只有在支持web socket协议的服务器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
    var data = event.data;
}

23.前端常见的安全问题。

（1）sql注入原理
——定义：就是把sql命令插入到web表单递交或页面请求或输入域名的查询字符串中，最终达到欺骗服务器执行恶意sql命令。
——防范方法：
1）永远不要相信用户的输入，要对用户输入进行校验，可以通过正则表达式或限制长度，对单引号或者双“-”
进行转换等。
2）永远不要使用动态拼装SQL，可以使用参数化的SQL
3）永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有效的数据库连接
4）永远不要把机密信息明文存放，请加密或hash掉密码和敏感的信息
（2）XSS攻击
——定义：XSS攻击是指攻击者往web页面中插入恶意HTML标签或者JavaScript标签。比如：攻击者在论坛放入一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加入一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
——防范方法：
1）1.首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<” , ”>” , ”;” , ”’” 等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
2）永远不要使用动态拼装SQL，可以使用参数化的SQL
3）永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有效的数据库连接
4）永远不要把机密信息明文存放，请加密或hash掉密码和敏感的信息
（3）CSRF（跨站请求伪造）攻击
——定义：是一种挟持用户在当前已登录的web应用程序上执行非本意的操作的攻击方法，就是说冒充用户发出请求（在用户不知情的情况下），完成一些违背用户意愿的请求（恶意发帖、删帖、改密码、发邮件等）。只要是伪造用户发起的请求，都可以成为CSRF攻击。
——防范方法：服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。通过验证码的方法来判断。
（4）XSS攻击和CSRF攻击的区别：
——XSS是用来获取信息的，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
——要完成一次CSRF攻击，受害者必须依次完成两个步骤：a.登录受信任网站A，并在本地生成Cookie。b.在不退出A的情况下，访问危险网站B。

24.常见的HTTP状态码

——5种类型
1**：信息，服务器接收到请求，需要请求者再次执行操作。
2**：成功，服务器接收到请求并作出处理
3**：重定向，需要进一步操作才能完成请求
**4**客户端错误，请求包含语法错误或无法完成请求
5：服务端错误，服务器在处理请求时发生了错误
——常见状态码：
200：请求成功，一般用于GET和POST请求
204：服务器处理成功，但是未返回内容
301：永久移动，请求的资源已被永久的移动到新的URL中了，返回的信息会包含新的URL，浏览器会重新定向到新的URL
302：临时移动
307：临时重定向，使用GET请求重定向
400：客户端语法错误，服务器无法理解
403：服务器理解请求，但是拒绝执行该请求
404：服务器无法根据客户端的请求找到资源
500：服务器内部错误，无法完成请求
501：服务器不支持请求的功能，无法完成请求

25.网络分层里七层模型是哪七层

——应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）
——传输层（TCP和UDP）
——网络层（IP）
——物理和数据链路层（以太网）
每一次层的作用如下：

• 应用层：允许访问OSI环境的手段（应用协议数据单元APDU）
• 表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
• 会话层：建立、管理和终止对话（绘画协议数据单元SOPDU）
• 传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
• 网络层：负责数据包从源到宿的传递和网际互连（包Packet）
• 数据链路层：将比特组装成帧和点到点的传递
• 物理层：通过媒介传输比特，确定机械及电气规范（比特Bit）

25.关于时间线。

——定义：在浏览器开始加载页面的那一刻到页面加载完全结束的这个过程中，按顺序发生的每一件事的总流程就叫做时间线。
——流程
（1）JS引擎先帮我们创建一个docment对象
（2）解析文档，构建DOM树
此时 docment.readtState = ‘loading’(文档加载中);
（3）遇到link就开新的线程，然后异步加载CSS外部文件
（4）如果遇到script标签，且没有设置异步加载（defer、async等），阻塞文档加载，直至JS脚本加载并且执行完成。如果设置了async，则会异步加载JS脚本并且立即执行，不用阻塞文档（但是异步脚本里不能使用docment.write()，如果非要使用，则需写在window.onload = function(){}里面）。
（5）解析文档遇到img，先解析这个节点，遇到src=’’,创建加载线程，异步加载图片资源，不阻塞解析文档。
（6）文档解析完成 此时 docment.readtState = ‘interactive’;
（7）如果script设置了defer,则等文档解析完成JS脚本才开始按照顺序执行
（8）文档解析完成，会触发DOMContentLoaded事件，所以可以监控此事件从而得知文档何时解析完成。
此时程序：同步的脚本执行阶段 -->事件驱动阶段
（9）JS加载并执行完毕，img等资源加载完毕，即页面加载完成，window对象的onload事件才会触发。
此时 docment.readtState = ‘complete’(文档加载完成);

26.定时器的执行顺序或机制

——因为JS是单线程的，浏览器遇到setTimeout或者setinterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行事件队列中，等到浏览器执行完当前代码块后会看一下事件队列里面有没有任务，有的话才执行定时器的代码。所以即使将定时器的时间设置为0还是会先执行当前的代码。

27.html中title属性和alt属性的区别？

    <img src="#" alt="alt信息">
    //当图片不能正常显示时，会显示alt信息，鼠标放上去没有信息，当图片可以正常显示时，不会出现alt信息
    <img src="#" alt="alt信息" title="title信息">
    //当图片不能正常显示时，会显示alt信息，鼠标放上去会出现title信息
    //当图片正常显示时，不会出现alt信息，鼠标放上去会出现title信息

28.XML和JSON的区别？

（1）数据体积方面：JSON相对于XML来讲讲，数据的体积更小，传递的速度更快些
（2）数据交互方面：JSON和JavaScript的交互更加方便，更容易解析处理，更好的数据交互
（3）数据描述方面：JSON对数据的描述性比XML较差
（4）传输速度方面：JSON的速度要远远快于XML

29.TCP和UDP的区别

——TCP（传输控制协议）是基于连接的协议，也就是说，在正式发数据之前必须和对方建立可靠的连接，一个TCP连接必须经过三次“对话”才能建立起来
——UDP（用户数据报协议）是与TCP相对应的协议，它是面向非连接的协议，它不与对方建立连接，而是直接把数据包发送过去。UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

30.继承的几种方法

（1）原型链继承
——思想：利用原型让一个引用类型继承另一个引用类型的属性和方法
——构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包括一个纸箱构造函数的指针，实例都包含一个指向原型对象的内部指针。

//形成了一个原型链，son既能继承father的东西，也能继承grand的东西
        Grand.prototype.lastName = 'yang';
        function Grand(){

        }
        var grand = new Grand();
        Father.prototype = Grand;
        function Father(){
            this.name = 'haha';
        }
        var father = new Father();
        Son.prototype = father;
        function Son(){

        }
        var son = new Son();

（2）构造函数继承
——通过call/apply来继承
——缺点：不能继承借用构造函数的原型；每次构造函数都要多走一个函数。

function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        function Student(name,age,sex,grade){
            Person.call(this,name,age,sex);
            this.grade = grade;
        }
        var student = new Student();

（4）共享原型
——缺点：不能随便改动自己的原型

Father.prototype.lastName = 'yang';
        function Father(){

        }
        function Son(){
            
        }

31.说说对作用域的理解

——作用域是保证执行环境下有权访问的变量和函数是有序的，作用域的变量只能向上访问，访问到window对象即停止，作用域向下访问变量是不被允许的。

32.创建AJAX的过程

（1）创建XMLHttpRequest对象,也就是创建一个异步调用对象.
（2）创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
（3）设置响应HTTP请求状态变化的函数.
（4）发送HTTP请求.
（5）获取异步调用返回的数据.
（6）使用JavaScript和DOM实现局部刷新.

function obj2str(data){
    var res = [];
    data.t = new Date().getTime();
    for(var key in data){
        //将中文转换为特殊字符串，例如%E5%BC%A0%E4%BD%86
        res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    return res.join('&');

}
function ajax(option){//timeout为超时时间
    //0.将对象转换为字符串
    var str = obj2str(option.data);//转发为key=value&key=value这种形式
    //1.创建一个异步对象
  var xmlhttp,timer;
  if(window.XMLHttpRequest){
     xmlhttp = new XMLHttpRequest();
  }else{
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
  }
   //2.设置请求方式和请求地址
  if(option.type.toLowerCase() === 'get'){
    xmlhttp.open(option.type,option.url+'?'+ str,true);
   //3.发送请求
   xmlhttp.send();
  }else{
      xmlhttp.open(option.type,option.url,true);
      //以下代码只能写到open和send之间
      xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
      xmlhttp.send(str);
  }
   //4.监听状态的变化
   xmlhttp.onreadystatechange = function(){
       if(xmlhttp.readyState == 4){
           //如果接受到服务器的响应，就要把定时器关掉
           clearInterval(timer);
           if(xmlhttp.status >=200 && xmlhttp.status <= 300 || xmlhttp.status == 304){
            //状态码判断
            //成功后执行的回调函数
            option.success(xmlhttp);
           }else{
            //失败后执行的回调函数
            option.error(xmlhttp);
           }
       }
   }
   //判断外界是否传入了超时时间
   if(option.timeout){
       timer  = setTimeout(function(){
           xmlhttp.abort();//中断请求
           clearInterval(timer);
       },option.timeout)
   }
}

33.defer和aysnc的区别

——defer并行加载JS文件，下载完成后按照script所在的顺序执行
——aysnc并行加载S文件，下载完便立即执行

34.实现深拷贝的几种方法

（1）利用递归的方法实现

//使用递归的方式实现数组、对象的深拷贝
function deepClone1(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone1(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

（2）通过JSON对象实现深拷贝

//通过js的内置对象JSON来进行数组对象的深拷贝
function deepClone2(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}

（3）通过JQuery的方法实现

$.extend([deep ], target, object1 [, objectN ])

deep表示是否深拷贝，为true为深拷贝；为false，为浅拷贝。
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);

35.typeof和intanceof的区别

（1）typeof可以判断基础类型和引用类型，而intanceof只能判断引用类型（object,Array,RegExp）;
（2）typeof返回值有六种：number、string、boolean、undefined、function、object;
intanceof只能返回ture或者false，
（3）位置不同，typeof放在变量前面，intanceof放在变量后面